Responsive Web + Mobile Best Practices pg. 1
pg 4. (Re)Organization + Layout pg 6. Responsive Elements pg 9. Mobile Navigation Patterns pg 12. Human Factors -Mostly Fluid -Do Nothing -Column Stacking -Layout Shifter -Text Truncation -Element Simplification -Break Point Animation -Hero Image Editing -Hero Image Resizing -Variable Splashes/Easter Egg -Slide Sub Nav -Fotter Anchor -Do Nothing -Remove the Sub Nav -Accordion Nav -Off Canvas Slide In -One Hand -Cradle -Two Thumbs Vertical -Two Thumbs Horizontal pg. 2
1. (Re)Organization + Layout 2. Notable Responsive Design Elements 3. Mobile Navigation Patterns 4. Human Factors Mostly Fluid This pattern relies on the power of fluid grids. A mostly fluid website uses scaling and resizing to allow content to fit into different screen sizes while keeping the fundamental structure of the layout relatively untouched. Antarcticstation.org Antarcticstation.org mainly responds to increasing or decreasing screen size by scaling content and using fluid grids to compress or widen the width of text columns. Do Nothing Some websites do not require a lot of reworking to be viable on many screen sizes. The complexity of the responsive pattern used is proportional to the complexity of the interactions and content of the desired site. Futurefriend.ly Futurefriendly does not have a lot of complex content and as a result simply expands horizontally to fit on larger screens. pg. 3
Column Stacking Column stacking is a popular pattern that adjusts to smaller screen sizes by stacking content. This method relies less on fluidly shrinking or compressing copy and image than on re-arranging whole blocks of content. Orestis.nl Orestis.nl uses a very simple stacking approach for their website. As the screen size changes the website adapts by fluidly shrinking its copy until it reaches breakpoints. At a tablet size the layout of the three columns changes from vertical to horizontal and they are stacked on top of one another. As it reaches its smallest sizes large images are removed. Layout Shifter This pattern differs greatly from website to website. In general this method rearranges and transforms a lot of its elements to fit certain screen sizes. FoodSense.is As FoodSense.is becomes smaller its layout completely changes. In a tablet size the logo is placed above the carousel, the carousel shrinks and eventually disapears, the navigation becomes part of the header and the icons are removed, the social media links are hidden, and content thumbnails near the bottom of the page begin to stack. At its smallest sizes all elements align center and adhere to a one column layout. pg. 4
Text Truncation News.google.com A simple concept: upon compression of the website on smaller screens News. google.com had less real estate. Their solution was to truncate the user s email text on the header. Element simplification 5dinstitute.org 5dinstitute.org is an example of a web page that is both responsive and also asymytric, irregular, and unique. The desktop was designed so that it had overlapping elements not neatly fitting into a column-centric grid. As the website changes to mobile sizes the layout loses some of its irregularity in order to easily fit into a one column pattern. You can retain irregular design elements, layout, and personality while still being a responsive site. pg. 5
Break Point Animation Healthlife.uk.co Healthlife.uk.co has only one breakpoint. At mobile screen sizes the icons in the header are removed and the header navigation gracefully transitions into its thinner form by using an animation. The animation helps to ease the user into or out of the mobile layout. Animations help to keep the entire site cohesive and to not confuse the user while moving between break points. Hero Space Masking Regent-college.edu Regent-college.edu uses many jagged design elements on their site. On smaller screen sizes the jagged shapes in the navigation are replaced by a neat gird of rectangles. The hero image resizes as you would expect, but at the 3rd or 4th breakpoint the image actually stops scaling. The image simply moves to the left underneath and is partially masked by the text panel. pg. 6
Hero Space Resizing wallcreations.com.au At the breakpoint between tablet and desktop sizes Wallcreations.au aggressively resizes its hero image and navigation block. They took a lot of care in designing their breakpoints and layout to ensure that the text on the image and the splash itself do not overlap akwardly. The green navigation block also performs an subtle animation as to not confuse the user despite how far the navigation moves. Variable splashes / Easter eggs Bureau.tsailly.net Bureau.tsailly.net on desktop features a prominent hero image of a table. On the first break point it is removed and replaced with a smaller graphic at the top of the text. Bonus: while shrinking the width of the page inside a browser the bureau animates. It does a 360 degree spin in a nod to other designers. pg. 7
Slide Sub Nav Sony.com The desktop version of Sony.com uses nested sub navigation. On mobile screen sizes the website tries to maintain this paradigm. the header menu is placed inside a menu button. On click of a subcategory the entire nevigation slides to the left and the next child category slides in from the right. Pro: Effective at communicating location as the user goes from parent to child categories. There are no page reloads and unlike accordions can hold many items without taking up a lot of screen real-estate. Con: Relies on animation to inform the user where s/he is. Footer Anchor html.adobe.com html.adobe.com hides its navigation in mobile views by removing link items from the header in small screens. The navigation bar is replaces with a button that when selected scrolls the user to the footer; the footer contains all the links. Pro: Effective at saving space and is very easy to implement. Con: If a page is too long it may be scrolling for a long time and the animation may disorient the user. pg. 8
Do Nothing Zachwoomer.com Zachwoomer.com is a simple site with little complexity within the navigation. On smaller screens the navigation is changed from a horizontal to a vertical list. Pro: Easy to implement, simple. Con: not content-first. Stacking manv objects takes up a lot of real-estate. May have problems if you decide to add more anv items later; difficulty with layout. With many links may be hard for user to select links. Font reliant: therefore may break on different browsers. Remove the Sub Nav bostonglobe.com Bostonglobe.com in its desktop layout utilizes a mega menu navigation. On smaller screens all navigation sections are compressed into a sections button. On click a panel opens with a list of all the main navigation items. These items link directly to their respective landing pages. Pro: This pattern is simpler than comparable drop down navigation patterns and takes up less room. Con: you lose the ability to preview what is inside specific categories. Each category needs a landing page. Full page reloads to get to specific content. pg. 9
Accordion Nav Microsoft.com Microsoft.com s mega menu has four categories. On smaller screen sizes these four items are placed within a menu button in the header. On click of a category all the sub items within are generated beneath it. Pro: Allows user to scan a lot of nav items simultaneously. Can have a lot of links. Does not take up a lot of screen while not in use. Con: Takes up a lot of screen real-estate when open. Links vs opening a sub nav may be unclear. Off Canvas Slide In Mashable.com Mashable.com compresses its header nav into a single button on smaller screens. On click a menu slides in from the left and displaces the content. This menu is similar to the the Boston Globe s as sub navigation items are removed and the menu links directly to category landing pages. Pro: Follows Facebook s mobile vernacular. Impressive as it is uncommon. Lots of real-estate. Con: Complicated to implement. May be difficult to transfer in desktop. Confusing to novice users. pg. 10
Physicality of the Smart Phone In order to develop responsive layouts a designer needs to take into account not only the size of a mobile device s screen, but also how people physically interact with hardware. The following pages are based upon research done by Steven Hoober. This is not meant to be a final word on human factors in mobile devices, but may be a starting point. One Hand This is how a majority of users hold and interact with smart phones. People using a phone in this way are often performing tasks or on the move. Users also quickly change how they hold thier phone depending on the interface they expect to use: Figure A is lower on the device in order to reach the bottom, while Figure B shows a user who has adapted to an interface that has more functionality near the top. Harder Easier Figure A. Figure B. pg. 11
One Hand (Continued) Finger movement is an important thing to consider. In the image to the right shows the easiest and most uncomfortable paths a user s thumb can make (for a right-handed user). Note that it is very difficult for a user to swipe horizontally along the top of the screen and moderately difficult to swipe vertically opposite of the user s hand. Cradle Users sometimes hold their phone with one hand while using their other hand to interact with the interface. Users often switch between using their thumb and their pointer finger. People may hold their phone this way in order to more easily access controls in applications or websites that are spread throughout the screen. Cradling may also give users a level of security and stability while moving. Figure A. Figure B. pg. 12
Two Thumbs, Vertical Users often switch between using two hands and cradling their phones. Users have become quite skilled at using both their thumbs to interact with controls. Two Thumbs, Horizontal Holding the phone horizontally allows the user to more easily type and view non-responsive websites, but is a less popular orientation. pg. 13
Resources http://bradfrost.github.io/this-is-responsive/patterns.html http://responsivenavigation.net/ http://www.lukew.com/ http://mediaqueri.es/ http://venturebeat.com/2013/04/08/5-tips-for-creating-great-mobile-app-user-interfaces/ Excellent responsive pattern library. Coded Examples! More responsive patterns. Skilled designer and responsive advocate. Read his blog posts. Curated real-world examples of responsive design. Human Factors. Other interesting articles: http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php? http://brianpagan.net/2012/interface-design-for-mobile-and-tablets-landscape-vs-portrait/ http://www.lukew.com/ff/entry.asp?1699 pg. 14