background preloader

Complex Navigation Patterns for Responsive Design

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. 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? Cons Resources In the Wild The Ol’ Right-to-Left Sony's small screen navigation Priority+ Related:  responsive design

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? Or will it end up mangled by a subpar web browser, odd screen size or slow network connection? 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:

Sender 11: Mobile screen size trends Over at mBricks my colleagues have put a lot of work into the device database (we work with WURFL data and contribute back as well as we can). I took the opportunity to take a closer look at screen size trends. The data I have covers about 400 different device models sold from 2005 to today. This shows the the most significant screen sizes, from the smallest to the largest. Over the years the relative screen size difference has increased. You can see that the smaller screens have a portrait orientation and the large screens have a landscape orientation. Resolution I did a rough dpi (ppi to be exact) calculation for some popular phone models. There is an upper limit to what dpi is meaningful. Unfortunately, for LCD screens, increased pixel density doesn't give us more brightness. Yes, a grand total of 26 different screen sizes. As you can see, just a handful of variants makes up the majority of phones. It is obvious that 240 x 320 (also called QVGA) is on a roll. The odd ones Future

CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're interested. Reset styles quite often appear in CSS frameworks, and the original "meyerweb reset" found its way into Blueprint, among others. The reset styles given here are intentionally very generic. In other words, this is a starting point, not a self-contained black box of no-touchiness. If you want to use my reset styles, then feel free! Previous Versions v1.0 (200802) Acknowledgments Thanks to Paul Chaplin for the blockquote / q rules.

30 Examples of Mega Menus in Web Design Mega menus are often used on large sites that have considerable number of pages for users to navigate. Rather than just using a dropdown, the mega menu opens up a bigger area that offers more options. While mega menus can make it easier for users to get deeper into the site with fewer clicks, the huge amount of options can also potentially overwhelm some visitors. For this reason, great care should be taken to make mega menus as user-friendly as possible. Looking for hosting? 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. (You can put your hand down now, Mr. Marcotte, that was rhetorical.) 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 Designing Downward 960px

Touch Target Sizes People interact with touch-based user interfaces with their fingers. So user interface controls have to be big enough to capture fingertip actions without frustrating users with erroneous actions and tiny targets. Ok, so how big? In the iPhone Human Interface Guidelines, Apple recommends a minimum target size of 44 pixels wide 44 pixels tall. Since physical pixel size can vary by screen density, Apple's pixel specifications apply best to the iPhone's 320 by 480 pixel, 3.5 inch display (164ppi). In the Windows Phone UI Design and Interaction Guide (PDF), Microsoft goes further and suggests: a recommended touch target size of 9mm/34px; a minimum touch target size of 7mm/26px; a minimum spacing between elements of 2mm/8px; and the visual size of a UI control to be 60-100% of the touch target size. The Ubuntu Designing for Finger UIs documentation states the minimum size of buttons and other interface elements should determined by the size of an adult finger (diameter of 16mm to 20mm).

Media Query Snippets - list of media queries Landscape @media (max-device-width: 1024px) and (orientation: landscape) { } Portrait @media (max-device-width: 600px) and (orientation: portrait) { } @media (max-device-width: 1280px) and (orientation: landscape) { } @media (max-device-width: 800px) and (orientation: portrait) { } @media (max-device-width: 800px) and (orientation: landscape) { } @media (max-device-width: 400px) and (orientation: portrait) { } @media (max-device-width: 1080px) and (orientation: landscape) { } @media (max-device-width: 480px) and (orientation: portrait) { } @media (max-device-width: 1366px) and (orientation: landscape) { } @media (max-device-width: 768px) and (orientation: portrait) { } @media screen and (device-width: 600px) and (device-height: 905px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) { } @media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 1) { }

A Pragmatic Developers Handbook In order to work effectively with git and github, you must understand the philosophy of it’s development mode. Git was created by Linus Torvalds to solve the code management issues experienced by the Linux kernel team. This team is highly distributed, highly capable, and very large, so the design requirements for git were to be very fast, very flexible, and to work well with a distributed team. GitHub adds to the core of git a web interface that makes it easy to browse code, create repository forks, and assign permissions. Steps Clone the repository You may choose to create a local fork, or you may have push rights to the upstream repository. To clone the upstream repository for this book, you would run git clone git@github.com:easel/handbook.git. If you are operating out of a forked repository, you should add a remote for the upstream, for instance with git remote add git@github.com:easel/handbook.git. Decide what to implement Reset your working tree Create a feature branch Receive feedback

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. 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 Oliver Russell Fork

Le responsive design ne fait pas tout : 4 étapes pour concevoir un site adapté aux utilisateurs mobiles Lorsque nous abordons le sujet du mobile avec des créateurs de sites web, nous entendons souvent des phrases comme : « Nous avons fait un site responsive, donc il est adapté aux utilisateurs mobiles ». Si seulement c’était aussi simple que ça… Les résultats obtenus avec le responsive design sont magnifiques, et c’est probablement le seul moyen pratique de s’adapter aux très nombreuses tailles et résolutions d’écran du monde mobile. Dire que le responsive design résout tous les problèmes rencontrés par vos utilisateurs mobiles, c’est comme dire que posséder un marteau vous permettra de construire une maison. La plupart des discussions sur le responsive design concernent essentiellement la mise en œuvre de cette technique : le prototypage plutôt que l’utilisation de designs statiques, les stratégies de navigation, la forme des icônes, etc. Mais il est plus important de parler de ce que nous sommes en train de construire avec ce marteau. Quelques conseils sur la démarche à adopter 1. 2. 3.

The Responsinator Camlistore Camlistore is a set of open source formats, protocols, and software for modeling, storing, searching, sharing and synchronizing data in the post-PC era. Data may be files or objects, tweets or 5TB videos, and you can access it via a phone, browser or FUSE filesystem. Camlistore (Content-Addressable Multi-Layer Indexed Storage) is under active development. If you're a programmer or fairly technical, you can probably get it up and running and get some utility out of it. Join the community, consider contributing, or file a bug. Things Camlistore believes: Your data is entirely under your control Open Source Paranoid about privacy, everything private by default No SPOF: don't rely on any single party (including yourself) Your data should be alive in 80 years, especially if you are Latest Release The latest release is 0.7 ("Brussels"), released 2014-02-27. Follow the download and getting started instructions to set up Camlistore. Video Demo FOSDEM 2014 Camlistore presentation: Contribute

Building Responsive Layouts presentation at Responsive Web Design Summit Today I spoke at the online conference Responsive Web Design Summit 2012 on Building Responsive Layouts. I talked about two of the core components of responsive web design: fluid/liquid layouts and media queries. Much of the talk was focused on fluid layout techniques and tips: how to build a basic two- or three-column all-fluid layout, how to create fluid grids with fixed-width margin and padding, how to create a hybrid fixed-fluid layout, and how to calculate nested width, margin, and padding values. I then walked through adding media queries onto the fictional Little Pea Bakery site from my book Stunning CSS3 to demonstrate how to make a layout responsive to a variety of screen sizes and devices. Finally, I covered how to fix media query issues in iOS and IE 8 and earlier. You can view the slides on SlideShare, or download the slides here: Building Responsive Layouts (PDF, 2.4 mb) Responsive web design link hubs Responsive web design articles, tutorials, and tools Mobile viewports

Related: