Creating a Mobile-First Responsive Web Design Introduction We're going to walk through how to create an adaptive web experience that's designed mobile-first. This article and demo will go over the following: There is even more up to date responsive guidance on our new Web Fundamentals site. Why we need to create mobile-first, responsive, adaptive experiences How to structure HTML for an adaptive site in order to optimize performance and prioritize flexibility How to write CSS that defines shared styles first, builds up styles for larger screens with media queries, and uses relative units How to write unobtrusive Javascript to conditionally load in content fragments, take advantage of touch events and geolocation What we could do to further enhance our adaptive experience The Need for Adaptivity As the web landscape becomes increasingly complex, it's becoming extremely important to deliver solid web experiences to a growing number of contexts. However, mobile context is much more than just screen size. View the demo Structure Style Less JS
Responsive Navigation: Optimizing for Touch Across Devices As more diverse devices embrace touch as a primary input method, it may be time to revisit navigation standards on the Web. How can a navigation menu be designed to work across a wide range of touch screen sizes? In these demos, Jason Weaver and I decided to find out. The Demos Why do these navigation menus work across a wide range of touch screen sizes? Across Screen Sizes First, why do we care about touch across a wide range of screen sizes? Tablets are no different. And the very notion of what defines a tablet is being challenged by laptop/tablet convertibles and touch-enabled Ultrabooks. Even beyond 13 inches, touch and gesture interfaces are possible. Accounting For Touch So what does it mean to consider touch across all screen sizes? Touch target sizes are relatively easy: just make things big enough to prevent accidental taps and errors. Designing towards touch really forces us to simplify and decide what's most important- what needs to stay on the screen. An Adaptive Solution
A Three Step Guide to Usability on the Mobile Web Designing mobile sites is a different kind of web design. Much like your first experience of designing for the desktop web, it can be both exhilarating and daunting in equal measures. So many possibilities, yet so many usability restrictions. Don't panic, we've been there too. This paper is our "101" guide to getting your design and usability principles right. We'll start by setting some mobile web design rules to live and die by... Five Rules for Designing Usable Mobile Web Sites 1: The mobile web is mobile2: Context is king3: The devices are (very) different4: Forget your dotcom thinking. Rule 1: The Mobile Web is Mobile Never overlook the obvious. Rule 2: Context is King When it comes to usability, context is everything. This point is critical to the success of your mobile site: your can no longer account for where your users are accessing your site from. Rule 3: The devices are (very) different Mobile devices are, of course, very different to desktop and laptop computers. Limit choices.
Implementing Off-Canvas Navigation For A Responsive Website All about the design – top tips for designing mobile sites and apps from the professionals As mobile devices become increasingly capable and the mobile audience becomes increasingly sophisticated, companies are stretching the bounds of possibility when it comes to mobile sites, native applications and Web apps. It becomes all the more important to consider not just graphical design, but also the physical design of your mobile product. It is essential to know not only who will be using it, but how and where they will be using it. This is the fifth in our series of six app-related articles. The following guide was compiled from the responses of the following mobile design and usability gurus: All these experts spoke at Design for Mobile in Chicago, USA, September, 2010. The anatomy of good mobile design 1) Putting things in context Understand, respect and design for your users' contexts. 2) The mobile context Mobile means ‘on the go’ and ‘away from my desk’. 3) Make the most of the Platform Always design for mobile first – don’t just re-purpose your web site/app.
Responsive WordPress Menu Plugin for Mobile Devices The Responsive Select Menu plugin lets you automatically turn your “WordPress 3 Menus” into an easy-to-scroll select box/dropdown menu. (A “WordPress 3 Menu” is a menu created through the WordPress admin area: Appearance > Menus. Many people typically use these menus in their top navigation spot, as well as other places.) The Plugin in Action Let’s go ahead and jump right into some examples to show you what it looks like. Here’s a look at a normal top menu in a mobile device using the WordPress Twenty Ten theme. And now here’s a look at that same top menu with the Responsive Select Menu plugin activated. When you touch the menu and pull it down, you get a select box/dropdown menu that you can easily scroll through with your finger. Featured Plugin - WordPress Newsletter Plugin Now there's no need to pay for a third party service to sign up, manage and send beautiful email newsletters to your subscriber base - this plugin has got the lot. Find out more Settings Width Breakpoint See a Working Demo
Home | mobiThinking A Responsive Web Design Tutorial for Beginners This is the second post in a series about Responsive Web Design, described in plain language from a front end designer. In our last post I wrote about three reasons responsive web design is something you should know about. We discussed the problems associated with the traditional method of designing a desktop and mobile version of a website. Essentially, there are just too many mobile devices hitting the market to tailor our websites to view well on them all. The thing I like about problems or challenges is that–if we let them–they make us better people and create space for innovation and solutions that may otherwise never be discovered. Designer and developer Ethan Marcotte was instrumental in solving this problem of device compatibility. In actuality, the problem is still being solved and responsive web design methods, tools and standards are still being developed and refined. Media Queries Responsive design uses a CSS3 feature called media queries. Break Points The Fluid Grid
20 Best Responsive Web Design Examples of 2012 The Boston Globe The largest responsive website to date, The Boston Globe handles loads of content effortlessly, keeping the site intuitive and the content easily accessible on the device of your choice. Smashing Magazine I love this site. I really do. Food Sense Clean layout, beautiful photography and playful iconography made me like this site immediately on my first visit. Andersson Wise Type designer, Jan Tschichold once said, ‘Simplicity of form is never a poverty, it is a great virtue.’ Sphero If you haven’t check out Sphero, you should. CSS Tricks It might be the conspicuous green frog that causes me love this site. Grey Goose The Grey Goose site shows that designing responsively does not limit our designs to columns of fluid text and images on solid backgrounds. New Adventures In Web Design With a name like “New Adventures In Web Design,” one would expect a responsive site for this web design conference. Lancaster University Fundraise.com Web Designer Wall Heathlife London & Partners Fork
How to Approach a Responsive Design - Upstatement Blog So I’ve got a confession to make: When we started working on the new Boston Globe website, we had never designed a responsive site before. This shouldn’t come as some huge shock. I mean, raise your hand if you’d built a full responsive site back in November 2010. Here at Upstatement, we experimented with how to solve design and layout problems within a responsive framework. Ready? Choose Your Weapon Before laying down a single pixel, there was an important decision to make: What design program to use? Eventually design would be done directly in the browser — there’s no better tool for interactive design, especially when you’re working with fluid layouts (more on all that later). So we lined up the usual suspects from Adobe. Hands down, the answer was InDesign. Even better, InDesign’s internal logic parallels that of web design and development. InDesign stylesheets InDesign’s master pages palette Like the web, InDesign also has a notion of templates. And Now It’s Time for a Breakdown 960px
Building a Responsive, Future-Friendly Web for Everyone This week’s Consumer Electronics Show in Las Vegas has seen the arrival of dozens of new devices from tablets to televisions. Some of these newfangled gadgets will soon be in the hands of consumers who will use them to access your website. Will your site work? No one wants to rewrite their website every time a new device or browser hits the web. Even if you aren’t a gadget lover, CES should help drive home the fundamental truth of today’s web — devices, they are a comin’. Basics: Further Reading: Future Friendly — An overview of how some of the smartest people in web design are thinking about the ever-broadening reach of the web: “We can’t be all things on all devices. Techniques:
Complex Navigation Patterns for Responsive Design The most frequently asked question I get since posting my responsive navigation patterns article is: How do I handle complex navigation for responsive designs?” Great question, but before we get down to brass tacks, I urge you: use mobile as an excuse to revisit your navigation. Look at your analytics. What are your experience’s key sections? Where are people spending most of their time? Another thing: if you have a zillion sections and pages, prioritize search. OK, now that all that’s out of the way, time for some real talk. Sometimes you just have a complex navigation. The Multi-Toggle Barack Obama's Multi-Toggle Navigation from his redesigned campaign site The multi-toggle is basically just nested accordions. Quick tip: use one of two emerging icons: the plus sign (+) or downward caret (▼ ▼) to let users know there’s more content. Pros Scannable – users can quickly scan parent categories before making a decision to go to the next level.Scalable – Got a menu that’s 17 levels deep?