design

How to design your first responsive website

I’ve been designing and coding since I was in 7th grade, but (I love that) there is no end to the number of things I have yet to learn how to do. This year, one of my goals was to learn how to do responsive webdesign.

responsive webdesign

A web design approach aimed at crafting sites that adapt the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries.

In my endeavor to teach it to myself, I read articles, watched videos, and attended Meetups that talked about what responsive design was, when to use it, how to best approach it, and more. But when it came time to start, I remained confused about what to do, in what order.

So I thought it’d be helpful to share the (rough) process I used for implementing my very first responsive design, from design through development.

Responsive Design | Desktop, tablet, mobile versions


1. Create your sitemap.

First, take a catalogue of how many major page templates you need to create.

Site Map

For this site, I counted 6.5:

  • (1) home (blog)
  • (2) blog entry – 2 types of blog posts: gallery and text
  • (0.5) page for travel photography – this is half a template, because I decided this would take on the same template as my homepage (blog), but with its own sub-navigation menu
  • (1) page for projects I’m working on
  • (1) page for a biography
  • (1) page for contact information

2. Wireframe your major page templates for the three major viewports: desktop, tablet, mobile.

Wireframes Needed

You can start anywhere in this chart. I drew the wireframes of all my templates for the desktop first, then took each page template and did both the tablet and mobile wireframes for it at once, then moving onto another page.

Note: You don’t need to have these three exact viewports—you can choose breakpoints that make sense for your layout. Put in a breakpoint when things start to break. If your layout breaks only once, you may only need or want one breakpoint. I chose these three because I knew they would be where my layout would likely require major reconfiguration (in particular, of the menu).


3. Design.

At this point, you can choose to take one of three approaches:

  1. a. Design all templates for all viewports first in Photoshop, then code (with iteration as necessary)
  2. b. Code all viewports first, then design in Photoshop
  3. c. Code and design at the same time

I went with (c), designing right in the browser as opposed to in Photoshop, since I knew generally the aesthetic I wanted (although, full disclosure: I had spent 2 weeks on an entire design in Photoshop that I scrapped in favor of this one upon realizing the photo I wanted to use in the background was not high res enough).

This option (code and design at the same time) works well if your layout generally follows a grid system and/or has little in the way of illustrations (unlike this site). With wireframes in hand, you can start coding in the browser, prototyping the responsive layout changes, putting in breakpoints where your layout breaks, and then designing the assets you need as you go to plug into your code. This approach has the benefit of ensuring you design only what you will definitely be using.

Option A (Design first, code after) – Alternatively, you can design your various viewports in Photoshop first and then port it to code. This is the typical process for non-responsive sites.

Option B (Code first, design after) – This approach is meant to ensure that the responsive functionality you are envisioning for your site is possible and advisable—useful for more elaborate sites with a complex information architecture, e.g. The Boston Globe, e-commerce sites, etc.

The Boston Globe


4. Code your styles first—outside of any breakpoints.

Style the components that will remain the same across viewports (font styles, buttons, dividers, etc.)

TIP: Use relative sizes (rems or ems) instead of pixels (px) so you can easily resize your fonts in proportion to the viewing distance typical for the screen size of the viewing environment (note that this is not in proportion to the screen size, as what’s important is how far away someone is when reading your content).

My default stylesheet--style.css


5. Decide on your major breakpoints and create separate stylesheets for all of them.

For me, separate stylesheets were easier to manage, especially as each breakpoint held the styles for multiple pages. My major breakpoints consisted of: desktop size, tablet size, mobile size. (Or rather I should say they corresponded very roughly to these 3 viewport sizes; I put in breakpoints where it made sense for my layout.)

/* DESKTOP */
@media only screen and (min-width : 900px) {}

/* TABLET */
@media only screen and (max-width: 899px) and (min-width: 600px) {}

/* MOBILE */
@media only screen and (max-width: 599px) {}

Here are two other sets of common breakpoints: here and here.


6. Code for one viewport first.

I started all of my coding with desktop first because it was easier to wrap my head around shrinking my layout elements as opposed to expanding them, although there is an audience and type of site for which it’s advisable to design for mobile first (a blog is not usually one of those types of sites).

TIP: For all pages that use the same template (same menu, same layout), code all pages in the same HTML file. This allows you to see how your layout breaks across all pages when it comes time for you to put in additional breakpoints.

My desktop viewport:

Home: Blog

Gallery Post

About: Bio

Work

Travel

Contact: Get in Touch


7. Then code for your other major viewports.

What I did was I copied and pasted my entire CSS styles from my desktop stylesheet to my tablet stylesheet, then made the necessary adjustments to it. This has the drawback of duplicating a lot of code—but I decided that I was willing to make the bandwidth trade-off for the sake of ease of coding (my first responsive site, after all). I then copied the styles from my tablet stylesheet over to my mobile stylesheet, and made the necessary adjustments there.


8. Put in minor breakpoints wherever the layout breaks when you resize the browser window.

After you’ve coded your major breakpoints, put in minor breakpoints. Don’t forget to resize vertically and horizontally. I put these minor breakpoints in separate CSS stylesheets:

  1. 1. style.css
    All styles that are outside of breakpoints.
  2. 2. style_desktop.css
    @media only screen and (min-width : 900px) { }
  3. 3. style_desktop_mini.css
    This contained breakpoints that “fixed” things that would break for browser widths that were greater than 900px.
  4. 4. style_tablet.css:
    @media only screen and (max-width: 899px) and (min-width: 600px) {}
  5. 5. style_tablet_mini.css
    This contained breakpoints that would fix things that had browser widths between 900px and 600px (including all vertical breakpoints that fell into this range as well).
  6. 6. style_mobile.css
    @media only screen and (max-width: 599px)
  7. 7. style_mobile_mini.css
    This contained breakpoints that would fix things for browsers that had a width below 600px.

Note that it matters the order in which you call your stylesheets in your HTML file. I called mine from the largest media query down to the smallest—because I was resizing my browser from desktop to mobile and putting in fixes whenever the browser would get smaller than a certain width (max-width: Xpx). My queries would not have min-width restrictions, so I needed to make sure they would be processed BEFORE any queries that had a smaller X.

For example, the browser needed to process max-width:800px before max-width:600px, so that when my browser was 500px, it would take on the CSS for max-width:600px and not max-width:800px.

Some of my minor breakpoint fixes—


Menu:

Menu: Full desktop view
Menu: Full Desktop View

Menu: For desktops with shorter heights
Menu: Desktop - Short height

Menu: Tablet (Portrait)
Menu: Tablet (Portrait)

Menu: Tablet (Landscape)
Menu: Tablet (Landscape)

Menu: Mobile (Portrait)
Menu: Mobile - Hamburger (Long screens)

Menu: Mobile (Landscape)
Menu: Mobile - Short screens (Landscape Mode)


About Me:

Desktop: About Me

Mobile: About Me


Travel:

Desktop: Travel

Mobile: Travel


I hope that was helpful! Let me know if you think there’s anything I can add to make it more so.

Enjoyed this post? Follow me on Twitter.

COMMENTS