Scribd
Upload
28 views36 pages

RWD

The document discusses responsive web design and strategies for creating websites that adapt to different screen sizes and devices. It covers terminology, examples of responsive design techniques using CSS media queries and fluid grids, and tools for creating responsive websites like Dreamweaver and Edge Reflow.

Uploaded by

athenaartemis
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
28 views36 pages

RWD

The document discusses responsive web design and strategies for creating websites that adapt to different screen sizes and devices. It covers terminology, examples of responsive design techniques using CSS media queries and fluid grids, and tools for creating responsive websites like Dreamweaver and Edge Reflow.

Uploaded by

athenaartemis
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 36

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/

It is 2013?
0 Which sites would you prefer to visit? Be quick!

or

123

Screen resolution should be optimized for???

Splinternet ?
0 Consider Android mid2012 [ 3,997 distinct devices ]

Short URL to original article http://markdubois.me/DroidFragment

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 Web Design


0 Philosophy and development strategy
0 Multiscreen/ postPC 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)

RWD early page


0 http://alistapart.com/article/responsivewebdesign

Responsive Design
0 http://alistapart.com/article/responsivewebdesign

RWD simple example


0 http://markdubois.me/RWDEx01

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 Text Example


0 http://markdubois.me/RWDEx02

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

0 Good starting article

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

Retrofit Existing Websites


Pro
0 Single code base
0 One URL @ page
0 Adapts to various

screen sizes

Con
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

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

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 (maxwidth:320px)">
<! Tablet >
<link href="tablet.css" rel="stylesheet" type="text/css" media="only
screen and (minwidth:321px) and (maxwidth:768px)">
<! Desktop >
<link href="desktop.css" rel="stylesheet" type="text/css"
media="only screen and (minwidth:769px)">

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

Adding new items


0 Insert > Div

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?

Please use question pod

@Mark_DuBois (twitter)
[email protected]

Slides
http://markdubois.me/2013Apr30

You might also like