Responsive DesignTopic :Milan AdamovskyPresenter :05 / 30 / 2013Date :

http://milan.adamovsky.comBlog :milan.adamovsky@gmail.comEmail :

04/10/2023 2Prepared & Presented by Milan Adamovsky

• Fixed

• Fluid

• Elastic

• Accessible

• Responsive

• Adaptive

Design Evolution

Paradigm Adoption

• Static

04/10/2023 3Prepared & Presented by Milan Adamovsky

• 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

04/10/2023 4Prepared & Presented by Milan Adamovsky

• Fixed

• Fluid

• Elastic

• Accessible

• Responsive

• Adaptive

Design Evolution

Paradigm Adoption

• Static

960

04/10/2023 5Prepared & Presented by Milan Adamovsky

• Fixed

• Fluid

• Elastic

• Accessible

• Responsive

• Adaptive

Design Evolution

Paradigm Adoption

• Static

04/10/2023 6Prepared & Presented by Milan Adamovsky

• 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

04/10/2023 7Prepared & Presented by Milan Adamovsky

• Fixed

• Fluid

• Elastic

• Accessible

• Responsive

• Adaptive

Design Evolution

Paradigm Adoption

• Static

% %

04/10/2023 8Prepared & Presented by Milan Adamovsky

• Fixed

• Fluid

• Elastic

• Accessibility

• Responsive

• Adaptive

Design Evolution

Paradigm Adoption

• Static

04/10/2023 9Prepared & Presented by Milan Adamovsky

• Fixed

• Fluid

• Elastic

• Accessible

• Responsive

• Adaptive

Design Evolution

Paradigm Adoption

• Static

04/10/2023 10Prepared & Presented by Milan Adamovsky

• 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

04/10/2023 11Prepared & Presented by Milan Adamovsky

• Fixed

• Fluid

• Elastic

• Accessible

• Responsive

• Adaptive

Design Evolution

Paradigm Adoption

• Static

04/10/2023 12Prepared & Presented by Milan Adamovsky

• 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

04/10/2023 13Prepared & Presented by Milan Adamovsky

• 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 *

04/10/2023 14Prepared & Presented by Milan Adamovsky

Graceful Degradation Example

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

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

04/10/2023 15Prepared & Presented by Milan Adamovsky

Progressive Enhancement Example

@media screen and (min-width: 0px) { body { background-color: #fff; } }

@media screen and (min-width: 320px) { body { background-color: #000; } }

04/10/2023 16Prepared & Presented by Milan Adamovsky

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

04/10/2023 17Prepared & Presented by Milan Adamovsky

• 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

04/10/2023 18Prepared & Presented by Milan Adamovsky

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

04/10/2023 19Prepared & Presented by Milan Adamovsky

Typical Section CSS File

• Proper order

• No media queries

• Min-width CSS only

http://www.com/contact/index.html

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

04/10/2023 20Prepared & Presented by Milan Adamovsky

Min-width: 0

div { border: 1; }

Min-width: 480

div { border: 3; }

Min-width: 768

div { border: 5; }

04/10/2023 21Prepared & Presented by Milan Adamovsky

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(480/contact.css);

@media … min-width: 600px; @import url(600/contact.css); @import url(600/footer.css); @import url(600/header.css);

@media … min-width: 768px; @import url(768/contact.css);

@media … min-width: 992px; @import url(992/contact.css); @import url(992/footer.css);

@media … min-width: 1382px; @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

04/10/2023 22Prepared & Presented by Milan Adamovsky

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

}

04/10/2023 23Prepared & Presented by Milan Adamovsky

@media only screen and (min-width: 320px) {

}

File: /@media/320

File: /320/contact.css

File: /@media/end

body { background-color: #000; }

04/10/2023 24Prepared & Presented by Milan Adamovsky

@media only screen and (min-width: 320px) and (max-width: 480px) {

}

File: /@media/320/480

File: /320/480/contact.css

File: /@media/end

body { background-color: #fff; }

04/10/2023 25Prepared & Presented by Milan Adamovsky

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

04/10/2023 26Prepared & Presented by Milan Adamovsky

Phone

Tablet

Desktop

Full

Responsive

Adap

tive

04/10/2023 27Prepared & Presented by Milan Adamovsky

File Hierarchy

• Optional temp folder

• Three tiers

http://www.com/contact/index.html

Section: contact

First Tier

• Paradigm

Second Tier

• Buckets

Third Tier

• CSS files

Buckets: phone, tablet

desktop, full

04/10/2023 28Prepared & Presented by Milan Adamovsky

• 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

04/10/2023 29Prepared & Presented by Milan Adamovsky

Lifecycle

Request Cache Server Web Server Web Page

User Agent Device Type

Phone

Tablet

Desktop

Full

CSS Files includeCSS()

Pre-build

04/10/2023 30

function includeCSS(section) { html csshtml; string x = "adaptive/" + request.device + "/" + section + ".css";

csshtml = "<link href=' + x + ' rel='stylesheet' type='text/css'>"; return csshtml; }

Prepared & Presented by Milan Adamovsky

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

04/10/2023 31

<link href="adaptive/tablet/contact.css" rel="stylesheet" type="text/css">

Prepared & Presented by Milan Adamovsky

Include Function Example

<% includeCSS('contact');%>

Function Output

04/10/2023 32

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; }

Prepared & Presented by Milan Adamovsky

Optional Improvement

• Ideal for testing

• Force device type

Usage

• Append ?device= to URL

04/10/2023 33Prepared & Presented by Milan Adamovsky

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

04/10/2023 34Prepared & Presented by Milan Adamovsky

Text Inflation

04/10/2023 35Prepared & Presented by Milan Adamovsky

• Less custom

• More uniform

• More predictable

• Responsive Ready

• Percentage based

Grid Architecture

• Interval spacing

• More maintainable

• Think in columns

• Often 12-column

04/10/2023 36Prepared & Presented by Milan Adamovsky

• 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)

04/10/2023 37Prepared & Presented by Milan Adamovsky

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

04/10/2023 38Prepared & Presented by Milan Adamovsky

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

04/10/2023 39Prepared & Presented by Milan Adamovsky

Internet Explorer Support

<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/ svn/trunk/css3-mediaqueries.js"></script><![endif]-->

Notice

• JavaScript based shim

• Doesn’t work with @import

• Works on IE5+ • Buggy

• Use sparingly, if at all

04/10/2023 40Prepared & Presented by Milan Adamovsky

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?

4. 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.

04/10/2023 41Prepared & Presented by Milan Adamovsky

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)

04/10/2023 42Prepared & Presented by Milan Adamovsky

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