Use arrow keys (← →) to browse.

Responsive Web Design


October 10, 2012.

Today's Agenda

Introductions

Shameless Self-Promotion by the Presenters

What is "Responsive Design?

The Good Old Days

Source: Apple Inc. a long long time ago.

The New Normal

Source: ecentricarts Inc.

"Not Considering Responsive" or "Ignoring Mobile Traffic"

A Naff Idea Because...

Responsive Design to the Rescue

Approaches to Responsive Design

Three Main Ingredients

By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself.
W3C

Media Queries

Media Queries in CSS 3

Media Queries in CSS 3

Media Queries in CSS 3

Fluid Layout / Grids

Fluid Media

Design Considerations

Putting the Design in Responsive Design

Source: Adobe Inc. (James Mellers)

Available Tools and Frameworks

It's what some of us were going for with "liquid" web design back in the 1990s, only it doesn't suck.
Jeffrey Zeldman

HTML5 for Web Designers Available free online

Start with HTML5

Flexible Grids

CSS Grid Systems

Flexible Media

<video> and <audio> tags - Apple's Siege and Flash's Last Stand
Web Fonts

CSS3 progressive enhancment

Enhance your site design using the wide range of CSS3 styles and effects.

Designers Top 5 Time Wasters for Front-End Developers

Javascript

Polyfills and Older Browser Support

Javascript

jQuery Responsive enabled Plugins

Inspiration

Don't Just Resize Your Browser

New Kentico CMS 7 Mobile Features

Turn the Features On!

Mapped Shared Layouts

Page Layouts for Devices

Conditional Templates

<cms:CMSConditionalLayout
    runat="server"
    id="ipadHero"
    GroupName="pageHero"
    VisibleForDeviceProfiles="ipad"
>
    <div>
        IPAD ONLY HTML
    </div>
</cms:CMSConditionalLayout> 
                        

All of these features rely on server side device detection.

A hybrid approach?

RESS Demo

To respond, or not to respond. That is the question.

The Many Approaches to Mobile

Native Application

Tempting, if...

Mobile Sub-Site

Tempting, if...

Responsive Design

Tempting, if...

In Conclusion...

Q & A

Bring on the purists, skeptics     :-)