c r a f t i n g a m o b i l e e x p e r i e n c e w i t h o u t b u i l d i n g a s e p a r a t e m o b i l e s i t e

Transcription

1 c r a f t i n g a m o b i l e e x p e r i e n c e w i t h o u t b u i l d i n g a s e p a r a t e m o b i l e s i t e Ryan Huber School of Medicine Web Development

2 c r a f t i n g a t a b l e t e x p e r i e n c e w i t h o u t b u i l d i n g a s e p a r a t e t a b l e t s i t e Ryan Huber School of Medicine Web Development

3 c r a f t i n g a n e t b o o k e x p e r i e n c e w i t h o u t b u i l d i n g a s e p a r a t e n e t b o o k s i t e Ryan Huber School of Medicine Web Development

4 c r a f t i n g a s m a r t t v e x p e r i e n c e w i t h o u t b u i l d i n g a s e p a r a t e s m a r t t v s i t e Ryan Huber School of Medicine Web Development

5 why you re here

6 r e s p o n s i v e w e b d e s i g n

7 it s crazy trendy.net Magazine chose Responsive Design as #2 on its list of Top Web Design Trends for 2012

8 because you love your users... image credit:

9 ...regardless of the device they use Everyone is seeing an explosion of growth in their non-desktop traffic. Or maybe

10 because your mobile strategy...

11 doesn t exist

12 Redirected from the page you actually wanted to our awesome mobile homepage or is... eh... limited 1. Five links 2. from our 3. full site we 4. assume 5. you want. no more content for you.

13 r e s p o n s i v e w e b d e s i g n

14 a design that adapts to the environment in which it is viewed

15 Whether that device is a computer, tablet, or phone (or anything in between.) Mostly, we re talking about width, but also about capabilities. image courtesy:

16 rather than a separate site for each device Benefits -- not maintaining multiple sites, not making bad assumptions about what content users want.

17 and a few others (pretty examples)

18 cool right?

19 developing (if html and css aren t your thing, cover your ears)

20 1. Meaningful HTML 2. Valid HTML 3. Separate content and style 4. Quality content 5. Lean as possible write pretty html

21 write css for mobile Think percentage widths, one column, large tap areas. Mobile first -- a good plan. Luke Wroblewski can tell you all about it.

22 (here comes the magic part)

23 media queries hide / show elements, change font sizes, etc. How do you choose breakpoints? Find natural breakpoints.

24 nitty gritty bits

25 disable initial scaling

26 webkit text size auto-adjusting

27 polyfill

28 images caveat: image scaling can look bad, especially in older versions of IE. There are some CSS tricks for improving this, beyond the scope of this presentation

29 safari scaling bug what not to do -- disable scaling altogether

30 don t disable scaling! Lots of javascript snippets to prevent this bug from occurring. Use those.

31 more complex manipulations

32 grids by nature a typical fixed width grid system will not work. responsive grid systems exist. (like semantic.gs or twitter bootstrap)

33 videos

34 wide tables

35 slideshows they exist, just search for them. Flexslider is one I like

36 performance considerations aim to make your initial view work well on regardless of bandwidth, screen size, processor speed. Replace small images with larger images if the browser is wide enough. Be conscious of resources being loaded.

37 if all of that seems like a lot to remember

38 Boilerplates 320 and up is nice. Twitter bootstrap is super awesome.

39 themes for your cms of choice Wordpress, Drupal both have RWD themes.

40 designing

41 a little uncomfortable? designers a bit uncomfortable? how do I design for an unknown width?

42 The control which designers know in the print medium, and o f t e n d e s i re i n t h e w e b medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn t have the same constraints, and design for this flexibility. - John Allsopp from A Dao of Web Design

43 a couple of ideas... Design live with html. If you design in photoshop, you ll need to show mockups at various sizes. May consider combining all sizes into one big photoshop document, so it s easy to duplicate items between sizes.

44 lesscss.org a dynamic stylesheet language an alternative to writing straight css

45 lessphp less.app plugin for wordpress plugin for drupal javascript code is compiled into CSS LESS is compiled into CSS.

46 hold it. you re asking me to learn a new language?

47 all CSS is valid code Don t panic, less just extends CSS.

48 Less CSS demo (prepare for magic)

49