The last two years have been very exciting in the front-end and web design world because of the use of Responsive Web Design (RWD), which is a term coined by Ethan Marcotte in 2010.
Responsive web design refers to a website layout that can morph and adapt to the viewport of the user’s browser, and though this technique is very interesting, it is not new. Similar methods have been around for a long time. For example, elastic, fluid or hybrid layouts are techniques created to adapt to the viewport of the browser. Also, a collection of similar techniques to responsible web design can be found at Clagnut dated in February, 2006.
As great as RWD may look it also adds extra work for web designers and developers in order to deliver a website that works perfectly through multiple devices. Though more work for developers, it is becoming more and more essential because it is predicted that mobiles users accessing the web will grow to 1 billion by next year 1.
In addition, a report from Nielsen demonstrates that more than 50% of the mobile subscribers in the United States are using smartphones, which shows the need to have a website that is accessible in this platform as well 2. Moreover, tablets PC’s sales are increasing drastically and they are being used to access the web also. For example, Apple sold 15.4 million tablet PC’s in the fourth quarter of 2011 only, while smaller companies (RIM and Motorola) sold an additional two million tablets 3. This is without counting key players like Amazon, Microsoft, and Google that are creating new tablets at this time. This tells us that a way to target mobile devices is necessary in order to achieve the goal of our clients.
I believe you should research your target audience when it comes to offering the best user experience possible to anyone that visits your website. You could say that the majority of the visitors of a specific website are not using smartphones or tablets. However, in the near future they will be visiting it with the mobile devices. Even grandparents and children are getting tablet PC’s and smartphones for Christmas and as I stated before, the number of people using them is just increasing.
More reasons to add Responsive Web Design
- You are paid as an expert to create the website; you should look for the best for your clients.
- When the table-less technique arrived, you jumped to the bandwagon because you knew it was the recommended way. Why not now?
- The objective of a website is to communicate to the masses what products the company offers. If the website is going to cover a percentage of the potential customers, then it is pointless or at least not very helpful.
- A few extra hours are not going to make you rich. However, those hours invested in responsive designs are going to bring you more clients.
- You don’t need to reinvent the wheel every time you create a website. There are several frameworks that will speed up your development.
What developers and designers should do?
In my opinion, developers and designers need to integrate Responsive Web Design in the daily basics work flow. It is going to take some time to get used to but it is worth it for you and your customers. You will be offering a full product while other developers are still thinking that there is an independent web dedicated to mobile devices. Remember that your clients should not care what their visitors are using, you are responsible for creating the website and your name will be mentioned every time a visitor has a good or bad experience with the site.
Where should you start?
Architect Your RWD Workflow
Mobile users are going to surpass desktop users in the future; it is a good idea to design for mobile devices in mind. It is necessary to use the mobile first technique because you are going to show in mobile devices only the content that is relevant and this will help you to decide what the most important elements of the website are. Also, I understand that a freelancer cannot spend most of his/her time working on designing the same website for multiple resolutions because it takes too long. However, I believe that designing for the highest and smaller resolutions gives you enough information to build your site in other resolutions.
Choose a CSS Framework
There are multiple responsive frameworks that are worth studying and choose one or two that adapt to your work and your needs. Some of the frameworks that you should try are: Bootstrap, Foundation, Less Framework, Amazium, Golden Grid System, BlueCSS, inuitcss, 320 and Up, and The Goldilocks Approach. I personally like Bootstrap because it provides a collection of jQuery plugins for the most common UI patterns.
Reuse your Code
The more websites you create, the more code you should reuse. At least this is the ideal way to create websites. You should have a repository in order to speed up your design and development time and also to avoid common mistakes trying to reinvent the wheel. Remember that you need to keep everything as DRY as possible.
Show it to your Clients
Your client may want to know why the project will take a little bit longer with you than with another freelance. You need to explain the benefits of having a responsive website and how they will save tons of money in the long run avoiding supporting two different websites for the same content if they create a mobile website or even worst if they ignore the mobile market completely. Even if your price is a little bit higher than your competition, your clients will be happy because they will not pay twice for the same website, and their viewers will appreciate it as well.
Build with Design Patterns
In order to work faster in the process of designing websites you should look for common design patterns and how other people have solved the problems you are facing. For example, Media Queries is a very good source to learn the approaches taken by other designers and developers with RWD. Also, Josh Johnson wrote an excellent article of some the useful design patterns for responsive web design.
When I said to be responsible, what I meant is that is your responsibility to provide the best for your clients, thus RWD must be offered by default in your packets. From the simplest website design to the most complex ecommerce application, these websites should be designed with RWD in mind. Even if your excuse is that the website is too simple, then you know that it is easier to implement RWD.
- The Responsive Designer’s Workflow by Luke Wroblewski
- Responsive Workflow by Viljami Salminen
- Multi-Device Layout Patterns by Luke Wroblewski
1 Wroblewski, Luke. 2011. Mobile First. New York, New York: Jeffrey Zeldman.
2 Lunden, Ingrid. 2012. Nielsen: Smartphones Used By 50.4% Of U.S.
3 Consumers, Android 48.5% of Them.
4 Zeman, Eric. 2012. Smartphone, Tablet Races: 4 Telling Numbers.