View
65
Download
0
Category
Tags:
Preview:
DESCRIPTION
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. - PowerPoint PPT Presentation
Citation preview
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 PCs3. Mobile websites reach all
audiences, apps do not4. Website mobile traffic grew by
50-100% this year5. Your website likely is
impossible to use on mobile6. Don’t get left behind
MOBILE WEB DESIGN OPTIONS
1. Responsive Web Design2. Separate Mobile Specific Site3. 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 VIEWPORTDefinition: A phone browser’s visible screen areaWhat 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 devicesFeatures:
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 typesWhat it looks like:
@media screen (min-width: 700px) and (max-width: 800px), handheld and (orientation: landscape) { ... }
Purpose: Tailored CSS for multiple viewport sizes and devicesFeatures:
(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?
Recommended