Top Banner
Thursday, December 6, 10:15 a.m. Hub Tag: #tech12 LK2 Thomas Kugler, John Mills Being Responsive to Responsive Web Design
30

Being Responsive to Responsive Web Design

Jul 16, 2015

Download

Design

Thomas Kugler
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Being Responsive to Responsive Web Design

Thursday, December 6, 10:15 a.m.

Hub Tag: #tech12 LK2

Thomas Kugler, John Mi l ls

Being Responsive

to Responsive

Web Design

Page 2: Being Responsive to Responsive Web Design

• Thomas Kugler: Website Administrator,

ASAE(1/11–present, with prior contract assignment 9/10–1/11)

• Work with team on Web Strategies, Information

Architecture, Content Planning, Social Media;

Design & Develop; Innovate

• Former ASAE web colleague of John Mills,

co-Technology Idea Labs leader“Good design is problem-solving”

Who We Are#TECH12 LK2

Page 3: Being Responsive to Responsive Web Design

• John Mills: Web Manager for PMMI

– (8 years in the association world overall)

• Design, content, video, narration, social

spaces are how and where I live.

• Off-hours: Occasionally pretending I'm a

Jedi.

Who We Are#TECH12 LK2

Page 4: Being Responsive to Responsive Web Design

What is Responsive Web

Design (RWD)?In a nutshell…An approach where

a site is optimized for easy

reading and navigation across a

wide range of devices

In other words—one website,

delivered differently for different

media

Page 5: Being Responsive to Responsive Web Design

You Are

Designing

For…?

Source: http://blog.nielsen.com/nielsenwire/wp-content/uploads/2012/11/Holiday-Devices-K6-12.png

Page 6: Being Responsive to Responsive Web Design

• Keeping your

focus on your

current

audience

The Balancing Act

• Planning for the

future: audience,

membership, devices

Responsive Design is the

Means to Accomplish Both

Page 7: Being Responsive to Responsive Web Design

Apps Do It All !

The Myth of Apps

Page 8: Being Responsive to Responsive Web Design

Apps Don’t Do It All !

The Truth of Apps

They are part of a digital ecosystem, all things interdependent and playing a part in a bigger

picture.

Page 9: Being Responsive to Responsive Web Design

Apps do one thing (or set of things) very well

Apps are often for a pre-existing audience

(Esp. in case of associations)

The Truth of Apps

Apps involve effort, updates, multi-platform iOS, Android, Blackberry, Windows—all separate apps

Page 10: Being Responsive to Responsive Web Design

• They’re not exciting

• People don’t expect much

• Apps are more important

• Less important than social

• HTML5 the wonder tool

The Myths of the Web

Page 11: Being Responsive to Responsive Web Design

• The Universal Portal• Draw people in – Your Web audience is the World

• Sell yourself to potential members

– Your knowledge and value examples are “out there”

– No need to download

– SEO

» People find things through Google, Social Media –

they don’t send links to apps

The Truths of the Web

Page 12: Being Responsive to Responsive Web Design

The Truths of the Web

• So Why Responsive and not “M”?

– The dreaded “M dot subdomain”

• Technical:

– Device detection redirects can have unwanted

consequences

– Performance lag for redirects

– Redirects and subdomains - device handlers - add a

layer of unnecessary work and maintenance

Page 13: Being Responsive to Responsive Web Design

• So Why Responsive and not “M”?• Practical:

– A parallel site is not good for SEO

– Give people ONE URL as a resource

– Cost. Why develop twice what you can develop once?

– A funny little story about a big misunderstanding: When

someone left a responsive site directly to a site with

“mobile detect.”

Why Responsive Design

Matters

Page 14: Being Responsive to Responsive Web Design

– Two upstart search engines recommend it:

• recommends responsive...

– http://googlewebmastercentral.blogspot.com/2012/06/rec

ommendations-for-building-smartphone.html

• ...and so does

– http://www.bing.com/community/site_blogs/b/webmaster/

archive/2012/03/07/building-websites-optimized-for-all-

platforms-desktop-mobile-etc.aspx

Why Responsive Design

Matters

Page 15: Being Responsive to Responsive Web Design

• We’ve been in a mobile world long enough to

start making real content strategy changes • Obama and Romney campaigns both struggled with

mobile content delivery:

http://mobile.smashingmagazine.com/2012/08/22/separat

e-mobile-responsive-website-presidential-smackdown/

• Attention Adjustments

Responsive Design and

Content Strategy

And now…

Icons source: http://www.iconarchive.com/

Page 16: Being Responsive to Responsive Web Design

• Boston Globe • http://www.bostonglobe.com/

• Mobile-first thinking

• Drag and resize the window to see RWD in “action”

The Future is Now

Page 17: Being Responsive to Responsive Web Design

• The Information

Accessibility Revolution• Your site and your content

should be equally accessible

to all devices

• Responsive is a part of this.

• Congress.gov– Note that this is a Beta site – it’s OK to

be iterative!

Even Congress Is On

Board…

Page 18: Being Responsive to Responsive Web Design

What is Responsive Web

Design (RWD)?An approach to web design in which a site is

crafted to provide an optimal viewing experience—

easy reading and navigation with a minimum of

resizing, panning, and scrolling—across a wide

range of devices (from desktop computer monitors

to mobile phones)

Wikipediahttp://en.wikipedia.org/wiki/Responsive_web_design

Page 19: Being Responsive to Responsive Web Design

ASAE Techno logy Confe rence 2012 Webs i te

Page 20: Being Responsive to Responsive Web Design

The 3 Building Blocks of

Responsive Web Design

(RWD):

• Fluid Grids

• Flexible Images

• Media Queries

Page 21: Being Responsive to Responsive Web Design

Fluid Grids: Ta r g e t ÷ C o n t e x t = R e s u l t

# c o n t a i n e r { w i d t h : 9 9 0 p x } = 1 0 0 %

# l e f t2 5 5 p x ÷ 9 9 0 p x =

25.7575757575758%

# r i g h t 7 0 0 p x ÷ 9 9 0 p x =

70.7070707070707%

# s o c i a l 2 0 5 p x ÷ 7 0 0 p x =

29.2857142857143%

# c o n t e n t4 1 0 p x ÷ 7 0 0 p x =

58.5714285714286%

Margins are also expressed in percentages:

#left { margin-left: 03.030303030303% } /* 30px ÷ 990px */ (Percentages are relative,

#social { margin-right: 0.021428571428571% } /* 15px ÷ 700px */ pixels are absolute.)

Page 22: Being Responsive to Responsive Web Design

Fluid Grids (p .2 )Ta r g e t ÷ C o n t e x t = R e s u l t ( p . 2 )

Type—Ems vs. Pixels 16px = default cross-browser font-size

h3 { font-size: 1.25em; /* 20px ÷16px */

margin-bottom: 0.9em; } /* 18px ÷ 20px */

h4 { font-size: 0.875em; /* 14px ÷ 16px */

margin-bottom: 0.857142857142857em;} /* 12px ÷ 14px */

p, li {font-size: 0.75em; /* 12px ÷ 16px */

line-height: 1.5em; /* 18px ÷ 12px */

margin-bottom: 1.5em;} /* 18px ÷ 12px */

Type will scale proportionately within various device sizes

Ems are relative, pixels are absolute

Page 23: Being Responsive to Responsive Web Design

Fluid Grids (p .3 )S c r e e n D i m e n s i o n s — w i d t h s a r e b r e a k p o i n t s f o r M e d i a Q u e r i e s

Desktop / Laptop 1200 x 1024

iPad Landscape 1024 x 768

Small Laptop 800 x 600

iPad Portrait 768 x 1024

iPod Touch 640 x 960

Kindle 600 x 800

iPhone Landscape 480 x 320

iPhone Portrait 320 x 480

(note—these are only the most-used screens; there are many other devices with many different

dimensions)

Page 24: Being Responsive to Responsive Web Design

Flexible Images

img {max-width: 100%;

height: auto;}

Prevents images from exceeding the width of their container.

The container’s width must therefore be clearly defined.

There are many more parameters involved in advanced image preparation, but

this CSS declaration covers a lot.

Page 25: Being Responsive to Responsive Web Design

Media QueriesDesktop / Laptop 1200 x 1024

• Declare Desktop/Laptop (standard) styles first

• Declare Responsive Styles last, from largest to smallest screen size

Examples:

@media screen and (max-width: 600px ) { #dateplace, #right, #content, #content.home, #content.inner, #mobileTopnav, #back, #mobileUtility, #mobilePartners { width: 560px; } }

@media screen and (max-width: 480px ) { #dateplace, #right, #content, #content.home, #content.inner, #mobileTopnav, #back, #mobileUtility, #mobilePartners { width: 440px; } }

@media screen and (max-width: 320px ) { #dateplace, #right, #content, #content.home, #content.inner, #mobileTopnav, #back, #mobileUtility, #mobilePartners { width: 280px; } #content p { clear: both; } }

Page 26: Being Responsive to Responsive Web Design

M o b i l e F i r s t & R e s p o n s i v e We b D e s i g n B u n d l e ,

f r o m A B o o k A p a r t

Page 27: Being Responsive to Responsive Web Design

C o n t e n t S t r a t e g y f o r M o b i l e ,

f r o m A B o o k A p a r t

Page 28: Being Responsive to Responsive Web Design

• A Book Apart http://www.abookapart.com/

• Luke Wroblewski (@lukew on Twitter,

http://www.lukew.com)

• Don’t Make Me Think (A “Classic”)

• Revisit your own assumptions

• Treehouse http://teamtreehouse.com/

• Your members

– Site analytics, Feedback, ASK them

Important Resources

Page 29: Being Responsive to Responsive Web Design

What did we miss?

What else do you want to know?

Are you as excited as we are for the future?

Questions

Page 30: Being Responsive to Responsive Web Design

John Mills

[email protected]

@kesseljunkie

Thank You

Thomas Kugler

[email protected]

@tom8gem