diff options
Diffstat (limited to 'pitfallsofrwd.txt')
| -rw-r--r-- | pitfallsofrwd.txt | 37 |
1 files changed, 37 insertions, 0 deletions
diff --git a/pitfallsofrwd.txt b/pitfallsofrwd.txt new file mode 100644 index 0000000..38bb097 --- /dev/null +++ b/pitfallsofrwd.txt @@ -0,0 +1,37 @@ +There's a lot more to responsive design than fluid layouts and some @media queries. In fact responsive design means a whole new way of approaching web design. With that in mind, here are some common pitfalls to watch out for in your next responsive design. + +## Device Dimensions + +Don't get hung up on the most common screen sizes of today. They'll change tomorrow. And again the day after that. To create a more <a href="http://futurefriendlyweb.com/">future-friendly</a> site, don't focus on the breakpoints where your design changes, but on what's happening between those breakpoints. + +If you take a <a href="https://longhandpixels.net/blog/2014/04/why-mobile-first-responsive-design">mobile-first approach</a>, you can start <a href="http://www.slideshare.net/stephenhay/responsive-design-workflow">building</a> your interface for the smallest screen you're going to support. Then just enlarge your browser window until your design falls apart. Insert a breakpoint there and fix things in a @media query. Rinse and repeat. + +Make sure you're delivering a great user experience on the screen sizes <em>between</em> today's most popular devices and you'll be sure to delight tomorrow's users as well. + +## Speed + +Responsive design is about creating an excellent experience for mobile users. If your site isn't fast it doesn't matter how great your content fits a small screen or how well your images scale because no one is going to stick around to see that. + +Make your site fast above all else. Create a performance budget and stick to it. Use Webpagetest.org to make sure your site is fast even over 3G. Pay special attention to the "Speed Index" which tells you how long it takes before your users see content on the page. + +## Images + +Nothing will speed up your mobile site like reducing the size of images. The new HTML <a href="https://longhandpixels.net/blog/2014/02/complete-guide-picture-element">Picture element</a> will be supported by several browsers later this year and in the mean time there's a polyfill available in the form of <a href="https://github.com/scottjehl/picturefill">PictureFill</a>. + +I suggest you go with PictureFill so you can transition to just the <code><picture></code> element down the road when it's more widely supported, but there are other, older options as well, such as Adaptive Images. + +Some kind of responsive images solution is a must. + +## Don't Hide Content + +It's hard to get everything the user wants on small screens. It might be tempting to hide some functionality on mobile devices -- don't! Mobile users visiting your site expect to be able to do everything they need to do. Don't penalize them just because they're using a device with a small screen. + +This is part of what makes responsive design difficult -- getting everything the user needs on such a small screen is a challenge. Don't just punt and start hiding things, check out established UI patterns for some inspiration and do plenty of testing to see how users are interacting with your site. + +It might take a bit more work, but giving your users what they're looking for turns users into happy customers. + +## Don't reinvent the wheel + +Responsive design is hard enough, don't make it harder by reinventing the wheel. Start from a solid base. Grab a responsive template from <a target="_blank" href="http://www.templatemonster.com/wordpress-themes.php">here</a> and be sure to read up on best practices and helpful <a href="https://bradfrost.github.io/this-is-responsive/patterns.html">pattern libraries</a>. + + |