Responsive website designs; often called ‘mobile responsive design’ automatically change to fit the device you’re viewing it on; it does not just resize the same layout.
When a website is responsive, the layout and/or content responds or changes based on the size of screen they are viewed on.
There are basically four screen sizes responsive design has been aimed at; desktop wide screen monitors, small desktop monitors including laptops, portable tablets (such as ipad®) and smart mobile phones (iphone® are an example).
As you can see from the responsive website design example below; as the screen gets smaller, the content shifts and changes to the best display for each screen.
Thinking IT’s website, is a responsive website design example. Take a look at it on your mobile smart phone and tablet.
Why Should I Care About Mobile Responsive Design?
In short, you (publisher, website developer, and web designer) should care because you want the visitors to your website to have the best experience possible, without forcing them to adapt themselves.
There are essentially two ways you can give your audience a good experience utilizing responsive design:
The first is optimising the layout of the content.
If a user is browsing from a mobile phone, they generally don’t have a lot of screen real estate to work with. Phones today will typically zoom out automatically, so that the entire website can be seen on screen. This can be good, as it gives the reader access to the entire sight, but it can also be frustrating when trying to find information that is located in a tiny part of the upper right of the screen. If you could move some things around, make some things bigger and not have as many columns you’ll give your mobile reader a much better experience.
The second is to adapt the content that is shown.
If you own a restaurant and a potential customer is browsing your site from a mobile phone, chances are they aren’t that concerned with how pretty your site is – your food blog with the slideshow of tempting dishes scrolling from side to side isn’t very useful in that situation. They want to know what your hours are, where you’re located, how to make reservations, and want a look at the menu.
Your potential customer browsing from a desktop computer probably isn’t looking to eat right now, and isn’t in a hurry to see where you’re located and what your phone number is. Most likely he’s looking to see if you offer a good atmosphere and what types food are available.
These two examples show you the benefit of having differing content presented to people in different screen viewing circumstances; i.e. using different devices that have very different screen sizes.
Mobile responsive designs takes care of this all ‘on the fly’, and without multiple versions of your site to maintain. When the screen width goes under 960 pixels, the navigation menu does a very smart thing that a lot of sites get wrong – it doesn’t get smaller as the screen does, but splits itself over two or more lines.
The font is the same size, the icons are same size, but everything is very selectable by touch.
If you would like a responsive design website for your business so that it is easy to navigate and and viewed on all screens/devices…