DEVELOPING FOR MOBILE Jackie Calapristi. AGENDA Why you should go mobile Mobile Design Options ...
-
Upload
moses-bates -
Category
Documents
-
view
218 -
download
2
Transcript of DEVELOPING FOR MOBILE Jackie Calapristi. AGENDA Why you should go mobile Mobile Design Options ...
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
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>
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