DEVELOPING FOR MOBILE Jackie Calapristi. AGENDA Why you should go mobile Mobile Design Options ...

16
DEVELOPING FOR MOBILE Jackie Calapristi

Transcript of DEVELOPING FOR MOBILE Jackie Calapristi. AGENDA Why you should go mobile Mobile Design Options ...

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 MOBILEFACTS 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 PRESENCEBY USER TASK PREFERENCE

RESPONSIVE DESIGNA 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 DEVICENO 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 TUTORIALSTEPS 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 HTML5THE 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 ~ Native 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?