Ciw going mobile

Webinar
March 28, 2012

Going Mobile: Design and development
tips for today's platforms
James Stanger, PhD
Stephen Schneiter
CERTIFICATION PARTNERS, LLC
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


About us


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

Brought to you by CIW —
Your Web and Internet certification
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

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-putdevelopers-on-the-fast-track.html

Mobilizing the Web:
Planning a strong user experience


We've already gone mobile
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
Source URL:
http://www.bgr.com/2012/03/23/low-cost-tablets-to-control-60-of-the-market-by-2016/

Changing how you think
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 (cont'd)
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 . . .


Typical resolutions
A basic consideration: The size of the screen visitors will be using


Resolution concepts and issues
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
Source URL: http://www.onbile.com/info/mobile-resolutions-and-mobile-webpages

Tablets
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!
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/

Platform size
One size doesn't fit all . . .
• Consider the sizes shown in the following image

Source and URL:
Albert Lai, at http://eng.pulse.me/category/design/

Design trends
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

Source URL:
http://www.marqui.com/blog/top-website-design-trends-for-2012.aspx

Design trends (cont'd)
UI designers for mobile phones appreciate:
• Page purity
–

Few images

–

More white space

• Navigational simplicity
–

Subdomains

–

Prioritized content

–

Clear content

Source URL:
http://www.smashingmagazine.com/2009/01/13/mobile-web-design-trends-2009

Computing on the “grid?”
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:

Source URL:
http://www.awwwards.com/grid-based-web-design-resources.html

Tips for mobile-friendly design
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)


The viewport tag
<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!

Source URL:
http://blog.hubspot.com/blog/tabid/6307/bid/29118/the-first-3-steps-to-an-instantly-mobileoptimized-website?source=Blog_Email_[The%20First%203%20Steps%20to]


Redirecting to a mobile-friendly site
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

Source URLs:
http://www.stepforth.com/resources/web-marketing-knowledgebase/redirect-mobileiphone-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

Testing your pages
Sites include:
• iPhoney: http://www.marketcircle.com/iphoney
• IPad Peak: http://ipadpeek.com
• Google Mobilizer: http://www.google.com/gwt/n


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/


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/


Validating mobile code
(Yes, it's part of testing)
W3C mobileOK Checker:
http://validator.w3.org/mobile


Development environments


More than just one . . .
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/crossplatform-mobile-development-tools/


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)


Sites to emulate


Simplicity is king
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


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


Additional examples


Additional examples
moiremarketing.mobi

threeshiresinn.co.uk


Going Nowhere: Examples to avoid


Going nowhere . . .
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?

Source URL:
http://www.imediaconnection.com/content/31233.asp

Going nowhere fast . . .
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%

Source URL:
http://www.raymondcamden.com/index.cfm/2012/1/30/Bad-use-of-tablet-space--an-example

Even faster . . .
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?

Source URL:
http://www.aldercreek.com

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


Resources


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-websitedesign-done-right.aspx

Recognized authorities
Six Revisions
Provides resources on mobile design, including about accessibility
http://sixrevisions.com/usabilityaccessibility/10-usability-tips-basedon-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


Getting there with CIW . . .


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 . . .

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

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

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


Questions


How did we do?

Help us make our future Webinars even better.
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


Thank you for your time
James Stanger
President and Certification Architect/
CERTIFICATION PARTNERS
jstanger@certification-partners.com
+1 (888) 303-8694
+1 (360) 970-5357

Stephen Schneiter
Certification Specialist
CERTIFICATION PARTNERS
sschneiter@certification-partners.com
+1 (866) 860-8559
+1 (602) 794-4106
To receive the latest info about CIW, follow CIWcertified on Twitter, Facebook and LinkedIn (CIW Group)


Follow CIW today!
www.twitter.com/CIWcertified

www.facebook.com/CIWCertified

http://tinyurl.com/6eznl7z

www.youtube.com/CIWCerts


Ciw going mobile

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (9)

Similar to Ciw going mobile

Similar to Ciw going mobile (20)

More from r82093403

More from r82093403 (20)

Recently uploaded

Recently uploaded (20)

Ciw going mobile