Responsive Web Design and "New School" Project Flow with Joe Watkins

Multiple devices showing a website

Joe Watkin is a Front End Web Developer who doubles as a bit of an Adobe Business Catalyst (BC) nut. Find him at joe-watkins.io

Sheesh.. here we go again with a major shift in web development..
Responsive Web Design!
Listen to this podcast:

Simply click the play button below to stream the podcast via your browser.

Alternatively, you can download the podcast in .mp3 format for offline listening.

As a web developer for almost 10 years I can recall a few times that I've been forced to learn something new because the industry shifted underneath me in the blink of an eye. I remember being a little nervous about having to learn new coding practices that would change my project flow.

Table based layouts to div based layouts is one that comes to mind. With the advent of CSS and major browsers stepping up and fully supporting newer coding practices you either had to master that art or go out of business.

Well folks, it's here again and this time it's called Responsive Web Design (RWD). I'd like to spend a little time talking about it and how it affects our project flow as developers.

There are countless articles out there diving very deep into Responsive Web Design but not as many regarding just how and the heck to fold it into our deeply rooted project flows.

What is Responsive Web Design?

RWD is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones). Wikipedia

RWD enables you to have one website that looks great at all screen sizes as opposed to having 2 separate websites offering different content to desktop and mobile users. With RWD you offer one set of content for both those users and users with all screen sizes in-between.

Statistics show Mobile web usage will exceed desktop usage by 2015 making RWD more than just a 'buzz word' in the industry.

What are CSS Media Queries?

CSS Media queries allow you to target CSS rules based on - for instance - screen size, device-orientation or display-density. With this power you can target these different devices and define unique CSS styles appropriate for those screen sizes.

Finally, the major modern web browsers have started fully supporting CSS3 media queries and this is really what enables us all as developers to dive in and take advantage of RWD.

Here is an example of a CSS3 media query:

    @media screen and (min-width: 480px) and (max-width: 700px) { … } 

What is a "breakpoint"

You can define some “basic” breakpoints to get started with your responsive design project but really your design should define these breakpoints. But when you are just getting started you'll find that these are some common breakpoints in pixels: 320,480,600,768,960+

It is also now becoming common to leverage ems instead of pixels.

Let your design define your breakpoints and try to become device-agnostic.

I want to create a Responsive Site,.. how do I do it?

The first place I'd start is getting very comfortable with CSS3 and media queries. Read as much as you can and visit as many sites as you can to immerse yourself in the technology. At the bottom of this post you will find several useful links for someone just starting out.

The second place you should get comfortable with is being able to write clean semantic HTML. This will not only make it easier to make a responsive site, it will help with accessibility and search engine ranking.

Lastly, your design team needs to be familiar with RWD. They need to know design patterns for all screen sizes. For instance, they need to know what to do with a main navigation on a mobile device. The secret here is to spend a lot of time researching other responsive sites. I will point to some required reading below.

Open your mind to a new workflow and get your client onboard as well.

After you have CSS3 and HTML wrestled down then you need to fold some new steps into your workflow. Many agencies are reporting great luck with altering their internal project process to support RWD projects. The key is leaning on more internal team collaboration and reaching out to newer techniques your team may have not ever tried before.

This can be scary and may feel like it could translate into a waste of time but in the end you will end up with a better product, a stronger team, and a super happy client! Nothing can bring a team closer together than rocking through what feels like a large task, and taking it by the horns to victory!

So what are the new steps, Joe?

Well, before we talk about the new steps let’s look briefly at the old.

Old School Project Flow

  1. Discovery Phase
  2. IA - Content, Site Map, sketches.
  3. Static Wireframes
  4. A Suite of high quality designs multiple iterations
  5. Development

New School Project Flow

This will vary and can be very organic and differ from project to project. No one way is the right way. The most important part is that the dev and design team collaborate earlier in the process and try to cut down on the number of high quality design comps that are generally created in the old school process. The buzz word "Designing in the Browser" is a reality as well and happens here in this suggested flow.

The dev team can be brought in as early as step 3 for consultation.

Steps 4,5,6 should overlap and are not separate steps/milestones.

  1. Discovery Phase
  2. IA - Content, Site Map, Sketches (from mobile to desktop)
  3. Rough Static Wireframes (from mobile to desktop)
  4. Static/Interactive Wireframes / Base HTML Wireframes
  5. A few high quality designs (no need to design every page at every break point - you can save time/money here by handing some of the decision-making over to the dev team when developing). Really, we are just folding in branding, typography, and designing site styles.
  6. Snazzier HTML Wireframes and Mood Boards/Styles take us to #7 (if you are building your prototypes on a solid framework you may have already been developing half your site's structure by #4 - now it's just time to spice it up)
  7. Development

Hybrid Workflow - Old/New School

If you are nervous about uprooting your internal process I suggest just getting your feet wet by combining the old school project flow with new school.

  1. Discovery Phase
  2. IA - Content, Site Map, Sketches
  3. Static Wireframes (Home Page, Inner Page at desktop and mobile sizes) Bring in dev team for consultation/review.
  4. A few design comps (Home Page, Inner Page at desktop and mobile sizes) Bring in dev team for consultation/review.
  5. Development - allow dev team to make sure site works for all screen sizes by making basic design related decisions while coding. The design defines the breakpoints.

By cutting down the total amount of design comps in step #4 you'll end up cutting down on design costs. It costs more and takes longer to design than it does to code.

The developer can make key decisions on how things look from breakpoint to breakpoint during the development phase.

Where does the client fit into this?

The client plays a larger role in all of all the early steps in both the New School Project Flow as well as the Hybrid.

It's been shown that bringing the client in on these steps makes them feel more part of the project, which is a good thing. Getting them on board with your new approach will make them more excited and helps with finalizing a project.

I've heard stories about high fives in html wireframe reviews with clients.

Required Reading:

A Book Apart: Responsive Web Design http://www.abookapart.com/products/responsive-web-design

Examples of responsive sites

Gallery: http://mediaqueri.es/

WWF: http://worldwildlife.org/

The Boston Globe: http://bostonglobe.com/

Dropmark: http://dropmark.com/

Ecom: http://store.saltsurf.com/

Portfolio: http://seesparkbox.com

Food: http://foodsense.is/

Microsoft: http://www.microsoft.com/

Tools & Links:

Google Chrome's Inspector - I like the inspector.

Editor of choice - I use Coda2 - with CodeKit (a local compiler) compiles Sass, minifies js, optimizes images.

Sass - an extension of CSS3 which allows for variables, mixins, nesting in CSS.

Apple's xCode which comes with the iphone/ipad emulator and can be used for testing / debugging.

Browserstack - great emulation of many browsers, IE, iOS, Android and more. I was able to get rid of my PC box after signing up. I still use a PC laptop for physical IE testing.

Viewport resizer very helpful for testing your site at different screen sizes.

Fitweird a cool tool for responsive dev - Dave Rupert

Zurb Foundation (html prototypes/wireframes)

Twitter Bootstrap (html prototypes/wireframes)

Wireframe.cc – great for quick in the browser wireframes

Google's suggestion regarding RWD

Smashing Magazine: massive amounts of information regarding web development/design & more!

http://responsive.is/ - great for testing and learning

CSS Tricks – great learning source

Shop Talk Show - a wonderful podcast for front end dev.

Come on by and say hi :)

Feel free to swing by my site for lots of free Business Catalyst screencast tutorials. joe-watkins.io


Trackbacks (0) | Permalink