THIS IS A PARADIGM SHIFT “...scientific advancement is not evolutionary, but rather is a series of peaceful interludes punctuated by intellectually violent revolutions, and in those revolutions one conceptual world is replaced by another...” — Thomas Kuhn
FLEXIBILITY IS THE NEW NORM 0 500 1000 1500 2000 2007 2008 2009 2010 2011 2012 2013 2014 2015 Mobile Users Desktop Users Global Mobile vs Desktop Internet User Projection Source: Morgan Stanley Research
Width, height Device-width, device-height Orientation Aspect ratio Several others http://www.w3.org/TR/css3-mediaqueries/ RESPONSIVE WEB DESIGN MEDIA QUERIES
@media (min-width: 600px) { /* styles for 600px and up here */ } @media (max-width: 600px) { /* styles for 600px and down here */ } RESPONSIVE WEB DESIGN MEDIA QUERIES
/* Large Resolution First CSS File Structure */ /* large resolution layouts here */ @media (max-width: 850px) { /* styles for 850px and down here */ } @media (max-width: 450px) { /* styles for 450px and down here */ } RESPONSIVE WEB DESIGN MEDIA QUERIES
/* Small Resolution First CSS File Structure */ /* smallest resolution layouts here */ @media (min-width: 450px) { /* styles for 450px and up here */ } @media (min-width: 850px) { /* styles for 850px and up here */ } RESPONSIVE WEB DESIGN MEDIA QUERIES
LARGE RESOLUTION FIRST PRO: IE support by default CON: Smallest devices load all assets SMALL RESOLUTION FIRST PRO: More logical (build up vs tear down) CON: IE support is tricky RESPONSIVE WEB DESIGN MEDIA QUERIES
LARGE RESOLUTION FIRST PRO: IE support by default CON: Smallest devices load all assets SMALL RESOLUTION FIRST PRO: More logical (build up vs tear down) CON: IE support is tricky RESPONSIVE WEB DESIGN MEDIA QUERIES
PROJECT BRIEF Project Scope Offer only t-shirts at first... potential for more later. No initial product inventory (no cart, checkout, etc). Users vote via twitter on what shirt they want produced. Should appeal to designers and developers. Simple 3-4 template site initially. Site will be responsive, build mobile-first.
PROJECT BRIEF Napkin Sketch & Content Logo and Tagline “You Decide, 2012” Nav: Home, About, Shirts, Contact Top Shirt: # Votes, Title, Description, Link to Detail Headline and Two Paragraphs About the Site Footer: Nav and Copyright
DON’T FORGET What is the hierarchy of content? Should we hide and show elements at different sizes? Which things are links? Are the buttons/links large enough for a touch device? How will the navigation respond? How much content do we need to allow for? Will it work in IE?
The problem isn’t the style, it looks cool. The problem isn’t even the size of the design, because we DO need a solution at 960 pixels wide. BROKEN PROCESS THE PROBLEM WITH “960-ONLY DESIGNING”
BROKEN PROCESS It assumes a fairytale world of controlled web experience that doesn’t exist, pushes design decisions onto developers, and creates false expectations in clients. THE PROBLEM WITH “960-ONLY DESIGNING”
It simply is not conducive to creating a site which is future-proof and forward thinking... • Mobile First CSS • Content as King • Responsive Layouts BROKEN PROCESS THE PROBLEM WITH “960-ONLY DESIGNING”
DON’T keep up the status quo. DON’T stop at whining about inadequate tools. Get creative and explore other possibilities with the tools and practices we have available today. BROKEN PROCESS
MOBILE FIRST DESIGN Problems: Mobile layouts are inevitably more linear and simple, and they provide little direction or room for more interesting layouts at large screen sizes. STUFF WE’VE TRIED
STUFF WE’VE TRIED BOOKENDS... PLUS “Okay, if designing large and small isn’t enough, how about adding a mid-range version? After all, tablets are the new black.” “And how about a 1280?” “And maybe one for the CEO’s Blackberry Storm?”
We are attempting to optimize content, design, and development time, finding a balance of appropriate direction from all disciplines without destroying budgets. ...while delivering on mobile-first, responsive designs where content is valued and considered. OUR PROCESS
Home About Shirts Contact Dress Responsively clothing co SIZE US UP & CAST YOUR VOTE! IMAGE OF LEADING SHIRT WHAT’S THIS ALL ABOUT? SHOW ME ALL THE CANDIDATES The Dress Responsively Clothing Company doesn’t exist. Yet. This website is a product of Sparkbox’s Build Responsively workshop. Dress Responsively was originally built as a mock project to create working files and content for the workshop’s attendees. But then we got to thinking. What standards-loving, responsively- HAS DROP DOWN MAILTO LINK SCROLL BELOW 334 VOTES #1 IN POLLS Home Page
Home About Shirts Contact Dress Responsively clothing co IMAGE OF SHIRT #1 SHIRT DETAILS AND VOTING EXPAND HIDDEN IMAGE OF SHIRT #2 SHIRT DETAILS AND VOTING 254 VOTES 334 VOTES Listing Page
A little something clever and explanatory about the shirt. Keep in mind that we can’t be too exclusive in the humor, at least not without giving subtle explanation. Home About Shirts Contact Dress Responsively clothing co IMAGE OF SHIRT #1 VOTE FOR IT EXPAND HIDDEN 334 VOTES CLICK FOR DETAIL VIEW #1 IN POLLS SHIRT TITLE GOES HERE NEXT SHIRT PREV SHIRT Back to Top REPEAT FOOTER Detail Page
We can’t “throw it over the wall” anymore... at least not if we want our sites to be excellent. There are too many moving parts. OUR PROCESS Step Five Zero:
DISADVANTAGES OF DESKTOP-WIDTH WIREFRAMES Too much focus on layout. Designer may not feel freedom to interpret layout. Leaves an extra step for designer/developer to figure out translation to mobile width. OUR PROCESS
ADVANTAGES TO MOBILE-SIZED PRIORITY GUIDE Wireframes focus more on hierarchy and less on layout. Cuts out a step of designer sketching/designing for mobile first. Dev gets direction on both desktop and smallest mobile widths. Answers some of the questions in handoff. More visual decisions left to designer, less headache for devs. OUR PROCESS
Educated clients (or more trusting and open-minded ones) may be open to deliverables closer to what we’ve described in our current process. CLIENT DELIVERABLES
Though we may educate our clients, some will inevitably want to see more and more versions of wireframes and layouts which cover multiple screen sizes... perhaps due to the project scope, or simply a lack of vision. We recommend getting paid for that. CLIENT DELIVERABLES
Home About Shirts Contact Dress Responsively clothing co SIZE US UP & CAST YOUR VOTE! IMAGE OF LEADING SHIRT HAS DROP DOWN MAILTO LINK SCROLL BELOW 334 VOTES #1 IN POLLS
TASK GOALS 1) ADD THE “HOME” LINK BACK IN 2) INCORPORATE THE LARGER LOGO 3) CONSIDER TYPE AND PADDING SIZES 4) HONOR THE PROPORTIONS OF THE DESIGN CSS-1
bencallahan
uxyall
keita_yoshikawa
uxevents
hjmkth
aguringo
kawaiirailroads
uxaustralia
okabemy
keavy
garrettdimon
smashingmag
dougneiner
trallard
zakiwarfel
sstephenson
cromwellryan
iamctodd
bluesmoon
bermonpainter
morganepeng