.. Your Daily Design Dosis

Responsive Web Design is Your Responsibility

| 11 Comments

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.

Responsive Web Design

More reasons to add Responsive Web Design

  1. You are paid as an expert to create the website; you should look for the best for your clients.
  2. When the table-less technique arrived, you jumped to the bandwagon because you knew it was the recommended way. Why not now?
  3. 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.
  4. 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.
  5. 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

Mark Boulton has posted a very good article on RWD workflow that combined with the article written by Tyler Herman, will help you to create your own workflow and design responsive websites faster.

Mobile First

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.

Conclusion

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.

Further Readings
Footnotes:

1 Wroblewski, Luke. 2011. Mobile First. New York, New York: Jeffrey Zeldman.
Lunden, Ingrid. 2012. Nielsen: Smartphones Used By 50.4% Of U.S.
Consumers, Android 48.5% of Them.
Zeman, Eric. 2012. Smartphone, Tablet Races: 4 Telling Numbers.

 

Author: Teylor Feliz

Teylor Feliz is a well-known XHTML/CSS/JavaScript enthusiast from Santo Domingo, Dominican Republic. He has more than 10 years experience in the computer programming, graphic design, and web development world, including 2 years teaching computer science. Teylor also likes preparing tutorials and articles for Admix Web, a Web Development and Design blog.

11 comments

on this article: “Responsive Web Design is Your Responsibility”
  1. Little long but really very helpful thing you have shared here which helped me so much.

    • Hi WP Dev,

      Thanks for your comment. But in all honesty, it’s very hard to write a comprehensive article about RWD in just 2 paragraphs. I must say the writer did a superb job at it ;-P

      Enjoy your day, cheers and ciao!

  2. With clients you already do some extra hours, because the always wish to change something or add something, so adding for “free” a RWD is not the best options.

    Going from table to divs is not the same as going from desktop devices to mobile devices, each devices have a different DPI level, that images should be re-sized optimized for.

    Yes we have already some good frameworks, but you have to learn them well to use them wisely.

    Make for FREE a RWD is not as easy as is sounds: you already do free things for clients, each devices have different DPI, and you have to optimize all images as well, and this is not a few hours, is like making 3 websites not one. Working to much for free will eat you free time.

    About portfolio and new clients I better show 2-3 really high quality site than 10-20 websites that are average.

    To my clients I offer a mobile site for some money with a discounted price if they want a hole new website, and think is fair and win-win situation.

    • Hi Izdelava,

      first of all my exuses for a very late reply! But had some malware attacks here on the gonzoblog and loads of deadlines for clients’work ..

      But, altho I think RWD should be some kind of standard for websites, I do agree with you that the extra price for making websites responsive can sometimes be too much for customers. It is veeeeery labour-intensive to make a site responsive and there are other things (as you mentioned) you have to think of.

      What I’m doing is selling a site that is responsive, and if the client thinks the price is too much I offer a static website instead and mention all the things a client will miss .. 8 out of 10 comes back to me within 3 days with the request to make the site responsive .. with the higher price! That’s how I do it, also after letting the client see what the ‘results’ are of a responsive site vs. static site in Google analytics! You can’t say no anymore ..

      Thanks for your comment, have a great Sunday! Cheers and Ciao!

  3. Amazing. Thank you for sharing all this knowledge in just one post.

    • Hi Davi,

      .. must admit, a brilliant and complete writeup from Teylor Feliz about responsive web design! All credits go to Teylor for writing this article.

      Enjoy your weekend, Cheers & Ciao Amigo!

top