Responsive Web Design: stories from the coalface

Transcript

1. Stories from the coalface RESPONSIVE DESIGN Erskine design - @erskinedesign

   Wil Linssen - @linssen Sam Quayle - @samquayle Standards > Next - Mobile and devices MMU 3/3/12 #standardsnext Notes  have  been  added  to  this  presentation

2. Responsive web design from an agency perspective Challenges we faced

   in commercial projects Working with RWD in a team Learning to educate our clients, and sell RWD What we learnt from our mistakes How we adapted our tools and process The future Tight  budgets  and   time  scales

3. Responsible business is good business, provided we don't get too

   far ahead of our customers. I think half a step is about right” SIR STUART ROSE Former CEO Marks & Spencer “ Started  charging  for  plastic  bags  at  the   checkout  as  part  of  their  Plan  A  ‘doing  the  right   thing’  objectives. Originally  seen  as  corporate  suicide,    M&S  educated  their   clients,  taught  them  that  it  was  the  responsible  thing  to  do   and  therefore  suffered  no  real  backlash. We  can  also  apply  this  to  RWD

4. It is our responsibility to educate the client Bring them

   along with with us Speak to them in a language they understand Demonstrate a ROI EDUCATE NO EXCUSES PROCESS & TOOLS SHARE Always  good  to  stay  ahead,  but   not  too  far.  Don’t  leave  your   clients  behind Measurables

5. We’ve been here before Web standards movement Separating markup from

   presentation with CSS files Content Management Systems EDUCATE NO EXCUSES PROCESS & TOOLS SHARE All  seemed  alien  in  the  beginning,   now  accepted  as  best  practice

6. We’d  like  to  show  you  an  example  from   one

    of  our  longest  serving  clients They  wanted  a  new  blog  to  support   their  online  editorial  content  and   encourage  sales  of  art  fair  tickets   and  magazine  subscriptions. http:/ /www.frieze.com

7. EDUCATE NO EXCUSES PROCESS ENGINEERING SHARE Frieze Blog Content distribution

   was changing Examined existing analytics Presented the information in a way that appealed to the client We  were  aware  social  networks  were  beginning   to  dominate  content  distribution,  more  people   were  engaging  with  social  networks  through   mobile  devices,  so  we  knew  there  was  a  case   for  RWD   Reaffirmed  our  beliefs  -­  Mobile  traffic  to   the  blog  was  growing,  mobile  bounce  rate  was   very  high   And  we  got  the  go  ahead!

8. EDUCATE NO EXCUSES PROCESS ENGINEERING SHARE Frieze Blog Mobile visitor

   stats New Responsive site Old site A  comparison  of  a  month  before  the  blog  was  Responsive,  and  again  after Great  success!

9. What happens, when you don’t have the time or budget

   to make a site fully Responsive from the ground up? EDUCATE NO EXCUSES PROCESS & TOOLS SHARE

10. Perfection vs Pragmatism EDUCATE NO EXCUSES PROCESS & TOOLS SHARE

11. Responsive web design is just web design, done right. As

     an  agency,  everything  we  now   design  and  build  is  at  least  partially   Responsive No  real  reason  not  too,  there’s  no   extra  overhead  in  doing  the  basics

12. Don’t code yourself into a corner EDUCATE NO EXCUSES PROCESS

    & TOOLS SHARE Keep your markup extensible Use relative widths and heights where possible Keep in mind a brighter more Responsive future Use a CSS preprocessor Use  ‘news_block’  instead  of  ‘span_6’:   you’re  column  counts  might  change.

13. The inconvenient truth is that designing and building Responsively takes

    more time and costs more money

14. We looked to improve our own process so that we

    could build sites the way we wanted, as cost-efficiently as possible EDUCATE NO EXCUSES PROCESS & TOOLS SHARE

15. Create grids by hand for the purpose of wire-framing and

    design Recreate these grids in the browser with CSS Presentational Write JavaScript Our old process EDUCATE NO EXCUSES PROCESS & TOOLS SHARE

16. We couldn’t visualise the grids responding (sweet irony) Extremely inefficient

    Left too much room for error Cumbersome The problems We ended up repeating ourselves EDUCATE NO EXCUSES PROCESS & TOOLS SHARE Until  half  way  through  the  build.   Making  assumptions  about  where   breakpoints  should  occur Creating  the  same  grid  twice

17. True flexibility Visualise our grid being Responsive What we wanted

    Speed up our workflow Centralise the whole process Reduce errors Create something we could evolve and refine EDUCATE NO EXCUSES PROCESS & TOOLS SHARE But  more   importantly Every  project  is  different,  we  needed  to  be  able  to   customise  every  aspect  of  the  grid  from  the   number  of  columns  to  where  the  break  points  occur.

18. http://gridpak.com A  Responsive  grid  tool

19. Quick demo

20. Not a ‘silver bullet’ Not meant to be Framework Limitations

    Currently all grid generators make uniform grids Some newer CSS3 features EDUCATE NO EXCUSES PROCESS & TOOLS SHARE No  reset  included  in  the  CSS,   LESS  and  SCSS  that  it  spits   out.  Meant  to  be  plucked  and   pruned  into  your  own  stylesheets We  are  actively  working  on  a   feature  which  will  allow  the  user  to   create  asymmetrical  grids

21. Still firmly a Beta product We love feedback Going forward

    with Gridpak EDUCATE NO EXCUSES PROCESS & TOOLS SHARE New features We  wanted  to  get  it  out  there  as  soon  as   possible.  It  is  a  little  rough  around  the  edges,   there  are  a  few  bugs,  but  if  you  do  find  one   please  let  us  know  and  we’ll  fix  it  as  soon  as   possible We  want  it  to  be  as  useful  to   people  as  possible,  so  real   feedback  is  really  important  to   us Watch  our  Trello  board  to  see  and   vote  on  upcoming  new  features. http:/ /bit.ly/ zV8UE8

22. Sharing ideas Apples unt orangen! EDUCATE NO EXCUSES PROCESS &

    TOOLS SHARE Quick  digression:  Historians  believe  that  the   absence  of  copyright  laws  in  Germany  during   the  19th  century  could  have  been  responsible   for  their  rapid  industrial  expansion  and  the   collapse  of  the  British  empire.   The  mass  proliferation  of  books,  ideas  and  hence   knowledge  laid  the  foundation  for  the  country's   industrial  might.

23. The more we share and collaborate, the faster we move

    and the quicker these techniques will be accepted by clients and adopted into the mainstream

24. Educate your clients bring them along with you EDUCATE NO

    EXCUSES PROCESS & TOOLS SHARE No time, no budget, no appetite no excuse Improve your process add to your toolset Share and collaborate To  summarise:

25. One more thing... Gridpak  is  now  open  source! http:/ /

    github.com/erskinedesign/ed.gridpak

26. EDUCATE NO EXCUSES PROCESS & TOOLS SHARE Thank you! Danke!

    Erskine design - @erskinedesign Wil Linssen - @linssen Sam Quayle - @samquayle @gridpak http://gridpak.com http://github.com/erskinedesign