Google statistics show that over a half of all internet traffic today is coming from mobile devices. And most people want to browse using their phones the same way they browse using a laptop or a desktop computer. Web design community responded to this by creating mobile versions of websites, a practice which seemed reasonable at the time. But this meant that every website had to have two versions, one for desktop and one for mobile, which is simply a waste of time and resources.
Besides mobile, people also use tablets and increasingly larger and larger desktop screens, so having two versions of the same thing doesn’t really solve the problem. What this means is that web developers need to make websites that adapt to any device or screen size in order to provide the users with the most dynamic and fluent experience possible. This is where responsive design comes into play. Coined by Ethan Marcotte, this term covers a specific set of techniques and practices which allow for a particular web design to serve users on devices with different screen sizes. Here are some things you should consider when making a responsive website.
1. Using Fluid Grids
One of the first steps in creating a responsive design is using fluid grids. What makes them different from fixed or liquid grids is that instead of relying on percentage values and rigid pixels, fluid grids resize all the elements of the layout in relation to each other. Calculating the proportion of every page element is done by dividing the specific element by its own context. At the moment, the best way to do that is creating a high fidelity mockup using an image editor such as Photoshop. Whatever you do, never round up the values, it may be better on the eyes, but it can have an adverse effect on the final design.
2. Using Media Queries
Media queries are a vital part of CSS3 as they allow you to collect site visitor data, such as whether they’re using a desktop or a mobile and use that data to apply the CSS styles conditionally. For example, the min-width feature is used to apply a specific CSS style whenever the browser windows fall below a specific width. Have in mind that you can’t actually cover every single device and screen size, but you can set some of the most often used resolutions and add new ones if you ever need to.
3. Flexible Icons & Images
Images are a crucial element for any browsing experience. In the terms of responsive designs, images and icons need to follow specific ratios and percentages in order to ensure that they will conform to your specific layout. This means that they need to allow the user to enjoy your graphics on devices ranging from mobile to a high pixel density device. Icons can also be made scalable by using the SVG format, which makes them light in the terms of internet traffic, but high-quality at the same time.
4. Always Try to Consider the Context
Most of the time, web developers use responsive design to simply fit the website onto different sized screens, where a layout consisting of a single column gets scaled up and spans several columns as the size of the screens gets bigger and bigger. This leads to great scalability, but the customers end up with the wrong context and information, depending on the device they’re using. Always consult with your development team and use the gathered user data to better establish the context in your layout.
5. Prioritize Content in Different Ways
Although going up from a single column layout for mobile devices to multiple column layouts for bigger displays is the definition of responsive design, but changes to the layout don’t stop with the columns. You also need to realize that different content demands different approaches when designing the layout. For example, business and editorial images are often displayed first and at the top of the website, which is normal for desktop browsing. However, these images become unnecessary when viewed on mobile, as they are not a critical aspect of content presentation.
5 Web Design Trends To Follow In 2013
6. Use Scalable Navigation
Creating good navigation is one of the most perplexing aspects when it comes to effectively designing a responsive website. What works exceptionally well for a larger screen ends up completely breaking down on smaller devices. Navigation, including its placement, buttons, labels and even the visual characteristics need to be consistent over all devices. For example, that pop-out menu you see when you hover a mouse over it may look amazing on the desktop, but it’s not going to work on a mobile device. In those cases, navigation has to possess a similar design, but a completely different functionality, depending on where it is going to be used.
Introduction And Guide To Flash Website Design
7. Be Careful with Font Sizes
Responsive design or not, typography playsa key role in good web design. A good web developer needs to choose the right typeface ensures optimal user experience no matter what device they use. That is why you need to make sure that the typeface you’re using is readable even when using the smallest of sizes. Also, headings must be clearly separated from the rest of the text body and at least 1.6 times larger. The body itself should not be more than 12-16pt, which a default on almost all browsers today. Choosing the right color and contrast is an individual matter and depends mostly on the wishes of the client, but try to complement them with each other for best results.
Responsive design is one of the most efficient and cost-effective ways of dealing with various devices and screen sizes. This doesn’t mean that it shouldn’t be coupled with traditional techniques such as making a native mobile app, using site markups or server-side tailoring. It ensures that you are building a good foundation for your, or your client’s web presence, which is capable of handling a wide range of devices and different scenarios. Remember to put all your efforts into improving the user experience and always providing them with relevant content.
John Stone is an Seo Consultant from Sydney, Australia. Through years of experience, he became a devout believer in the notion that form should always follow function and that developing the ability to think outside of the box is a prerequisite of being a successful entrepreneur. You can find him on Twitter.