Zen Stream

The Web is Mobile

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

WebMakers meeting 2:00 pm | 7/27/2011
Library room 405

Sherman Paggi, paggis@musc.edu

What does “The Web is Mobile” mean?

What this presentation will cover…

Is Mobile really important to web developers?

What do Big wigs say about mobile?

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

The Ugly?

What can we do?

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?

The 101 of designing with Mobile in mind.

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

Scalable Images

Media Queries

Set conditional CSS properties based on screen properties

   @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

Pave the cowpaths

Please use the sidewalks

Let the Way be shaped by the Users.

References

Mobile

Responsive design

HTML5 (semantic coding)

General Design

Etc…