In the past, websites were built for the desktop computer. This carried the day for a while until mobile phones and other devices of varying screen widths entered the scene. This presented a new challenge.
Web designers were at a loss about how to develop websites that looked great and performed optimally on multiple devices. Then someone figured separate mobile sites would do the trick. The only downside is this move presented a couple of problems including:
- Inconsistencies since developers had to build mobile sites from the ground up
- Time lost updating mobile sites
- Mobile sites weren’t really great for SEO
In 2010, Ethan Marcotte of A List Apart introduced the concept of responsive web design changing the web design landscape forever. We developers all over the globe could breath again. But what is this thing, responsive web design, everybody is talking about?
RWD gives users a seamless web experience across different screen sizes. By using fluid grid, flexible images, CSS3 media queries (among other tools), RWD seeks to minimize the amount of scrolling, zooming and overall effort required on the part of the user in order to provide a faster, more adaptive web experiences across different screen sizes and platforms – What You Need to Know About Responsive Web Design, CMS Wire.
Now that we have the pleasantries out of the way, shall we get to the more serious business? What do you need to know about responsive design?
Responsive Design is Here to Stay
It’s more than just a trend. Why? The variety of device screen continues to grow every day. More users access the internet on their mobile now more than ever, and this trend is expected to keep rising. As such, RWD is likely to become the standard practice for web designers.
Responsive != Mobile Design
Responsive web design is a great way of rendering content across your devices. It is not and will never be mobile design. Websites developed using responsive design techniques will look great at a variety of desktop resolutions as well as on tablets and smartphones. At the same time, many developers adopt a mobile-first approach when creating responsive websites.
Flexibility is the Key
In responsive design, every element: images, grids, type etc of your website is flexible. Think in terms of flexibility when planning out your responsive design. You can choose some elements over others to provide better user experience but everything boils down to flexibility.
Responsive Design is SEO Friendly
Are you concerned with your SEO? Look at me, of course you are. Well, I have great news for you. Responsive design is good for search engine optimization. “How do you mean?” A responsive website lives on one server with one URL. You don’t need extra URLs for your mobile sites. As such:
- Linking remains simple
- SEO campaigns all point to one location
- Redirects don’t take from the main site
- Updates are made in one place
- It’s easier to track a single URL
Say goodbye to mobile redirects, embrace responsive design and you will have an easy time with your SEO.
The @media Query
@media queries are not new, they have been around since CSS 2.1. @media queries allow style sheets to have some degree of device awareness offering you an extra level of flexibility. As such, you can build a fully responsive website that adapts to each screen width.
Navigation is Important
Seeing that your website will adapt to each screen width, it is important to ensure your navigation is set up correctly. You should be able to cater for users who click or tap – mobile users in general. The best way to go about it is to think about the smallest sizes first, and then work up to the largest sizes.
Take Advantage of Grids
Grids have been around for quite some time now. However, the fluid grid is a relatively new concept. A fluid grid utilizes percentages allowing your website to scale proportionately depending on the size of the screen.
Prioritize Crucial Content
Responsive design is all about getting your content to all (or more) visitors irrespective of the devices they are using. Your most important content must, therefore, come first on all devices. Design your site with content in mind.
The Size and Quality of Your Images Matter
High quality images is a must have for every web design project. At the same, you cannot use heavy images on your responsive design because: Mobile users have limited bandwidth, and heavy images increase page load time (which is bad for SEO and user experience). Optimize your responsive images for the web. Alternatively, you can limit (or hide) images in mobile version(s) of your website.
And Finally, Test
Before hitting the publish button, you should test your responsive site on various devices. You can also use online emulators such as Am I Responsive? among others. One way or another, test your site before launching. That’s why we have beta testing :).
Conclusion
Responsive design is the way of the future. Is your website responsive? Where do you stand in all this? Please share with us in the comments 🙂
