Responsive Design

RESPONSIVE DESIGNRecent work, current trends, and future capabilities

Overview

• Fundamentals of web development– HTML– CSS– Javascript

• Cross Browser / Platform– Graceful Degradation– Progressive Enhancement

• What’s New– HTML5– CSS3– Responsive Web– Hardware features

What do you want me to do? LEAVE? Then they'll keep being wrong!

WHAT WE DOTake creative and turn it into interactive websites

How?

HTML

JavascriptCSS

Sure, there is more, but let’s keep this simple…

HTML

HTML is a language for describing web pages.

• HTML stands for Hyper Text Markup Language• HTML is not a programming language, it is

a markup language• A markup language is a set of markup tags• The purpose of the tags are to describe page

content

Referenced from weschools.com

HTML




content

<h1> </h1>


HTML




content

<p> </p>


HTML




content

<ul>

</ul>

<li>

<li>

<li>

<li>

</li>

</li>

</li>

</li>


HTML




content

<h1> </h1>

CSS (Cascading Style Sheets) define how to display HTML elements


HTML




content

<h1> </h1>


h1 { font-family: Times, serif;}


HTML




content

<h1> </h1>


h1 { font-family: Times, serif; font-weight: bold;}


HTML




content

<h1> </h1>


h1 { font-family: Times, serif; font-weight: bold; color: blue;}


Javascript

• JavaScript is THE scripting language of the Web.

• JavaScript is used in billions of Web pages to add functionality, validate forms, communicate with the server, and much more.

• …we’ll leave it at that.


Result

HTML

JavascriptCSS

Sure, there is more, but let’s keep this simple…

Webpage

NEW TRENDSTranslating ‘buzz words’

HTML5Header Menu Video Footer

For more information, visit http://www.w3schools.com/html5

http://www.w3schools.com/html5



<header> </header>




<menu> </menu><li> <li></li> <li></li> <li></li> </li>




<video> </video>



For more information, visit http://www.w3schools.com/html5<footer> </footer>


CSS3

CSS3Rounded Borders

-webkit-border-radius: 50px;border-radius: 50px;

CSS3Gradients

background: linear-gradient(top, #93cede 0%,#49a5bf 100%);background: -moz-linear-gradient(top, #93cede 0%, #49a5bf

100%);

CSS3Dropshadows

-webkit-box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, .3); box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, .3);

CSS3@Font Face {

font-family: 'HarlowSolidItalic'; src: url(‘harlow_solid_italic.eot');

CSS3Transitions

-webkit-transition: all 500ms ease-in-out;transition: all 500ms ease-in-out;

WEB STANDARDSGood web development

DIFFERENT BROWSERS HAVE DIFFERENT CAPABILITIES

Why IE is the subject of developers’ nightmares

DIFFERENT DEVICES HAVE DIFFERENT CAPABILITIES

Browser wars have turned into the device wars

GRACEFUL DEGRADATION VS.

PROGRESSIVE ENHANCEMENT

Graceful Degradation

RESPONSIVE DESIGNNew Trends in Mobile Development

SMALLER…LIGHTER…MORE SENSITIVE

We have the technology. We can make it better than it was.

Mobile Only vs. Responsive

• Build multiple sites, each dedicated to one platform (mobile / desktop / tablet)

m.ashton.nikonusa.com

• Build one site with special techniques for handling content per platform.

www.csc.com

http://ashton.nikonusa.com/

http://www.csc.com/

MOBILE / DESKTOP WEBSITES

Same idea…different website

THE RESULTRESPONSIVE WEBOne site to rule them all…

OTHER COOL THINGS

CANVAS TAGhttp://ghost-hack.com/post/jsexperiments/tunneler/tunneler.html

PARALLAX SCROLLINGBackground scrolls slower than the foreground, creating an illusion of depth.

http://www.nikebetterworld.com/

http://www.nikebetterworld.com/

INFINITE SCROLLINGContent loading as you scroll to it

HARDWARE SPECIFIC INTEGRATIONMore than just a mouse

TOUCH SENSITIVITYIt’s old hat now, but:

GPSI know where you live

ACCELEROMETERGive your webpage a turn

THE ENDQUESTIONS, CORRECTIONS, OR [email protected]

Responsive Design

Technology

html html

isa markup language

programming language

set of markup

blue html

html elementsweb pages

bold html stands

scripting language of