For easier development using media queries, we have to transform the fixed sized layout to a fluid one which will take advantage of percentages instead of pixels and as a result the layout will always shrink and grow based on the browser size or display resolution. The font size will also be specified in em’s (similar with %) so it will zoom automatically.
CSS3 Media Queries enable us to use conditionals depending on resolution. For example we can specify something like this: if browser’s width is 480px or smaller than hide sidebar and/or make the navigation horizontal.
Please see below how the next website behaves when it’s viewed at different browsers widths or resolutions: http://webdesignerwall.com/
Medium resolutions or iPads (tablets)
Small resolutions or iPhones (smarthpones)
Responsive Design and Media Queries Advantages
- You can serve only the most important content for smaller resolutions such as iPhones, thus eliminating clutter
- Higher chances that the website will lead to more conversions (better selling of products or services)
- If a significant portion of your audience are using mobile devices, a responsive website makes sense.
Responsive Design and Media Queries Disadvantages
- Responsive websites take longer to code and are more expensive
- Those who expect the same pixel perfect layout for each resolution will be disappointed. However, this could be an advantage in certain cases
- Before investing in this option I recommend checking the analytics. If most of the visitors are using 1024px resolutions and up, an responsive solution wouldn’t make sense
- The requirement is to always build first the Mobile version than customize it for larger resolutions.
- Most of fixed websites show up reasonable well on smaller devices.
- Some non-tech clients wouldn’t understand why their website doesn’t shows on the phone the same like on desktop.
Responsive designs would not always benefit all website owners and investing extra in this feature does not makes sense in all cases. However, certain business owners can greatly improve the browsing experience of their users. If a significant percentage of the visitors are browsing using mobile devices, providing them with an easier way to access the content could lead to higher profits.