Shared publicly  - 
 
Responsive design quick tips:

- Start mobile-first: start with the lowest screen size
- Keep in mind that there's plenty of devices less than 320px
- The absence of a media query is the first media query. - +Bryan Rieger
- Let the fluid grid do most of the work. You don't want to manage 100 layouts caused by 100 media queries, so let the fluidity of the web do its thang.
- Use min-width, not max-width for the most part (again part of the mobile-first strategy)
- Be mindful of media. Start with small images and swap them out for larger resolutions. Check out +Jason Grigsby 's fantastic in-depth look at techniques. http://www.cloudfour.com/responsive-imgs-part-2/
- Don't lean on the DOM too much. Performance is your #1 feature and manipulating things with JS too much can bog down your site's performance.
- Don't do 100 backflips to rearrange a bunch of shit. Make sure your design is smart enough to scale up without essentially designing multiple sites.
- Don't hide content for mobile. Mobile users want to access content just as much as desktop users.
- Keep hit areas big. Design for touch input methods, and keep in mind that desktop users can benefit from increased hit areas as well.

Just some stream-of-consciousness stuff off the top of my head. What are some other tips?
210
199
Brad Frost's profile photoHenry Zeitler's profile photoBjørn Elias Hesthamar's profile photoJason Gross's profile photo
29 comments
 
Check your window width before firing JS meant for big screens. (Filed under "Don't lean on the DOM too much")
 
Right +Chris Ruppel and keep in mind that screen width isn't the only thing that determines context. For example, an iPad CAN display higher resolution images and more advanced JS, but they might be on a train or on a couch.
 
Be mindful of a page's height and lengthy scrolling on mobile, eg. I've hidden post excerpts on a blog index page on mobile, etc. But yes, don't hide content in general (great points btw).
 
Thanks +Ian Conrad. Page height is an interesting beast especially when it comes to mobile. There's a misconception that the page can't be long and that "the fold" exists for mobile (it doesn't). The first thing mobile web users after viewing a page is scroll. That being said, you definitely don't want to have an infinitely long page and bury important info at the bottom, especially when considering users navigating using a D-pad or other non-touch input method. So like you said, use discretion when making content decisions.
 
+Brad Frost Exactly. Offering a responsive design to fit mobile lets you control the flow, and makes the page that much more engaging.
 
Even on a fairly tight budget you can make a site responsive (if you design for it of course) without too much extra effort. Even without optimizing for images size or load times or doing mobile-first. You're still offering a better experience than nothing at all, and not making it any slower, at least. Think of it as a bonus, a step forward even if not the whole step. I think, anyway. What do you think about that?
 
Fantastic tips - a checklist out of this would work great.

My two cents is that while the importance of click-distance is still disputed, there is no debate about it when it comes to mobile: shorter paths to everywhere with bigger buttons for everything.
 
+Ian Conrad the problem with "after-the-fact" responsive design is that it has far more potential to create a worse user experience than if the designers just left it alone. Taking a desktop-only experience and shoe-horning just to fit mobile screens can actually risk leaving sites unusable, clunky or just plain bad.

That's not to say it can't be done (http://simplebits.com/notebook/2011/08/19/adapted/) but I would recommend taking a THOROUGH look at the desktop site before committing to what could be a potential disaster.
 
Nice +Henry Zeitler thanks for sharing! Unfortunately the problem with video goes well beyond dimensions. The seemingly-infinite combination of formats and codecs required to properly play videos across the huge spectrum of mobile devices (and even tablets/desktop browsers) is enough to bring even the most persistent developers to their knees. Device-detection solutions like WURFL or DeviceAtlas become increasingly-necessary.

In addition, video interactions across platforms/form factors vary from platform to platform. It's important to know how mobile devices handle video (typically launching the media player full-screen instead of playing inline) compared to tablets (iPad plays video inline) and desktops.

An 'ideal' video flow could look like this:
Baseline: simple placeholder image linking to a video file (the link conditionally generated from a server-side solution)
HTML5 enhancement: Javascript replaces basic link with the HTML5 video tag (including multiple versions for OGG, WebM, MP4 etc. Sigh).
Flash "enhancement" if HTML5 is not supported.

We've got a long road to hoe.
 
Yes, you're right. So I'd have to score out responsive and underline fluid for the comment above. Thx ;-)
 
You can swap out background images for retina and other (eventual) high-pixel-density devices using:

media='only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)

Just be mindful of asset file sizes. Just because the device is capable of displaying high res content doesn't necessarily mean you should. Someone on EDGE wouldn't appreciate a much larger download when they're just trying to get some information.
 
+Brad Frost Yeah I've learned that one the hard way my first time ;) And yes that's definitely true, no argument there, sometimes it's a case-by-case thing, I've seen stuff that where I said "yes this could be made responsive and would be an improvement" and other where it doesn't make sense.
 
Yes and here you touch upon another problem. The capabilities of the device can only tell you so much about it's connectivity (eg. the theoretical maximum throughput).
 
What's the consensus (if there is one) on ordering media queries in your stylesheets? I've leaned towards small screen to big, but many folks seem to start big and work down.
 
What a great list of tips. Anyone who has taken the mobile-first approach to responsive design one time will realize that this method isn't just a best practice, it's going to make your life so much easier. I find the mobile-first approach to not only be better in the way that it forces good content driven decisions and limits feature creep in large scale versions of a site but in that it makes the workflow much smoother and quicker.

One thing that still bugs is the huge sect of people that are so focused on screen sizes, especially screen sizes of specific devices. RWD is not designed to make your web site look good on the iPhone you have right now. You can't make an argument about how many people are viewing your site at 320px or 480px right now because that holds no weight in the future. We have no idea how small or large devices or resolutions will be in the coming years.

Save yourself the time and design your media queries around your content. When you reach a resolution that is great enough to enhance the layout of your content then you place a new media query. It does not matter if this value relates to any particular device or not. If you focus your media query break points around the content that your site delivers the devices will all fall in line.
 
+Kyle Johnston +Thomas Mattheussen The reason for starting with the baseline experience:
- It's how CSS's cascade works: global-to-specific, shared-to-singular
- Scaling down a desktop site requires more overrides and more engineering
- Min width vs max-width media queries is interesting and you can , but I lean towards min-width to go along with the "scaling up" mentality
- Great article on media queries http://zomigi.com/blog/essential-considerations-for-crafting-quality-media-queries/
 
Let the content, not device specs, determine the breakpoints.
 
@Kyle Johnston - It depends. If it's an after-the-fact "mobilization" of a site, you don't have much of a choice.
 
If you're going to be using a media query for serving higher-resolution images to capable devices, then don't forget to add Opera browsers to your query, e.g.:@media screen and (-webkit-min-device-pixel-ratio:2), screen and (-o-min-device-pixel-ratio:3/2) {}
See: http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
Opera Mini / Mobile representation is much more extensive outside of the US and can be used on many high-PPI devices.
(I guess the same goes for Mozilla-based browsers)
 
Wouldn't it be easier to just do mobile first from phone (320px) to tablet? Then re-assess features that can be added for desktop, ie hover states etc. ..... also on another note I think someone with the correct tool set can evaluate a desktop only experience and translate it well after the fact, abliet some consistencies that you would get with mobile first.
 
Great checklist. Thanks. I have been searching for answers to a lot of this information for weeks. Particularly looking for consensus on what sizes to target - Today I found a new tutorial and I am thinking of starting over with it. It is in German and I cannot understand it but it does start mobile-first: http://www.zelfstudie.be/cursussen/tutorial.php?id=129 I kept trying to get the background art from the ListApart Responsive Contest but I could not. I don't know what devices I am targeting with what sizes. Is there are graph that defines that? It would be nice to test with the device in my hand but I do not have that option. We need a method to put ourselves in the driver's seat and see our work from the user's perspective. - Cheers
 
+Craig Webb You're better off creating breakpoints according to where your content breaks not where devices dictate breakpoints...as Matt Menzer said above. Essentially, determining breakpoints based on devices or widths is similar to using JavaScript browser detection instead of feature detection. Don't do it.
 
I come at this topic from a different angle. As a designer for a sizeable ecommerce platform, we have already taken the decision to go responsive for mobile, despite our current content being unsuitable for mobile. Why? Because our studies show that users are still willing to accept something that's not perfect. By using a responsive solution to effectively squeeze our platform down in to a 320 x 240 window is not perfect by any means, but it's a vast improvement over the fixed-width desktop layout we've had for 2 years that was, quite frankly, a horror to use on phones.

In the background we're working on a proper mobile solution that will ultimately replace our current responsive design without presenting too different a UI. A smoother transition for our customers, and less pressure to produce mobile content in a hurry or without proper due diligence.

It's all horses for courses. If you have the means to start over with a "mobile first" approach, then I say do it. If you don't, I personally don't think there's anything wrong with an interim solution - just so long as it works.
 
Thank you Bart for your comment. I sort of agree. I need to know the basic sizes of the devices that are most desirable to target, and I do not. I have not found a clear statement of that information yet. I'd like to know the width of the device window, and if different, the accompanying proper width of the browser window. After I design to those specifications, then I will sub-design to the content as you say, to correct widows for instance. I feel like a dolt for not knowing the correct widths, but not for lack of trying. Over the last few weeks I have changed my query widths twice and I am preparing to change them again.

With no other way to figure this out, I have begun a survey of websites, Grids and Frameworks, to see what others are using and doing.


These are some of the tools that I am studying. I find that each is different. There must be more than one way to skin this cat:
webdesignerwall Responsive Demo Media Queries http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

Goldilocks" Grid: FROM: http://goldilocksapproach.com/

http://artequalswork.com/uploads/responsive-templates.jpg

Skeleton Responsive Boilerplate http://getskeleton.com/#mediaQueries

Constellation Responsive WordPress Theme http://constellationtheme.com/

http://premium.wpmudev.org/project/simplemarket http://wp-ecommerce.org/store1/

http://fluidbaselinegrid.com/

I'm planning to research more tonight and then change my query line-up based on the results of my studies.

I also may change my grid. I'm not using the grid directly, I'm using it as a reference as I do my math.
Add a comment...