RWD
RWD
Mobile
0 Many people access your website via smartphones
It is 2013?
0 Which sites would you prefer to visit? Be quick!
or
123
Splinternet ?
0 Consider Android mid2012 [ 3,997 distinct devices ]
Education
0 I teach CMWEB 280 Multiscreen
0 First 3 weeks we focus on the fundamentals
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
Responsive Design
0 http://alistapart.com/article/responsivewebdesign
RWD code
0 http://markdubois.me/RWDEx01
0 HTML
<img class="respImg" src="orchid.jpg" />
0 CSS
img {
display:block;
marginleft: auto;
marginright: auto;
}
.respImg {
width:66%;
}
RWD code
0 http://markdubois.me/RWDEx02
0 HTML
0 CSS
<div id="wrapper">
<div id="sidebar"><p></p>
<div id=content><p></p>
#sidebar {
width:22.1763598%;
.
float:left;
}
#content {
width:77.8236402%;
float:right;
}
#wrapper {
display:block;
marginleft: auto;
marginright: auto;
width:90%;
}
DIY
0 Probably want an underlying grid system
0 Consider Heroku variable grid system as example
DIY (2)
0 Develop solid understanding of how fluid grids work
in RWD
DIY (3)
0 This can get complex quickly
0 85 responsive design tools article
screen sizes
Con
0 May have heavy,
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
Issues
0 Code can grow complex rapidly
0 Really good idea to have valid code
0 SEO
0 Accessibility
Tools ?
Dreamweaver CS6
0 http://creative.adobe.com
0 File > New Fluid Grid Layout
Initial File
0 Desktop
Initial File
0 Phone
0 Result
Define for @
0 Tablet
0 Phone
DW CS6 demo
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
Alternate tool
0 Edge Reflow (recent release) works best for Chrome
browser
Edge Reflow
0 http://html.adobe.com/edge/reflow/ preview
Edge Reflow
0 http://html.adobe.com/edge/reflow/ preview
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 CSS3 enhancements (apply properties to all regions)
0 Inspection tools
0 Preview in Chrome (only for now)
RWD
0 http://creative.adobe.com
0 Questions?
@Mark_DuBois (twitter)
[email protected]
Slides
http://markdubois.me/2013Apr30