Responsive & Adaptive Web Design

Responsive DesignTopic :
Milan AdamovskyPresenter :
05 / 30 / 2013Date :
http://milan.adamovsky.comBlog :
milan.adamovsky@gmail.comEmail :

7/2/2013 Prepared & Presented by Milan Adamovsky 2
• Fixed
• Fluid
• Elastic
• Accessible
• Responsive
• Adaptive
Design Evolution
Paradigm Adoption
• Static

• Content pushed inline
• Pixels
• Nothing resizes
• No specifics
• Minimum 640px width
Fixed Positions
Fixed Dimensions
• Nothing repositions
• Pixels
• System agnostic
• Simplest implementation
Considerations
• Browser agnostic

• Fixed
• Fluid
• Elastic
• Accessible
• Responsive
• Adaptive
Design Evolution
Paradigm Adoption
• Static
960

7/2/2013
Prepared & Presented by Milan
Adamovsky
5
• Fixed
• Fluid
• Elastic
• Accessible
• Responsive
• Adaptive
Design Evolution
Paradigm Adoption
• Static

• Floated
• No explicit resizing
• Predecessor to responsive
• Keep information visible
• Width agnostic
Elements
Purpose
• Shifts according to container
• Mobile friendly
• Avoid fixed content
• Less predictable
Considerations
• Mix with elastic design
• Supported in all browsers

• Fixed
• Fluid
• Elastic
• Accessible
• Responsive
• Adaptive
Design Evolution
Paradigm Adoption
• Static
% %

• Fixed
• Fluid
• Elastic
• Accessibility
• Responsive
• Adaptive
Design Evolution
Paradigm Adoption
• Static

• Fixed
• Fluid
• Elastic
• Accessible
• Responsive
• Adaptive
Design Evolution
Paradigm Adoption
• Static

• Do not use JavaScript
• Only use CSS engine
• No hidden cheat markup
• Keep page lightweight
• No markup regeneration
Dos & Don’ts
• Reuse same markup
• Use @media queries
• Speed is key
• Not same as adaptive
Reminders
• @import downloads files
• Not supported < IE9
• Use @import at-rule
• Mobile first
• Use min-width

• Fixed
• Fluid
• Elastic
• Accessible
• Responsive
• Adaptive
Design Evolution
Paradigm Adoption
• Static

• Do not use JavaScript
• Only use CSS engine
• No hidden cheat markup
• Keep page lightweight
• No markup regeneration
Dos & Don’ts
• Different markup per device
• Use server-side logic
• Keep CSS minimal
• Keep JS minimal
Reminders
• Keep markup minimal
• Supported in all browsers
• Only target given device
• Mobile first

• Progressively enhance
• Use of CSS3
• Use of @media
• Fluid grids *
• EMs *
Responsive Design Basics
• Minimum widths
• Flexible images
• Respond to any device
• Respond to any width
Idea
• Ethan Marcotte
* Optional
• Flexible videos
• Fluid type *

Graceful Degradation Example
@media screen and (max-width: 320px)
{
body
{
background-color: #fff;
}
}
@media screen and (max-width: 480px)
{
body
{
background-color: #000;
}
}

Progressive Enhancement Example
@media screen and (min-width: 0px)
{
body
{
}
}
@media screen and (min-width: 320px)
{
body
{
}
}

CSS File Override
0 320 480 600 992 1382
Design Benefits
• Progressively add styles as they are needed for given min-width
• Use the zero min-width as the site’s base style
• Prevents heavier device styles from loading in lighter devices
• Promote a disciplined style management culture to avoid bloat

• What do you need ?
• What do you want ?
Stop & Think
• What’s best for you ?
• What to leverage ?
• What device support ?
• Borrows responsive concepts
• Borrows elastic concepts
• Borrows fluid concepts
• Does not rely on grids
• Does not rely on EMs
Our Solution
• Borrows adaptive concepts
• Uses assembler
• Uses minifier
• Uses global include function

File Hierarchy
• Router CSS file *
• Two tiers
• Section filenames
http://www.com/contact/index.html
Section: contact
First Tier
• min-width
Second Tier
• max-width

Typical Section CSS File
• Proper order
• No media queries
• Min-width CSS only
Section: contact
Min-width: 320
selector
{
property: value;
}
.some_class
{
property: value;
}
• Allow overrides
Design Benefits
• Cache server support
• IE8 and older support
• Mobile desktop ready

Min-width: 0
div
{
border: 1;
}
Min-width: 480
div
{
border: 3;
}
Min-width: 768
div
{
border: 5;
}

Router CSS File @import url(global.css);
@import url(footer.css);
@import url(header.css);
@media … min-width: 320px
@import url(320/contact.css);
@media … min-width: 480px;
@import url(600/footer.css);
@import url(600/header.css);
@import url(992/footer.css);
@import
url(1382/contact.css);
• Manages media queries
• Contains media cut-offs
• One router per section
• Adaptive ready
• Dependency overview
• Clean separation
Major Disadvantage
• All files download

Media Query Begin Files
• Section agnostic
• Only one media query
• No closing brace
@media only screen and (min-width: 320px)
{
Media Query End Files
• Only a closing brace
}

@media only screen and (min-width: 320px)
{
}
File: /@media/320
File: /320/contact.css
File: /@media/end
body
{
}

@media only screen and (min-width: 320px) and (max-width: 480px)
{
}
File: /@media/320/480
File: /320/480/contact.css
File: /@media/end
body
{
}

Homepage: https://github.com/buunguyen/combres
Configuration: XML
Integration: ASP.NET
Assemblers
• Combres
Homepage: http://www.gruntjs.com
Configuration: JavaScript
Integration: Command-line, NodeJS
• GruntJS

Phone
Tablet
Desktop
Full
Responsive
Adaptive

File Hierarchy
• Optional temp folder
• Three tiers
Section: contact
First Tier
• Paradigm
Second Tier
• Buckets
Third Tier
• CSS files
Buckets: phone, tablet
desktop, full

• Bucket number is arbitrary
• Bucket always pre-built
Noteworthy
• Buckets are arbitrary
• Tablet builds on Phone
• Phone builds on “base”
• Full builds on all
• Full has no @media queries
• Assembler pre-builds all files
Workflow Logic
• Desktop builds on Tablet
• Device is resolved
• Device is passed to function
• Function include pre-built file

Lifecycle
Request Cache Server Web Server Web Page
User Agent Device Type
Phone
Tablet
Desktop
Full
CSS Files includeCSS()
Pre-build

function includeCSS(section)
{
html csshtml;
string x = "adaptive/" + request.device + "/" + section + ".css";
csshtml = "<link href=' + x + ' rel='stylesheet' type='text/css'>";
return csshtml;
}
Include Function
• Takes one parameters
• Included on every page
• Returns link markup
• PHP, ASP, JSP, SSI, etc.
Achieved Goals
• No flicker
• Do not rely on JavaScript
• No copy & paste
• Central maintenance

function includeCSS(section)
{
html csshtml;
string device = querystring["device"] || request.device;
string x = "adaptive/" + device + "/" + section + ".css";
csshtml = "<link href=' + x + ' rel='stylesheet' type='text/css'>";
return csshtml;
}
Optional Improvement
• Ideal for testing
• Force device type
Usage
• Append ?device= to URL

Mobile Scaling
<meta name="viewport"
content="width=device-width,
initial-scale=1.0,
maximum-scale=1.0">
html
{
-webkit-text-size-adjust: 100%;
}
• iPhone doesn’t
• Android auto-scales
• Do not use ; delimiter[1]
• Use constants
• Play with options
HTML: Auto-scale
CSS: Text inflation
Text Inflation
• Not standardized
• Never use none
• Opt-out not in
text-size-adjust
-moz-text-size-adjust
-ms-text-size-adjust

Text Inflation

7/2/2013
Prepared & Presented by Milan
Adamovsky
35
• Less custom
• More uniform
• More predictable
• Responsive Ready
• Percentage based
Grid Architecture
• Interval spacing
• More maintainable
• Think in columns
• Often 12-column

• Market traction
Grid Systems
• Do not reinvent the wheel
• Align business to think in grid
• Grid System Generator (http://www.gridsystemgenerator.com)
Tools
• Scaffolding (http://twitter.github.io/bootstrap/scaffolding.html)
• 960 Grid System (http://www.960.gs)

Elastic Images <img src=somepic.jpg>
img
{
max-width: 100%;
}
• Image element
• Resize proportionally
• Background sprites: no
• Foreground sprites: yes
resize
• Percentage of container
Implementation
• Can be any percentage
• Extremely easy
• Observe pixelation

Elastic Sprite Example <div id=logo_container>
<div id=logo_content>
</div>
</div>
#logo_container
{
position: relative;
}
#logo_content
{
background-image: url(..);
background-position: 50% 0;
background-repeat: no-
repeat;
background-size: 100% auto;
display: block;
padding-top: 50%;
width: 100%;
}
• Sprite is content
• Always use container
• Positioned container
• Normal sprite
• Width is required
• Padding defines height
Practical Use
• Replaces elastic image

Internet Explorer Support

Notice
• JavaScript based shim
• Doesn’t work with @import
• Works on IE5+ • Buggy
• Use sparingly, if at all

Bing SEO *
By outputting only one URL for the same content, you will have the following benefits:
1. You have more ranking signals coming to this URL. Example: the vast majority of mobile URLs do not have inbound links from other websites
as people do not link to mobiles URLs like they link to regular web-situated URLs.
2. This is also less search engine crawler traffic coming to your web servers, which is especially useful for large websites. Fewer URLs to crawl
reduces the bandwidth our crawlers consume.
3. Less work (and potentially less cost) building, updating and maintaining a stand-alone mobile-focused website.
Now that you have a single URL for each piece of your content, how do you optimize your website for different platforms?
1. By performing client browser detection (user agent, customer preferences, etc.), you can still optimize the display for the device your
customers are using. This topic is presented in detail in the document Designing Web Sites for Phone Browsers; please note that this
document does touch briefly on the subject of redirection to alternate URLs for mobile content, which is not the approach we recommend for
best SEO results.
Google SEO *
Google supports smartphone-optimized sites in three configurations:
1. Sites that use responsive web design, i.e. sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all
devices and using just CSS to change how the page is rendered on the device. This is Google's recommended configuration.
2. Sites that dynamically serve all devices on the same set of URLs, but each URL serves different HTML (and CSS) depending on whether the
user agent is a desktop or a mobile device.
3. Sites that have separate mobile and desktop URLs.

Mobile Tester
Mobile Resizer
Useful Testing Tools
• Chrome Browser Add-ons
Web Developer
• FireFox Browser Add-ons
Keynote DeviceAnywhere (http://www.deviceanywhere.com)
• Device Emulators
AppThwack (https://appthwack.com)
MobilePhoneEmulator (http://www.mobilephoneemulator.com)

1. Extrapolate all media query blocks into their own files
2. File these files into their respective folders
3. Make minor adjustments
Conversion Questions
• How do I convert our scattered responsive implementation ?
1. Dump your old file into a 0/legacy.css
3. Gradually extrapolate sections into respective files
4. Remove legacy.css
• How do I convert our non-responsive implementation ?
2. Include 0/legacy.css as your global base

Responsive & Adaptive Web Design

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (10)

Similar a Responsive & Adaptive Web Design

Similar a Responsive & Adaptive Web Design (20)

Último

Último (20)

Responsive & Adaptive Web Design