DEVELOPING FOR MOBILE

difficultmangledMobile - Wireless

Nov 12, 2013 (3 years and 9 months ago)

105 views

DEVELOPING FOR MOBILE


Jackie
Calapristi

AGENDA


Why you should go mobile


Mobile Design Options


Responsive Design


Tips
& Tools to Help You
Build


Meta Viewport Tag


Media Queries


A Word on HTML5


Best
Practices for all Mobile
Design

WHY YOU SHOULD GO MOBILE

FACTS AND FIGURES

1.
83
million people
on
mobile
web

2.
Smartphones now outsell PCs

3.
Mobile
websites reach all audiences,
apps do
not

4.
Website mobile
traffic grew by 50
-
100% this
year

5.
Your website likely is impossible
to
use on
mobile

6.
Don’t get left behind

MOBILE WEB DESIGN OPTIONS


1.
Responsive
Web
Design

2.
Separate Mobile Specific Site

3.
Native App

E
-
COMMERCE MOBILE PRESENCE

BY USER TASK PREFERENCE

RESPONSIVE DESIGN

A CLOSER LOOK


Responsive Design
-
Sasquatch!


Client
-
side innovation,
the browser size
determines the page


Server
-
side technology, the server detects all environment rules

DETERMINING USER MOBILE DEVICE

NO SIMPLE TASK!


Server
-
Side


Not in HTTP Request


PHP and HTTP Accept
Code


Client
-
Side



Media Queries


Examine User
-
Agent String


.NET IsMobileDevice property


Not Reliable


$$$$


Dedicated
Device Detection Product

https://deviceatlas.com/



TOOLS & TIPS FOR RESPONSIVE

DESIGN


Test with Mobile Emulators


Opera


Use
Responsive Frameworks


Twitter Bootstrap


Foundation


Skeleton


Responsive Website Tutorials


jQuery Plugins


CSS3


JavaScript

META VIEWPORT


Definition:

A phone browser’s visible screen area

What it looks like:

<meta
name="
viewport
" content="width=device
-
width, initial
-
scale=1,
maximum
-
scale=1, user
-
scalable=yes ">

Purpose:

Set’s the viewport width and initial
-
scale on mobile devices

Features:


initial
-
scale=1

, maximum
-
scale=1

Renders the page 100%


user
-
scalable=yes
Allows user to zoom



MEDIA QUERIES

Definition:

CSS3 module to define styles for screen and print media types

What it looks like:

@
media
screen

(min
-
width: 700px) and (max
-
width: 800px), handheld and
(orientation: landscape) {

...
}

Purpose
:

Tailored CSS for multiple viewport sizes and devices

Features
:


(min
-
width: 700px)
and (max
-
width: 800px )
Renders for screen with this size
viewport


Screen, Handheld
Adjusts for screens and for handheld devices


USING AN ONLINE TUTORIAL

STEPS WITH CODE HANDOUT

1.
Add a Meta Viewport


<meta

name="viewport"

content="width=device
-
width,

initial
-
scale=1,

maximum
-
scale=1"
>


2.
For CSS: Use percentages rather than fixed widths

3.
Add multiple Media Queries for different screen sizes:


@
media

screen

and

(
max
-
width
:

600px)

{

… }

THAT WAS A BASIC EXAMPLE


It will probably take a lot of time and testing to make sure your
site is responsive across all platforms

A NOTE ON HTML5

THE FLASH KILLER & WHY YOU SHOULD USE IT


HTML5 = HTML + CSS + JS


Full
mobile/cross browser support


Meta
Tags:


Viewport


Full
screen
browsing mode


Add as Home
Screen
Icons


Your Website ~
N
ative App!


Better User Interactions


Cleaner Code (Ex: Class/IDs become
tags, one line for animations)


<!DOCTYPE HTML>


BEST PRACTICES FOR MOBILE
DESIGN

CONCLUSION



One size does not fit all


Many Options for Mobile development


Many Resources, too!


Be sure to utilize Emulators, Templates, HTML5 and Best Practices

QUESTIONS?