Responsive Design: Streamlining Your Process

There are countless combinations of tools, frameworks, and processes to build a responsive website. While there may not be just one right or wrong way to begin, an outline is a great way to start your project. From the initial wireframes and concepts to the core markup and testing, this guide has you covered.

1. Wireframing


by Juan Arreguin

Never before have wireframes been so important. Responsive design presents new factors to consider since layouts are no longer static, but rather dynamic. Content areas need to expand, contract, and move depending on screen sizes. Wireframes provide a quick and easy way to build responsive flows and get a better understanding of your layout. Check out Mocking Bird, OmniGraffle, and Balsamiq. Remember to create wireframes for mobile, tablet, and desktops!

2. Concepts & Visual Design


Mozilla Developer Resources

While it may not be as useful as it was pre-CSS3, opening Photoshop and creating initial concepts and visual designs can be helpful. However, some would argue it’s not always necessary. Just remember, it doesn’t have to be pixel-perfect! Shadows, rounded corners, and gradients can all be created within CSS3 (and sometimes it’s easier to skip over to step three and begin designing right in the browser).

3. Grid Systems & Frameworks

grids
The 960 Grid System

Find a fluid, responsive grid system or framework you’re comfortable with. A good grid system or framework will save hours of your time. Some popular grid systems include the Golden Grid System, Less Framework, and Fluid Grid. If you prefer a looser approach, try a framework such as HTML5 Boilerplate or Twitter Bootstrap.

4. HTML5


HTML5 Boilerplate

Although it won’t make or break the responsiveness of your design, the newer HTML5 elements will improve accessibility and searchability of your markup. HTML5 is the first step to future-proofing your website, so don’t take it lightly!

5. CSS3 & SASS


SASS (Synthetically Awesome Stylesheets)

If you haven’t already, learn the ins and outs of CSS3 before you begin. Be sure to use rounded corners, drop shadows, and web fonts. It’ll save you time and help your website load faster. Media queries are the core of a responsive design, so learn how to use them. Create a shared stylesheet which contains core selectors, then add mobile-only, tablet-only and desktop-only stylesheets to compliment the core. Define fallbacks with Modernizr and Respond.js. If you’re willing to invest several hours to save many more, buy a copy of Compass and read tutorials on using SASS. It’ll lighten your load by automatically completing CSS3 vendor prefixes.

6. Markup

Start digging in and writing your markup. Always start with mobile first! (At the least, be sure the markup is optimized for mobile devices.) Responsive websites use fluid widths (percentages) instead of traditional, pixel-based sizing (px). Sometimes it’s easier to build the website with a static pixel width and then convert to percentages later (especially if it’s your first time). After you write markup for the mobile layout, build the tablet and desktop versions.

7. Images & SVG

SVG
W3C SVG Working Group

Bandwidth on mobile devices usually underperforms desktop speeds and is often capped. One advantage to splitting desktop and mobile user experiences is the ability to deliver separate image sizes. Hopefully in the future more options will become available, but right now Responsive Images and @media responsive images are some of the best choices for scaling rasterized images.

If your design includes illustrations or vector graphics, SVG is another option to consider. Similar to the concept of SVG, icon sets can be displayed in a vector format with fonts such as Pictos.

8. Troubleshooting

Troubleshooting
Stackoverflow—Programming Q&A

When beginning your responsive design, rethinking the formats of your content areas is the biggest challenge. You should constantly be considering ways to improve your layout’s format. Check out Media Queries for ideas and inspiration for your layout. As you’re writing the markup, unfamiliar challenges may arise. Certain sizes may have unwanted wrapping text (orphans) or overlapping DIVs and content areas. At this point, it’s all about fine-tuning your CSS to resolve these issues. Look at other responsive websites to see how their designers tackled similar problems. Ask for help on communities such as StackOverflow.

9. Optimization

Optimization
GTMetrix—Website speed analysis

Since you’re building one page that both mobile and desktop devices will share, optimizing the markup and Javascript for each type of device is important. Although it’s not always ideal, excluding Javascripts from mobile devices is sometimes necessary. As mentioned before, keeping the desktop stylesheet separate from the mobile styles is good practice. Use tools like GTMetrix to find ways to improve your HTML and CSS. Always compress your PNGs (GTMetrix can help with that too)!

10. Testing

Testing
Studiopress Responsive Design Test

Learn to let go. Very few will find the time or resources required to test their design on all of the countless mobile devices, let alone countless screen resolutions and pixel densities. Resize your browser’s viewport to find specific rendering problems. Use tools like Studiopress Tester to get a good idea of what your site looks like on mobile devices and tablets. Just remember, your site will never look the same in every browser, so make accessibility and readability a priority.

Hopefully this outline will help in your next responsive website! While it may feel a bit overwhelming at first, it gets easier with time. Eventually, you’ll want all of your designs to be responsive. Feel free to leave any questions in the comments below.

About Joshua Sortino

Issue - Mar-19-2012

Comments

  1. Ezequiel Bruni, April 3, 2012

    I’d like to add Tyler Tate’s excellent Semantic.gs to this list. It’s not so much a grid framework as it is a tool for creating your own custom grid frameworks. (LESS CSS)

  2. Zaid, April 15, 2012

    Adobe Shadow is an amazing app for testing. As long as your website is online somewhere, you just connect your computer to any mobile device (as long as it’s iOS or android), and any number of devices, and Adobe Shadow will show you exactly how the website will look on those devices, and you can navigate through the website as well. It’s really amazing for responsive design/development.

  3. stooni, June 7, 2012

    Thanks for these roundup, very short and strate!!!

    —stooni

  4. Janzell, July 2, 2012

    awesome list dude. thank you!

  5. Senaida, April 26, 2013

    Aw, this was an exceptionally good post. Taking a few minutes and actual
    effort to produce a great article… but what can I say… I procrastinate a lot and never manage to get nearly anything done.

  6. tattoo fails, July 22, 2013

    Hey there I am so delighted I found your website, I
    really found you by accident, while I was browsing
    on Digg for something else, Anyhow I am here now and
    would just like to say thanks for a fantastic post and a all round thrilling
    blog (I also love the theme/design), I don’t have time to browse it all at the minute but I have bookmarked it and also included your RSS feeds, so when I have time I will be back to read more, Please do keep up the excellent job.
    tattoo fails

  7. Klonopin, August 1, 2013

    Hey there! This is my 1st comment here so I just wanted to give
    a quick shout out and tell you I really enjoy reading through your
    articles. Can you suggest any other blogs/websites/forums that go over the same topics?
    Thanks for your time!

  8. Lillian, December 8, 2013

    Howdy! This post couldn’t be written any better!
    Looking at this article reminds me of my previous roommate!
    He always kept preaching about this. I most
    certainly will send this information to him. Fairly certain he
    will have a good read. Many thanks for sharing!

  9. mike qlplbo, December 16, 2013

    2013 scarpe hogan alternate donna, scarpe hogan insubordinate donna scarpe hogan donna aperture online hogan aperture provides the best 2013 scarpe hogan alternate donna, sconti scarpe hogan insubordinate donna e hogan insubordinate aerial top – su.Scarpe hoganwe would like to appearance you a description actuality but the armpit won t acquiesce us.Economici scarpe hogan, economici hogan alternate biancoregister now are you fresh actuality assurance up for your chump centre id and get quick and accessible admission to your shaw annual chump centre features:.Hogan: the official website – shoes, clothing, baghogan scarpe sito ufficiale presenta la nuova collezione autunno inverno 2012/2013 direttamente sul sito ufficiale oppure visita il negozio online una variet di.
    Scarpe hogan donna,offerta hogan,vendita scarpe hogani migliori scarpe hogan donna,acquista gamma completa di offerta hogan vendita scarpe hogan, spedizione gratuita a tutte le regioni e consegna.Hogan scarpe uomo 2013,hogan scarpe on-line italia,hogan donnahogan scarpe donna – hogan scarpe uomo, scarpe hogan donna nuovo stile, hogan scarpe donna 2013.Hogan donna scarpe nuovo arrivo 2013 h016, hogan scarpe rebelscarpe hogan aperture negozio online, hogan rebel, hogan scarpe vendita con l alta qualit e prezzo basso hogan aperture negozio on-line uno dei best agent di.Outlet hoganrongratana controlling abode is your affected home in bangkok back abroad from homes its affected architecture reflects the archetypal european appearance anniversary ample allowance is.Cheap scarpe hogan 2013 in hogan aperture sito ufficialedonna hogan scarpe e uomo hogan scarpe un marchio famoso in tutto il mondo le scarpe e portato avanti da molte persone, in particolare i giovani benvenuti hogan.
    From: http://www.outlet-hogan-scarpe.com
    Regards.

  10. java software outsourcing, March 20, 2014

    Heya i’m for the first time here. I found this board and I find It truly useful
    & it helped me out much. I hope to give something back and help others like you helped me.

  11. speed-working- reseautage, March 25, 2014

    I pay a visit every day some web pages and information sites to read posts, but this
    web site presents quality based posts.

  12. شركة عزل خزانات بالرياض, March 29, 2014

    Good day I am so excited I found your blog page, I really
    found you by mistake, while I was browsing on Askjeeve for
    something else, Regardless I am here now and would just like
    to ssay many thanks for a remarkable post and a all round entertaining blog (I also love the theme/design), I don’t have ime to browse it
    all at the minute but I have saved it annd also added in your RSS feeds, so when I have time I wkll
    be back to read a lot more, Please do keesp up the great work.

  13. gamezebo.com, April 14, 2014

    I usually do not leave a leave a response, however after reading through some of the responses here Responsive Design:
    Streamlining Your Process | Dolody. I do have 2 questions for you
    if it’s allright. Could it be simply me or do some of the
    comments come across like they are coming from brain dead
    people? :-P And, if you are posting at additional online sites, I’d like
    to follow you. Could you list of the complete urls of all your public pages like your
    Facebook page, twitter feed, or linkedin profile?

  14. glassware development, April 19, 2014

    I’ve learn some good stuff here. Certainly worth bookmarking for revisiting.
    I surprise how much effort you place to create the sort of
    wonderful informative web site.

  15. http://Farhanwelfare.org, April 25, 2014

    Appreciating the commitment you put into your site and detailed
    information you provide. It’s awesome to come across a
    blog every once in a while that isn’t the same old
    rehashed information. Fantastic read! I’ve saved your site and I’m including your RSS
    feeds to my Google account.

  16. prix d&un compagnon lancel, May 7, 2014

    123
    Hi, i think that i saw you visited my weblog thus i
    came to “return the favor”.I am attempting to find things to enhance my web site!I suppose its ok to use some of your ideas!\

  17. форекс личный кабинет, May 26, 2014

    Я думаю, что Вы не правы.
    Предлагаю это обсудить. Пишите мне в PM, пообщаемся.

  18. clumsy ninja cheats, May 26, 2014

    Hey there, You have done a fantastic job. I’ll definitely digg it and
    personally recommend to my friends. I’m confident they’ll be benefited
    from this site.

  19. Best Offers By Air France, June 2, 2014

    I will right away grasp your rss feed as I can not find your e-mail subscription hyperlink or newsletter service.
    Do you’ve any? Kindly permit me understand so that I may subscribe.

    Thanks.

  20. escorts York, June 18, 2014

    These are really great ideas in on the topic of blogging.
    You have touched some pleasant factors here. Any
    way keep up wrinting.

  21. 甜天使, June 20, 2014

    I always spent my half an hour to read this web site’s articles or reviews every
    day along with a mug of coffee.

  22. tinder pick up lines that work, July 2, 2014

    It has also been seen that some rogues even meet with the innocent people and kidnaps them for a large
    amount of ransom. Determine best treatment for noxious energy situations.
    The great features that you love can now be accessed from your phone.

  23. sprzęt fitness, July 30, 2014

    Great beat ! I would like to apprentice while you amend your website,
    how can i subscribe for a blog web site? The account aided
    me a acceptable deal. I had been tiny bit acquainted of
    this your broadcast offered bright clear concept

  24. sprzątanie i czyszczenie lublin czyszczenie dywanów lublin, August 6, 2014

    Awesome blog! Is your theme custom made or did you download it from somewhere?
    A theme like yours with a few simple adjustements would really make my blog jump out.
    Please let me know where you got your design. Thanks a lot

  25. car carpet cleaner Victoria BC, August 26, 2014

    When some one searches for his necessary thing, therefore he/she desires to be available that in detail, so that thing
    is maintained over here.

  26. www.meetup.com, October 16, 2014

    Hi there to every one, the contents present at this website are truly awesome
    for people knowledge, well, keep up the good work
    fellows.

  27. bene bac pet, October 21, 2014

    An interesting discussion is definitely worth comment.
    I believe that you should publish more about this issue, it may not be a taboo matter but usually
    people don’t speak about these subjects. To the next! Kind regards!!

  28. http://websupport.montana.com/, November 29, 2014

    Ponieważ każde wyświetlenie strony oraz podstron zwiększa obciążenie serwerów, mało tego, transfer plików jaki
    może być zrealizowany w ramach działalności serwisu jest zwykle ograniczony.

Leave A Comment:

Name:

Email:

Website: