This past week I talked with a design agency who was about to embark upon their first responsive web design project. It sounded rather app-like. They were interested in hearing about my experiences, what to expect, what the process is like or could be like, what the deliverables should be, things to watch out for, and things like that.
This is what we talked about:
- The “mobile first” philosophy is a great fit particularly for web apps getting a fresh start. Designing first for a small screen means making the tough decisions about what is most important and what can be cut.
- As you scale up in screen width from there, consider loading in any additional content you need dynamically. That means small screens (often mobile devices with slower internet connections) aren’t downloading things they don’t need, which keeps things fast. Here’s a technique to do that while maintaining the media queries in CSS. Demo.
- Media is an important consideration. Make sure your images/audio/video scale well and that you aren’t serving (for instance) desktop size images to mobile size devices. This is particularly challenging. There are a couple of responsive images solutions out there now to pick from. Video is harder, but you can at least make it fluid.
- Don’t forget about the X-axis (left and right) while designing. I think navigation that slides in from the side no matter where you are on the site is a pretty nice technique (ala Facebook iPhone app). Here are other responsive navigation patterns you can look at. Mobile design isn’t just squishing things to fit in one long vertical column.
- Your workflow will probably be more iterative than it has been in the past. Do mockups, code them and get them in the browser, find points of particular struggle, then get everyone back at the table and work them out. Repeat.
- Responsive design isn’t always the answer. Sometimes a dedicated mobile site or app is. Although when starting a project fresh, it often is. Plus, Google likes it and working with a single code base is nice.
- Don’t think in terms of exact screen sizes. Perhaps mockup a smallish, mediumish, and largish design and work from that. “Breakpoints” (where the design shifts around via media queries, beyond what the fluid grid is doing) should be “shrink it till it breaks, put breakpoint there, shrink it till it breaks, put breakpoint there, repeat”. And don’t forget about vertical media queries.
- The “deliverables” to the client should definitely be a fully interactive HTML/CSS/JS website, even if they will be doing the actual implementation of it themselves. There is too much interactivity and too many possible screen sizes to make flat design comps workable.
- Gallery of lots of responsive sites: http://mediaqueri.es/
- Use as much “real” of data/copy/media as you can. Even if you fake it. If you do fake it, use real looking stuff, not cats.
- Testing on real devices is a good idea. Adobe Shadow can help make that easier.
- BrowserStack has a bunch of virtual devices you can test on.
- Remember to think about interactions. Desktop has keyboard and mouse, mobile has touch and gestures. If you were, for instance, designing an interaction with drag-and-drop, that needs very different implementations depending on the environment.
- Hover is totally out.
- Sometimes the “source order” in the HTML makes shuffling things around a pain. Here’s a clever little ditty for moving things around. And the future, if you are interested.
- If you haven’t read them, the classic reads are this article and this book.
Great write-up! For someone new to responsive web design this has some great links! I’d also like to suggest this site for testing responsive pages. Sure, it isn’t native, but it’s a good starting point to see how your website looks with different widths.
Awesome write-up. I really like these “notes” style blog posts you’ve been doing recently. The “don’t think in terms of exact screen sizes” really resonated with me. I sometimes obsess over responsive designs when I think just having 3’ish general designs seems to take care of most projects.
why not kitties?
I love placekitten
Yeah I’ve long viewed Chris as a thought leader in the industry. Anytime I’m googling something, and come across one of his articles, it’s the only one I need to click on.
Until, that is, he said no placekitten.
Wut? Who are you? What have you done with Chris?
I have a problem with iframe api-s like google calendar or eventbrites ticket buying app: they are not developed to be responsive at all, and if you put them in a % width, when the screen size is under a certain point, it’ll brakes the app. For example, eventbrites api under 400 pixel cuts down the right side of the app, so you can’t buy the tickets. Or google calendar under 300 pixel starts to growing vertically constantly. gCal can be fixed if you stretch it in y-axis, but that looks terrible. Someone have a solution for frames like that? Videos are done with a certain hacky css solution, so i hope there is, or will be one for iframes too. Or am i doing something wrong?
Have you tried fitvids.js? It works very well with videos in iFrames, I wonder if it works with all kinda iframes…
P.S. I haven’t actually tried it, but it looks like it works well (and it’s free, and Chris built it ;))
For example, your Facebook recommend iframe api is broken too, when it opens up the sharing window, it cuts down it, and you can’t share it width your comment on it, just recommend. I love respo design, and mobile first ideology too, but stuck with iframe apis…
Thanks for the write up I was just starting to take up responsive sites and this definitely helps.
Nice writeup. I am looking forward to the day when we no longer say responsive design and just say web design again. I guess it will be a couple of years until this happens.
Also, loving animated media queries, not much use but gives a nice little touch when swapping from landscape to portrait on a tablet etc
And, I ignored mobile first for my past two projects and it came to a point in the build when I wished I had used this approach. I definitely find it easier to work up as opposed to working back. Next project…mobile first!
Images are the thorn in our side, especially now with retina.
http://www.responsinator.com/ is a nice site for a quick test of responsive sites.
In reply to DBUK, the responsinator.com does not work at all for me. All it seems to do is set the screen size of an iphone and provide scroll bars, it doesnt move my fluid design around which is exactly what happens on my real iphone where my site works well, so in short this emulator doesnt work well at all.
Good advices/references. Thanks for sharing.
We really need to stop thinking about mobile sites/apps and responsive design as either or that can’t go together, that really isn’t the relationship. A mobile site or app should be seen as something that can COMPLEMENT responsive design.
Sometimes a mobile app or site is definitely needed, but why wouldn’t the website still be responsive? Why shouldn’t any new website not be responsive to some extent?
I completely agree, web agencies change their stylesheets from a static, fixed width to a fluid one and call it a responsive webdesign now. Yes, it will look better on a cramped design, but I think more often than not, it’s better to make a complete seperate, complementing mobile version of a website / webapp.
thanks for the placekitten link – love it :D
I think getting rid of the hover is only half a solution.
I have yet to see a responsive design with hover still applied on desktop and switching to click on mobile (or under a certain screen size).
Is there a simple way to do that?
I’ve done that a fair bit, and most of the time it’s pretty simple. Here’s an example: http://madeinla2012.org. The calendar is hover on non touch screens and then modernizr checks for touch and uses that instead when available.
Hover isn’t going anywhere. In SOME instances you might have to change something, like for a navigation that only shows when being hovered, now you really need to put something there to help the user understand that if they click it, the hover will show, make it obvious or put a nav icon there, or just have the word “navigation.” Using jQuery it’s pretty simple:
http://stackoverflow.com/questions/2432003/combine-hover-and-click-functions-jquery
That being said, I try and avoid essential functionality activated by hover as much as possible because it’s a bad UX habit that we have made users used to.
Cool! Thanks for the examples.
Just getting design firms/clients to think about mobile during project inception would be a big plus, or at least include developers during the input stage. I’m currently trying to convert a fixed with site into a responsive layout after the fact. Would have been nice to start with percentages from the get-go. Now there’s just a lot of styling to overwrite. The downside to bringing me into the project late. if I had time to go back and start over I would. :-(
Interesting angle to go mobile first, must keep that in mind for the next project. Responsive layout sounds like the way to go these days, great resource!
Good article, however I truly believe that RWD on the front-end is just a part of an overall architectural approach that extends from each ends of the stack… It can’t be just about UX.
More detailed thoughts at
http://barkgolgafrincham.wordpress.com/2012/05/09/responsive-web-design-a-time-and-place-for-everything/
Glad you included the “hover is totally out” point there.
I’ve been banging my head against a brick wall of late trying to convince developers (most of whom have smartphones, I might add) that hover doesn’t work in this context!
@ParadoxDesign I’m working on such a layout at the moment – using :hover classes over 1024, and fixed background colours below that. It’s really not difficult, I just think people aren’t too bothered about the :hover issue yet because they assume a hover will become a click.
Rapid prototyping (or in-browser design, as it seems to be called these days) is definitely the way forward for responsive designs. As you quite rightly point out, get the navigation and content hierarchy sorted first (sans CSS), understand how the markup order will affect the general ‘weight’ of the content (or the required interactions) then design around what works best.
It can be hard to train yourself to stop designing from the desktop down – especially if you’ve been in the business as long as I have – but a little pain to start can work wonders and will go a long way to helping developers better understand the importance of content and functional minimalism. I’ve generally found it’s far easier to add to a design than to subtract from it.
I would argue that a fluid design is a good half-way house if an organisation doesn’t have the finances to go for a fully fledged mobile app straight away. In these difficult economic times it’s easy to see why responsive is becoming the popular solution for companies who are only just starting to think about mobile.
Thoughts on twitter bootstrap?
Why do things keep changing ARGH!!!? We keep chipping away at the block, one day we’ll whittle it down to a fine powder. To concur with what’s been said about hover being out, I have to agree that it does behave badly on mobile.
Can’t we all just agree to keep all the load bearing and resource intensive stuff a secret, sort of like a pact, but hidden away from clients and like save us all a load of work?
Cheers
For a complex website is quite difficult to browse it from mobile since it has responsive design. A mobile version is different from a responsive design version and as I said, some websites does really not need responsive web design.
this was a juicy one! its funny because I just finished making my website responsive. now I am going to have a second look. :)