Upload
r82093403
View
111
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Citation preview
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Going Mobile: Design and development
tips for today's platforms
James Stanger, PhD
Stephen Schneiter
CERTIFICATION PARTNERS, LLC
Webinar
March 28, 2012
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Agenda
• Tips for planning a strong user experience for all mobile
platform users
– Appropriate target screen sizes
– Advice from experts
– Development environments to help you design for specific platforms
• Examples of mobile Web sites to emulate - and avoid
• Getting there with CIW
– CIW Site Design Associate (SDA)
– CIW Web Design Specialist (WDS)
– CIW JavaScript Specialist
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
About us
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Our presenters
James Stanger
• President and Chief Certification Architect
• Technologist, consultant and author
– Linux Magazine and Ubuntu User
– CompTIA IT Pro Community
• Security and social media consultant
Stephen Schneiter
• Certification Specialist
• Author and educator
• Designs certifications and courseware
• Implements programs worldwide
• Twitter: #ciw_instructor
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Skills-based education program
• A holistic approach
• Courses and certification exams
• Web development and design
• We put people on a life-long learning path, not a vendor's product treadmill
Vendor-neutral
• The best vendor applications as judged by industry
• Open source
• Competency and job role-based approach to education
Globally accepted
• Almost a million courses and exams delivered worldwide
• Over 65,000 certified individuals
Brought to you by CIW —
Your Web and Internet certification
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
CIW: A Proven Way to Fast-Track
your Development Career
Internet.com names CIW a top developer cert
• Recommends CIW as one of its Top 5 Certifications that put Web Developers on
the Fast Track
• CIW's Web Developer came in at No. 3 with "the distinction of being the
industry standard for Webmasters”
• No. 1 and 2 (MCSD and SCJD) are well-known vendor-based industry staples —
CIW is vendor-neutral and focuses on core technologies and languages
• “When you combine in-demand skill-sets and proven salary impact, specific
certifications become valuable to individual technology professionals”
• Proof positive of CIW's continuing value to designers and developers worldwide
Read the full Internet.com article at: http://www.computertrainingschools.com/training-spotlights/5-certs-that-put-
developers-on-the-fast-track.html
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Mobilizing the Web:
Planning a strong user experience
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Consider your audience:
• 66% of Americans aged 24-35 own a mobile phone
• Over 1/4 of the over 4 billion phones used in the world are smart phones. And this
doesn't even include tablets, which are the wave of the future
• Half of all searches on the Web are done so using a mobile device (e.g., a phone, or a
tablet
• Within five years, the majority of Web traffic will be via a mobile device
• By 2016, low-cost tablets (and phones) will control the market
– Guess what this means for your development future?
– The de facto platform
• Design and development will be fundamentally for mobile devices in the near future
We've already gone mobile
Source URL: http://www.bgr.com/2012/03/23/low-cost-tablets-to-control-60-of-the-market-by-2016/
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Reconsider the metaphors and practices:
• A tactile environment
– From “clicking” to tapping
– From window resizing to “pinch and zoom”
– Gestures are king
• Multitasking is non-existent, or at least
significantly different
Changing how you think
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
And, consider the nature of the platform itself
• Processing strength and speed
– Mobile devices aren't as fast
or as powerful
– Don't throw too much at it
• Networking: 3G and 4G aren't as fast as a wired
or WiFi network
• The screen:
– You have less available real estate available
– Direct sunlight issues
– Not all displays are the iPad Retina . . .
Changing how you think (cont'd)
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
A basic consideration: The size of the screen visitors will be using
Typical resolutions
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
What platform are you designing to?
• iPhone statistics:
– 320 pixels in width, 480 pixels in height
– Color choice
• Nokia, HTC and Samsung:
– 176 x 208 pixels to 352 x 416 pixels
– 240 pixels in width and 320 pixels in height
• Blackberry: 160 x 160 pixels to 324 x 352 pixels
• Mode switching: Typical devices support the ability to spontaneously move from
vertical to landscape mode
• iPad: 1024 x 768
Resolution concepts and issues
Source URL: http://www.onbile.com/info/mobile-resolutions-and-mobile-webpages
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Some tablet-based workarounds . . .
• The New iPad Retina display and JavaScript
– A resolution workaround
– All workarounds have tradeoffs
• Adrian Roselli's tips for developing
to the Retina
– What about download size?
– Download limits?
• Don't forget the Android!
Tablets
URLs: http://www.webmonkey.com/2012/03/what-the-new-ipads-retina-display-means-for-web-developers/
http://blog.adrianroselli.com/2012/03/ipad-retina-display-concerns-and-tips.html
http://www.smashingmagazine.com/2011/08/09/designing-for-android-tablets/
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
One size doesn't fit all . . .
• Consider the sizes shown in the following image
Platform size
Source and URL:
Albert Lai, at http://eng.pulse.me/category/design/
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Experts have told us about:
• HTML5, CSS3 and JQuery
• Mobile topography
– Typekit: https://typekit.com
– Google Fonts: http://www.google.com/webfonts
• Bigger is not necessarily better. Most people like
their big iPads and Androids. Still:
– Give priority to Important messages
– Use text; don't use only images
– Increase button sizes
– Use appropriate sizes for your logos
Design trends
Source URL:
http://www.marqui.com/blog/top-website-design-trends-for-2012.aspx
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
UI designers for mobile phones appreciate:
• Page purity
– Few images
– More white space
• Navigational simplicity
– Subdomains
– Prioritized content
– Clear content
Design trends (cont'd)
Source URL:
http://www.smashingmagazine.com/2009/01/13/mobile-web-design-trends-2009
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Grid-based layouts become important
• They streamline development
– More importantly, they are:
▫ Pleasing to the eye
▫ Ideal for mobile environments
• Grid-based design resources include:
Computing on the “grid?”
Source URL:
http://www.awwwards.com/grid-based-web-design-resources.html
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
We've talked with a few experts about the tricks and procedures they
keep in mind the most as they design. Here they are:
• No flash! It doesn't work well with Apple devices, and really doesn't work well with
devices that supposely support it in the first place . . .
• Create a separate site solely for mobile pages. Use your code to direct mobile
devices over to that site
• Code the hyperlinks so that “hovering” isn't an issue
– Touch-sensitive devices will interpret someone's finger hovering as a click.
– How to solve this problem: Make sure the action that the hovering leads to is
the same as on click action
• Adopt one-screen resolution using the viewport meta tag (shown in the next slide)
Tips for mobile-friendly design
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
• The above code autodetects the resolution on the mobile device
• Put it at the top of your page, before all other <meta> tags.
• You can then use it to adjust the Web page using one piece of code
• Very convenient, and your users will thank you for it!
The viewport tag
Source URL:
http://blog.hubspot.com/blog/tabid/6307/bid/29118/the-first-3-steps-to-an-instantly-mobile-
optimized-website?source=Blog_Email_[The%20First%203%20Steps%20to]
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Code for redirecting your users to a mobile-friendly site is available at
many sites. You can use many methods and languages, including:
• JavaScript
• CSS and CSS3
• PHP and ASP.net
• .htaccess files in Apache server
Redirecting to a mobile-friendly site
Source URLs:
http://www.stepforth.com/resources/web-marketing-knowledgebase/redirect-mobile-
iphone-visitors-mobile-content/#.T3Df7uImsup
http://css-tricks.com/snippets/javascript/redirect-mobile-devices/
http://detectmobilebrowsers.mobi/
http://stackoverflow.com/questions/6990070/mobile-redirect-using-screen-resolution
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Sites include:
• iPhoney: http://www.marketcircle.com/iphoney
• IPad Peak: http://ipadpeek.com
• Google Mobilizer: http://www.google.com/gwt/n
Testing your pages
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Testing your pages (cont'd)
Additional resources include:
• MobiReady:
http://ready.mobi/launch.jsp?locale=en_EN
• DotMobi:
http://mtld.mobi/emulator.php
• Opera Mini Simulator:
http://www.opera.com/developer/tools/mini/
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Testing your pages (cont'd)
Squish - For heavy-duty regression testing
• Does more than UI testing.
• Automated tests
• JavaScript
• Perl
• Python
• TCL
URL: http://www.froglogic.com/squish/gui-testing/
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Validating mobile code
(Yes, it's part of testing)
W3C mobileOK Checker:
http://validator.w3.org/mobile
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Development environments
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
You need a development environment.
But, you can't stick with just one vendor
• Asdf
• IBM's Eclipse IDE (www.eclipse.org)
• NetBeans (http://netbeans.org)
• http://mashable.com/2010/08/11/cross-
platform-mobile-development-tools/
More than just one . . .
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Native development
Develop right in the device
• Within the phone
– PicSay
– PhotoShop Express
• Within the tablet
Testing and validation is essential!
• More than one resolution type
• Android, iPhone, Windows phone
• Accessibility (508)
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Sites to emulate
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Mobile users love it when you focus
their attention
• It's all in the choices
• What does your audience want from
your site?
• Good examples of focus on mobile
sites include:
– Volkswagen
– Burger King
– CBS news
– Digg
Simplicity is king
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Good use of white space
• Austin Kayak
– Readable
– Still provides information
– Navigation is simple to navigate
via tapping
– Notice the wise use of space
▫ New products
▫ Prioritized resources
• Scuba.com
• MSNBC
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Additional examples
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Additional examples
moiremarketing.mobi threeshiresinn.co.uk
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Going Nowhere: Examples to avoid
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Johns Hopkins
• The “chatty kathy” page
• Yes, accessibility is important
• Simple links can be nice
• But how many links do you really need to have
on one page?
Going nowhere . . .
Source URL:
http://www.imediaconnection.com/content/31233.asp
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Yes, white space is good, but . . .
• I mean, really!
• If you don't have anything to say, consider
not creating a Web page
• Remember:
– Create links to resources your audience expects
– Use images wisely
– Provide plenty of white space – around 30%
Going nowhere fast . . .
Source URL:
http://www.raymondcamden.com/index.cfm/2012/1/30/Bad-use-of-tablet-space--an-example
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Too much of a good thing?
• Lots of words
• Interesting image, but . . .
– Where are the products?
– Is there a sense of priority, here?
– Who can really read this on a phone
that more or less fits in the palm of your
hand?
– Are those colors really conducive to
viewing the site?
Even faster . . .
Source URL:
http://www.aldercreek.com
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Russian Roulette Navigation
Sites that can't make up
their minds
• Which page will you get?
• Depending upon the
mood of the site (or the
phone), you get one of
these pages
• Or, you get an offer to
download the app
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Resources
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
By the numbers
Cool Home Pages
Constant stream of examples deemed good by the Web site's owners
http://coolhomepages.com/Mobile/design-ideas.html
Marqui.com
Insights into today's best practices, as well as trends for the future
http://www.marqui.com
Drost Designs
About mobile design, as well as mobile marketing and traditional design
http://www.drostdesigns.com/
15 Beautiful Examples of Mobile Website Design Done Right
http://www.640pixels.com/design-showcase/15-beautiful-examples-of-mobile-website-
design-done-right.aspx
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Recognized authorities
Six Revisions
Provides resources on mobile design, including about accessibility
http://sixrevisions.com/usabilityaccessibility/10-usability-tips-based-
on-research-studies/
Applico
Expert developers of mobile apps
http://www.applicoinc.com/
Web Monkey Full of resources for traditional and mobile design (the future)
http://www.webmonkey.com
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Getting there with CIW . . .
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
CIW Web Foundations Associate (WFA)
Revised courses available: August, 2012
• In-depth coverage of social networking and social media
• HTML5 and CSS3
• Cloud computing
Revised exams available, December 2012
Contact your account representative for more information . . .
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
CIW Web Design Specialist (WDS)
Revised courses available: August, 2012
• Project-based design
• Cutting-edge development environments, including:
– Microsoft
– Flash
– Open source
• JavaScript and database coverage
Exams and courseware available now
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
CIW JavaScript Specialist
Teaches best practices for JavaScript, including:
• Use variables, expressions and create applications
• Flow control, form validation, image animation
• Using jQuery
• Ajax techniques
• Controlling program flow with statements
Course and certification available today
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Our next Webcast
Teaching the Future of the Web:
The New CIW Site Development Associate Certification
Date: Wednesday, April 25, 2012
Time: 8:00 am PDT / 11:00 am EDT / 3:00 pm BST
Sign up at: http://www.ciwcertified.com/About_CIW/webinars.php
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Questions
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Help us make our future Webinars even better.
How did we do?
Please provide us with your feedback to this Webinar.
Respondents who fully complete our short survey will be
entered into a drawing for a $50 Visa Gift Certificate!
http://www.surveymonkey.com/s/CIWmobile
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Thank you for your time
To receive the latest info about CIW, follow CIWcertified on Twitter, Facebook and LinkedIn (CIW Group)
James Stanger President and Certification Architect/
CERTIFICATION PARTNERS
+1 (888) 303-8694
+1 (360) 970-5357
Stephen Schneiter Certification Specialist
CERTIFICATION PARTNERS
+1 (866) 860-8559
+1 (602) 794-4106
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Follow CIW today!
www.twitter.com/CIWcertified
www.facebook.com/CIWCertified
http://tinyurl.com/6eznl7z
www.youtube.com/CIWCerts