Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
pragmaticresponsive design   making the best of old and new techniques                 http://www.flickr.com/photos/dwonder...
This presentation is...• part case study• part lessons learned• part future-thinking
THE CASE STUDY                                         sadly no longer online as                                         o...
Chrome                       Opera Mini           Nokia N97iPad
THE CASE STUDY       Site goals:       • Inform end-users and industry       • Prompt end-users to update their browser   ...
70+ target Nokia devicesSymbian^3/Anna/MeeGo          Series 60                       Series 40Touch (+ many w/ keyboards)...
+ all the usual suspectsmany Nokia users on S40 featurephones still use Opera Mini                                        ...
initially                            no support was planned for                     legacy and/or XHTML-MP browsers       ...
Part 1: The design process       http://www.flickr.com/photos/jordanfischer/63832583
You can’t get there from hereDesigning only pixel perfect mock-ups makes itdifficult near-impossible to then think responsiv...
an emerging process                                                                              etc...sketches/IA   basic...
message/          copy                       copy       content first                                 draft 1              ...
If it’s layout prototype it.(...on real devices to clarify changes in context and theimpact of native capabilities and vie...
PAIN POINT       Too many to mention.       Mental models in particular are getting in the way.       We (our teams, our c...
We have lots of counterproductivebehaviours we need to unlearn.• Creating elaborate workarounds to suit (what you  perceiv...
Part 2: The CSS strategy      http://www.flickr.com/photos/wscullin/3770015203
TECHNIQUE      Mobile first      Design for (the simplest) mobile browser first.                                 the fact th...
“The absence of a media queryis in fact, the first media query.Bryan Rieger, Rethinking the Mobile Web
begin with a lightweight defaultA    fully flexible with defaultB   styles for navigation, fonts,   key word here    conten...
TECHNIQUE      Embrace the cascade      Don’t merely swap style sheets...let it cascade.      This results in smaller subs...
each style sheet augments the others            breakpoint                             breakpoint                     styl...
each style sheet augments the others            breakpoint                             breakpoint                         ...
TECHNIQUE      Use major and minor breakpoints      Create media queries inside of media queries.
content or                               component-specific                                    tweaksWhy we call them major...
a common approach                           One style sheet with media                           queries on the inside.   ...
a more robust option                                                              Multiple style sheets with              ...
MAJOR BREAKPOINTS IN DOCUMENT HEAD<link rel="stylesheet" type="text/css" href="stylesheets/basis.css"media="screen, handhe...
don’t multiple style sheetscause multiple http requests?     (which will affect performance)
Yes!...but (as we will see) we havebigger issues...
but it’s just                                                                         “one line of code”                  ...
3rd party requests don’t just include widgets,they can also include:•   ads•   analytics•   utilities (comment utilities, ...
everything has dependencies                                   Otherwise known as                                   everyon...
Example: 1 line of code spawns 49 server calls (including 21 redirects) “What happens next is the scary part: You effective...
ConclusionEach http request should add value!If a few well chosen http requests enable youto improve the experience-go for...
TECHNIQUE      choosing breakpoints
DisclaimerThere is no “perfect set” of breakpoints.Set your breakpoints based on the needs of your layoutand (the legibili...
major breakpointsmajor layout changes            Major Breakpoint 1                       Major Breakpoint 2       (media ...
minor breakpointscontent-related tweaks            Major Breakpoint 1                        Major Breakpoint 2       (med...
minor breakpointskey-device-related tweaks            Major Breakpoint 1                             Major Breakpoint 2   ...
OMG...               ” http://www.flickr.com/photos/richardmoross/1413692087
Existential question of the day:Does it make sense to create a breakpointif there is no known device with thatscreen size?...
Follow-up question:Does it therefore make sense to create abreakpoint just because there IS a knowndevice with that screen...
Answer: Yes, and yes...• Be pragmatic. If content looks ‘wrong’ at a given screen  size on the desktop, fix it (there’s pro...
examplereal-world major and minor breakpointsprimarily content-focussed but with a pragmaticeye on our project’s target de...
major                          breakpointsDefault          Major Breakpoint 1No media query   321 - 720 px                ...
major                             breakpoints background image omitted to                     layout is primarily reduce p...
Note: Screenshotstaken on a Mac for                                         minordemonstrationpurposes.                   ...
Minor BreakpointNote: Screenshots                                 @360 px (cross-checked for Nokia touch)taken on a Mac fo...
alignment (top/bottom) and x-position                                               adjusted to suit the content (image)  ...
...but rememberMedia queries are wonderfully versatile but screensize is only one factor to consider.Screen size rarely al...
PAIN POINT           when queried, these devices will all return a 320 pixel wide viewport                    value but ea...
Responsive design will only get you half way.Always pair responsive design with a feature detectionand adaptation strategy.
STEP 1  Media queries detect  screen size and servesize-appropriate layouts  and basic behaviours                 appropri...
STEP 1                            STEP 2  Media queries detect                  Feature detection  screen size and serve  ...
TIP      The more (accurate) information you can      detect, the more intelligently you can adapt.      Client-side featu...
TIP      Why should we need our own tacit      knowledge when we can detect browser      capabilities using JavaScript or ...
TIP      More information about feature detection, can be found in Bryan’s      Breaking Development presentation: Adaptat...
Part 3: responsive content & media                http://www.flickr.com/photos/mrs_logic/4548681436
“Optimize front-end performance first,thats where 80% or more of the end-userresponse time is spent.— Yahoo: The importance...
“       Optimize front-end performance first,                thats where 80% or more of the end-user                respons...
and yet...
most responsive image techniquesare primarily client-side                                                 fetching new ima...
often imposinga heavy burden onconstrained devices          3. adapt                             markup                   ...
TECHNIQUE      Serving more appropriate* images to      constrained devices      A pragmatic approach using both server an...
heavy-liftingSTRATEGY         server                                              determine basic device                  ...
to determine necessaryproperties such asscreen size                    UA string                   device                 ...
to determine necessaryproperties such asscreen size                    UA string                        to override the   ...
to determine necessaryproperties such asscreen size                                       UA string                       ...
final markup                                   cookie containing           resource bundle         device profile         ...
client-sideTWEAKSon as-needed basis                         on                     orientation                       change
images etc.client-side                              new media is                                         only fetched ifTW...
BONUS                  uses onResize event             (because onOrientation change               doesn’t work on all dev...
Demo...
TIP      This technique isn’t just good for images...      you can use it to implement other useful      (progressive) enh...
EXAMPLE      A simple content enhancement      “One Web” is a great ideal, but sometimes, adding or      removing content ...
Scenario:Provide each user with customized downloadinstructions based on detection of their browser version.Benefits:• incr...
UA string                                       determine device platform                                          (e.g. S...
Server-side adaptation pain points•   reliance on cookies•   reliance on external data•   say good-bye to the intelligent ...
PAIN POINT       Reliance on cookies       • what happens if cookies are disabled?       • what do we do about the EU Cook...
PAIN POINT       What about unknown devices?       • what happens to new devices that are not yet in a         device data...
TIP - don’t panic         an 80/20 approach will get you quite far         • on many site, 80% of traffic seems to come     ...
PAIN POINT       Say goodbye to the ‘intelligent default’       • how do we create intelligent default content or         ...
mobile first?                <something-or-other> just-in-timedesktop first?
PAIN POINT       CDNs anyone?       • CDNs currently couldn’t care less about changes in           device context. A URL i...
Part 4: design workflows      http://www.flickr.com/photos/jurvetson/5201796697
Some key goals when designing multi-context image-sets• visual consistency in the given context• message clarity & themati...
visual consistency (in the given context)                                            not so                               ...
message clarity & thematic consistencyacross contexts                                largest                  larger      ...
we began witha “normal” workflow
each graphic designed       in one context
Adobe                  Fireworks                  enables you to                  design and                  export differ...
Benefits          Designing graphics together provides          a more global and contextual view.          • Helped elimin...
PAIN POINT       It’s still not flexible enough...       Graphical design tools enabling the use of variables,       condit...
Part 5: embrace opportunities          http://www.flickr.com/photos/ganesha_isis/4439563089
We realised half way through the project thatwith only minor changes, we could supportanother 80-100 Nokia feature phones....
UA string                                                                                     Goal:                       ...
Reminder       User agent strings are not evil.       User agent strings can be incredibly useful so long       as you und...
So how did it go?
So how did it go?Within five days of our (soft) launch...
the site had been visited by people from133 countries
on 51 different Nokia devices(and of course many non-     Nokia devices)
oldest                                     smallest          Nokia N70         Nokia 1680            XHTML MP         XHTM...
So far...the most popular page(just behind the home page) is the page withinstructions to update your browser :-)
a few final words...http://www.flickr.com/photos/dwonderwall/3341419492
on being pragmatic        Perform a cost-benefit analysis        for every technique you use.
on being pragmatic        Old doesn’t mean bad and new        doesn’t mean good.        If a technique does more good than...
on being pragmatic        ...develop your mobile strategy        but in the meantime...there are        useful things you ...
STEP 1                STEP 2                    STEP 3Review your traffic     Test your site on those   Develop an action pl...
@yiibu         scontact uat             hello@yiibu.com                                               thank you           ...
Prochain SlideShare
Chargement dans…5
×

OMG... ” http://www.flickr.com/photos/richardmoross/1413692087 Pragmatic responsive design

340 994 vues

Publié le

OMG... ” http://www.flickr.com/photos/richardmoross/1413692087

Publié dans : Technologie
  • Girls for sex in your area are there: tinyurl.com/areahotsex
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Dating for everyone is here: ❶❶❶ http://bit.ly/2F4cEJi ❶❶❶
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Follow the link, new dating source: ❶❶❶ http://bit.ly/2F4cEJi ❶❶❶
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Dating direct: ♥♥♥ http://bit.ly/2LaDVgK ♥♥♥
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Dating for everyone is here: ❤❤❤ http://bit.ly/2LaDVgK ❤❤❤
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

×