Monkeytalk Fall 2012 - Responsive Web Design

1,386 views
1,240 views

Published on

A quick introduction to responsive web design by Monkeyshot

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,386
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
16
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Dit is gewoon de reality, dit is de manierwaarop het internet gaatwerken. Nietomwille van hype of trend. Dit is het internet waar we naartoegaan; Geen fix width internet.
  • Mensenverwachtengewoondat contentbeschikbaar is op eenderwelke device, en als het even kan, ooknaadloos van het enenaar het andere device ; op eenderwelk moment van de dag…
  • CONTENT!The world famous UX designer Bruce Lee once said…
  • Perfect metafoor!
  • Dus we kunnenabsoluutnietvoorspellenwelke devices met schermennog op onsgaanlosgelatenworden, dus het heeftgeenenkelezinom per device een apart ontwerptemaken.
  • Voor de mensen die twijfelenaan de internet of things, erlopenondertussen al koeienrond die ‘connected’ zijn… voorlopiggelukkigzonderscherm…. Maar goed we dwalenaf….
  • Feit is dat RWD nietgemakkelijk is, ikkrijgervaakeenpunthoofd van…
  • Zoalsonsgoedevriend Frank Zappa, die heeftgelukkigookeenremedievoorpunthoofden… probleemdatikbijmezelfvaststelde, is dat je somsbewust en onbewustvasthoudtaan de dingen die je gewoon bent.
  • Dusalleswat je geleerdhebt, kan je best even vergeten, het gaat nu enormsnelomdat het nogzonieuw is.Dus stop met zittenmopperen, vooruit met de geit, het gaatnietmiraculeusverdwijnen.Laten we ookproberen de mythestebegraven, als je bij RWD nog over ‘de fold’ durfttebeginnen, dankan je beter in de politiekgaan,daarkan je eenderwatvertellenHet lijkt me aangewezenvoor designers van eenderwelkestrekking, omnieuwedingen op tepikken, maak de handenvuil HTML/CSS/JAVASCRIPT/FRAMEWORKS of anderetechnischekennis op tedoen, nietdat je alleszelfmoetkunnen, maar je moet het op zijnminsttochgoedbegrijpenMaakgerustfouten, daar leer je het meest van! I knowWe zijn nu nog maar net begonnen met ditgroteavontuur en zijn de oplossingenaan het ontdeken, time will tell wateroverleeftwatvoor de prullenbak is.Het is en blijfteen van de coolste jobs in de wereld, en in de geschiedenis van technologie is dittocheen van de boeiendste moment die wereldwijdzijninvloedheeft, dusweestrostomdaaraandeeltenemen.
  • Erwordendaarleuke schema’s rondgemaakt die goedalsleidraadkunnendienen/ maar onthoudtdat je breakpoint eigenlijk best door je content zelfwordenbepaald, vanaf het punt dat je design wordtgebroken.
  • The world famous UX designer Bruce Lee once said…
  • Je krijgtsnel de vraag, ja maar, waaromdoen we nietallesrechtstreeks in de browser? Ikvermoeddat het best is dat je die fase van wireframingen en/of schetsenniet mag overslaan; geenenkele architect beginteenhuistebouwenzonder plan.
  • Als je erechtietswil over leren, dankom je met dezeboeken al eenheeeleind.
  • Bedanktvoor het luisteren.Als je vragenmochthebben, kan je me altijd via Twitter vinden. Anders even tijdens de pauze, daarna ben ik jammer genoeg op wegnaarBerlijnvooreenconferentie. Dankuwel!
  • Monkeytalk Fall 2012 - Responsive Web Design

    1. 1. Responsive Web Design Quick Start Guide
    2. 2. Serge HufkensUX designer
    3. 3. “Big things… have small beginnings”© Prometheus, Ridley Scott
    4. 4. DefinitionResponsive Web Design (RWD)is web design in which a site iscrafted to provide an optimal userexperience across all devices(everything with a screen)hat tip to wikipedia
    5. 5. Let there be no mistake Adaptive vs Responsive web design ADAPTIVE THIS IS RESPONSIVEHat tip to Aaron Gustafson & Brad Frost
    6. 6. “Why?”© 2001: A Space Odyssey, Stanley Kubrick & Arthur C. Clarke
    7. 7. © NFL Network
    8. 8. Conclusion•  There’s a growing mainstream expectation that you can simply get all your content from any device.•  We expect content to flow seamlessly, follow us throughout the day.
    9. 9. Let’s tackle that with some philosophy!
    10. 10. © Enter the Dragon, Bruce Lee, Robert Clouse
    11. 11. and there’s even more…
    12. 12. Wroblewski’s Theorem
    13. 13. “Anything that can be connected to the internet, will be.”
    14. 14. Why go responsive?“We do responsive web design, but we don’t do itfor the sake of being trendy. We do it because webelieve it’s the way websites should be made.This is an opportunity for us to finally embracethe dynamic medium we build for. The web is notfixed width.”- Ben Callahanhttp://seesparkbox.com/foundry/you_say_responsive_i_say_adaptive
    15. 15. factRWD is hard
    16. 16. © Frank Zappa
    17. 17. Open your mind •  Everything has changed and continues to do so, fast •  Accept it and move on •  Loose the myths •  Get some new skills •  Make mistakes •  Time will tell •  Be proud to be a part of it
    18. 18. BECOMING RESPONSIVE
    19. 19. 3 basic ingredients© Eén, Dagelijkse kost
    20. 20. •  A flexible grid –  The design has fluid layout elements that change on browser size•  Conditional images & other media –  The design uses one or more techniques to scale images and media so that the design performs well across devices•  Media queries –  Conditional code that changes items on a page based on device detection or browser width
    21. 21. Viewport, media queries andbreakpoints
    22. 22. © Andy Clarke
    23. 23. 3 advancedingredients © Culy.nl, Sergio Herman
    24. 24. •  Advanced elements –  A basic fluid grid is the priority; but to be fully responsive we must often cover slideshows, tables, tabs, multi-column type, custom widgets, forms, and more.•  Touch input –  Touch input is a critical development component as we move away from a mouse- first model of human-computer interaction•  RESS and server-side conditionals –  Heavy lifting for user agent detection and conditional media deployment is done by the server, not the device.
    25. 25. THINGS TO GET IT ON
    26. 26. Wireframes?full wireframes for each breakpointPros: Cons•  most thorough method •  takes the longest•  no page element left •  it’s static! unexplored •  with a slow-decision•  may be the best solution for retrofitting group, prepare for a because it provides the long process most detail
    27. 27. Wireframes?responsive prototypesPros: Cons•  gets specific about •  requires someone on repositioning and the team have front-end content without skills promising every detail •  may not prevent the•  one asset per template need for more detailed instead of three or four wireframes
    28. 28. Flexible gridsgrids, grids everywhere…•  Play around with the many grid systems online to get a good feel what they do…•  Examples…
    29. 29. http://lessframework.com/
    30. 30. http://foundation.zurb.com/
    31. 31. http://goldengridsystem.com/
    32. 32. http://goldengridsystem.com/
    33. 33. Conditional images Take a look at this to get startedhttp://adaptive-images.com/
    34. 34. About designSplit itAtmosphere Layout
    35. 35. Design your atmosphereStyletiles, (html) style guides, … http://styletil.es/ http://www.bbc.co.uk/guidelines/gel/
    36. 36. Responsive design patternsLot’s of examples available•  provide effective examples at the beginning of a project so that you’re not rethinking the wheel.
    37. 37. http://bradfrost.github.com/this-is-responsive/
    38. 38. http://www.lukew.com/ff/entry.asp?1514
    39. 39. http://jasonweaver.name/lab/offcanvas/
    40. 40. Responsive typographyDon’t neglect it, it’s your content!•  “Setting web type in Photoshop is a waste of time” — Andy Clarke•  Test on real devices (don’t scale your browser)•  Be careful with line lengths (keep it readable)
    41. 41. http://informationarchitects.net/blog/responsive-typography-the-basics/
    42. 42. http://blog.typekit.com/2011/11/09/type-study-sizing-the-legible-letter/
    43. 43. http://typecast.com/
    44. 44. Performance is also by designIssues for RWD•  Over downloading –  Download & hide, download & shrink, excess DOM•  Poor networks –  High latency, variable band width, packet loss
    45. 45. Issue #1 The average weight of a web page today? 1 MB HTML flash other CSS images javascript 82%Source: http://httparchive.org/
    46. 46. Issue #2 How many requests requires the average website? 85 Cable modem Cell network 0.4 sec 4.2 sec 10 x slowerSource: Guy Podjarny & HTTP Achive
    47. 47. So optimize!By doing following•  Reduce asset size –  HTML/CSS compression, image compression, try to avoid images, minification, avoid bulky frameworks•  Reduce requests –  Browser cache, concatenate JS & CSS, localStorage, data:URI, conditional loading•  Speed-up page render –  Avoid DOM reflows & repaints, defer loading of javascript, lazy load javascript, touch beats on click, …
    48. 48. Something about our tools“The framework for what a page is has changedconsiderably even in the past few years, thoughour applications for designing those frameworksare still stuck in the web of yore, and largelydictated by their use for print design.”- Jason Santa Maria
    49. 49. © Brad Frost
    50. 50. Feel like reading?
    51. 51. Thanks! @sjesch
    52. 52. Credit where credit’s dueThe true heroes of this presentation…Andy ClarkeLuke WroblewskiJeremy KeithJosh ClarkEthan MarcotteBrad FrostJason Santa MariaDave Olsen & Doug GapinskiTim KadlecEverybody I forgot…

    ×