web responsive

2. Why? – Mobile
0 Many people access your website via smartphones
and other mobile devices
0Your content is no more than 3 taps
away from “Angry Birds”
Image src: http://www.angrybirds.com/

3. It is 2013?
0 Which sites would you prefer to visit? Be quick!
or
1…2…3…

4. Screen resolution should be optimized for???

5. Splinternet ?
0 Consider Android mid‐2012 [ 3,997 distinct devices ]
Short URL to original article ‐ http://markdubois.me/DroidFragment

6. Education
0 I teach CMWEB 280 Multi‐screen
0 First 3 weeks we focus on the fundamentals

7. Terminology
0 Adaptive web design
0 Coined by Aaron Gustafson
0 Content will change to fit a predefined set of screen
sizes
0 Media queries are core
0 Responsive web design
0 Coined by Ethan Marcotte
0 Content will fluidly change to fit any screen or device
0 Media queries are a part, but pages more fluid

8. Responsive Web Design
0 Philosophy and development strategy
0 Multi‐screen/ post‐PC world
0 Focus on various viewport sizes
0 Single front end
0 Flexible grids
0 Flexible images
0 Media queries (may change content based on available
screen real estate)

9. RWD – early page
0 http://alistapart.com/article/responsive‐web‐design

10. Responsive Design
0 http://alistapart.com/article/responsive‐web‐design

11. RWD – simple example
0 http://markdubois.me/RWDEx01

12. RWD – code
0 http://markdubois.me/RWDEx01
0 HTML
0 CSS
<img class="respImg" src="orchid.jpg" />
img {
display:block;
margin‐left: auto;
margin‐right: auto;
}
.respImg {
width:66%;
}

13. RWD – Text Example
0 http://markdubois.me/RWDEx02

14. #sidebar {
width:22.1763598%;
….
float:left;
}
#content {
width:77.8236402%;
…
float:right;
}
RWD – code
0 http://markdubois.me/RWDEx02
0 HTML
0 CSS
<div id="wrapper">
<div id="sidebar"><p>…</p>
<div id=“content”><p>…</p>
#wrapper {
display:block;
margin‐left: auto;
margin‐right: auto;
width:90%;
}
#wrapper {
display:block;
margin‐left: auto;
margin‐right: auto;
width:90%;
}

15. DIY
0 Probably want an underlying grid system
0 Consider Heroku variable grid system as example

16. DIY (2)
0 Develop solid understanding of how fluid grids work
in RWD
0 Good starting article

17. DIY (3)
0 This can get complex quickly
0 85 responsive design tools article

18. Retrofit Existing Websites
Pro Con
0 Single code base
0 One URL @ page
0 Adapts to various
screen sizes
0 May have heavy,
slow loading pages
0 May have to make
significant changes
to existing websites
0 Often have to
decide what to
leave out for
phones

19. RWD – simple example
0 http://markdubois.me/RWDEx01
0 Extreme example – larger photo ~ 4 sec
0 Want higher res for retina displays
0 Contrast with quick loads on mobile

20. Media Queries
0 Typically write CSS for desktop, tablet, phone
0 If starting anew – think mobile first (limited space and
UX)
0 Have to create separate CSS documents
<!– Phone ‐‐>
<link href="phone.css" rel="stylesheet" type="text/css" media="only
screen and (max‐width:320px)">
<!‐‐ Tablet ‐‐>
<link href="tablet.css" rel="stylesheet" type="text/css" media="only
screen and (min‐width:321px) and (max‐width:768px)">
<!‐‐ Desktop ‐‐>
<link href="desktop.css" rel="stylesheet" type="text/css"
media="only screen and (min‐width:769px)">

21. Issues
0 Code can grow complex rapidly
0 Really good idea to have valid code
0 SEO
0 Accessibility

22. Tools ?

23. Dreamweaver CS6
0 http://creative.adobe.com
0 File > New Fluid Grid Layout

24. Initial File
0 Desktop

25. Initial File
0 Phone

26. Adding new items
0 Insert > Div
0 Result

27. Define for @
0 Tablet
0 Phone

28. DW CS6 demo

29. Example Page
0 This was created entirely in design view in DW
0 Page contains links to sites mentioned during this
presentation.
0 http://markdubois.me/RWDEx03

30. Alternate tool
0 Edge Reflow (recent release) – works best for Chrome
browser

31. Edge Reflow
0 http://html.adobe.com/edge/reflow/ ‐ preview

32. Edge Reflow
0 http://html.adobe.com/edge/reflow/ ‐ preview

33. Edge Reflow
0 http://html.adobe.com/edge/reflow/ ‐ preview
0 Features:
0 Set pins for various screen sizes (media queries)
0 Layout and styling tabs
0 Web fonts
0 Grouping objects
0 CSS‐3 enhancements (apply properties to all regions)
0 Inspection tools
0 Preview in Chrome (only for now)

34. RWD
0 http://creative.adobe.com
0 Questions?
Please use question pod
@Mark_DuBois (twitter)
Mark@WebProfessionals.org

35. Slides
http://markdubois.me/2013Apr30