Allfoods Acquires Baked Beans

Transcript Allfoods Acquires Baked Beans

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 50100% 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, initialscale=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 ~ 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?

Allfoods Acquires Baked Beans

Transcript Allfoods Acquires Baked Beans

Directory