The Web is Mobile

PHENOMENAL COSMIC POWERS! >> Itty-bitty living space!

BarCamp Charleston 10/22/2011

Sherman Paggi, sherman.paggi@gmail.com

What does “The Web is Mobile” mean?

A well designed web site can and will adapt to the device it’s viewed on.
Develop from a place where communication and functionality are the primary concerns.
Stop developing for special case situations and start coding semantically.
The old way of pixel perfect designing across platforms is out-dated
A modern web designer needs a mobile device (testing and learning first hand of how these devices are used).

What this presentation will cover…

Why Mobile is important?
What semantic coding is and why it’s important?
The 101 of designing responsive fluid layouts.
References

Is Mobile really important to web developers?

Ah yeah.
It’s finally good.
It’s pretty cool to say you’re a mobile developer.
But most of all it’s growing and people are using it.

What do Big wigs say about mobile?

“People who engage with Facebook on mobile devices are twice as active as people who only use it on their computers”
Facebook CTO Bret Taylor
“As I think about Google's strategic initiatives in 2011, I realize they're all about mobile.”
Google CEO Eric Schmidt
Mobile devices are the future of the internet as they continue to gain power and mobile broadband develops.
Adobe CTO Kevin Lynch

Mobile Increase

growth = opprotunity

Mobile is here at MUSC

“2000 Mobile devices access the MUSC network per day.”

“Mobile device traffic accounts for 2/3 of the wireless usage on campus.”

Manger MUSC NST, Micheal Haschker

The Good, the Bad, and the Ugly

(Good) Ubiquitous connection, why make your users wait?
(Good) New capabilities, like GeoLocation, Cameras, and Mics
(Good) Better more standards based browsers
(Bad?) Unknown screen sizes and browsers
(Bad?) Forces focus on the necessary elements
(Bad?) Bandwidth maybe slower maybe faster
(Bad?) Content shifting

The Ugly?

Mobile is just the Red Herring.
There are all new types of devices being used to access the web.
Phones, tablets, watches, TVs, mailboxes, home automation

What can we do?

Think of our users first.

Then content, and then browsers/devices.

Build pages that reflow and adapt.
Code Semantically.
Enhance Progressively.

What is semantic coding?

Basically semantic coding is coding the content for what it is using base elements.


<html>
<body>
<h1>
<p>
<ul>
<em> 
<table>
etc..

Use CSS, Javascript etc.. to enhance.

It’s a part of HTML5

HTML5 is not all one big thing

HTML5

and it’s not all new.

Why is semantic coding important?

Code will be future proof putting the onus on the browser.
Pages will be ADA and 508 compliant.
Pages will be SEO (search engine optimized).
Code will be more maintainable for you and other developers.
Code will be modular and can be moved easily in and out of different systems.
This is not optional. This is what web designers will be expected to do.

The 101 of designing with Mobile in mind.

Flexible percentage based fluid layouts
Scalable Images
Media Queries
Design the Mobile version first

What are sites like that implement these “responsive” techniques?

Basically they are sites that adapt them selves to the devices being viewed on.

Examples:

Flexible percentage based fluid layouts

Designing to adapt to devices dimensions.
Not replicating the Desktop layout on Mobile, be semantic and take advantage of the platforms.
Take advantage of the fact that screens sizes are variable.
Use ems and percentages for your measurements, not pixels.

Scalable Images

Use CSS to set size in percentages
Use CSS to apply effects to items
Use PNGs and SVGs when possible
Use Web fonts as often as you can (it’s HTML5)

Media Queries

Set conditional CSS properties based on screen properties

This allows your designs to adapt to small and large screens.
You can change sizes margins and floats.
Allows for progresses enhancements and degrading

   @media screen and (max-device-width: 480px) {
        #container { width: 100%; }
        #map { width: 85%; }
        iframe, article { 
        	width: 270px; 
            float: left; 
            clear: both; 
            margin: 1em 0; 
            padding: 0; }
		}

If you’ve ever made a “print friendly” style sheet you already know this.

Designing the Mobile version first

Is simply that

Focus on why the user is on your page.
Progressively enhance the page once you’ve detected capabilities.
Accept and embrace the ebb and flow of device sizes speeds and capabilities.

Pave the cowpaths

Please use the sidewalks

Let the Way be shaped by the Users.

References

Mobile

Mobile is a red herring, Cennydd Bowles. [video 6 mins]
Mobile First talk, Luke Wroblewski. [video 1 hour]
Mobile First Helps with Big Issues, Luke Wroblewski.
Mobile Gold Rush: is a Red Herring, Andy Budd. [audio slideshow 1 hour]
Designing the Wider Web, Cennydd Bowles. [audio 36 mins]
FaceBook CTO quote
Web Apps v. Mobile Apps, Jason Grigsby
AARP mobile strategy, Mike Lee
The new Canon, Mark Boulton, [audio w/ slides 26 min]
There is no Mobile Web, Stephen Hay