With the evolution and increased popularity of the humble smart phone, the way we want to access, need to access & expect to access website and data in general has changed massively.
Gone are the days when having a simple 960px fixed width website was enough. We all use mobile devices and as a result expect to see websites with a different, simpler interface that is finger friendly.
When we first started using mobile devices to browse the web, the done thing was to keep the fixed width website and also offer a simplified additional website that was built specifically for viewing on mobile phones. For the website owner, this meant extra expense and having to keep two websites up to date rather than just the original one.
The next generation of mobile devices that have followed on from mobile phones has further complicated the issue. Tablets often have similar screen resolutions to a desktop computer (full HD @ 1080P) which makes life a little trickier. Should tablets see a mobile version, or the desktop site. Fumbling fingers could still struggle on a normal desktop site, so typically they get to see a mobile site, which isn’t always ideal.
Now that we have lived with these devices for a longer period of time, web tech has been able to catch up & help solve this common problem. Responsive design has now come of age & can be seen out in the wild across the internet.
What Is Responsive Design?
As the name suggests, the website design responds – it responds to the size of the screen of the device that is displaying the website. There are several pre-built libraries that will allow you to build websites like this really easily. Possibly the most popular & my personal favorite is Bootstrap.
Bootstrap is an open source, community built set of libraries that have been assembled to make your life as a website coder much, much easier. At its core is a CSS setup that works on a 12 column grid system. This allows you to simultaneously control the website layout for a widescreen desktop PC, regular PC, tablet & mobile phones. You can show hide different areas at different window sizes & set the main menu to change to a mobile friendly touch version at the smallest size.
Bootstrap also provides CSS classes for buttons, responsive images, table display (with striped rows etc) and tons more.
In short, once you find your way around the toys that are available to you, it becomes incredibly quick and easy to code a page that adjusts to all the different sizes. No more fiddling with floats or margins – it does it all for you.
While this approach is still in the earlier part of its development cycle – it will be the standard approach for years to come. The libraries will become even easier to use and , I expect, even cleverer as well.
I used to be the type of person that didn’t want to use someone elses library as I thought I could do it all myself. I now rejoice at the amount of time I save by using Bootstrap – I can get on with more enjoyable tasks & the rest of my life.