ciw going mobile

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


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


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


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


Mobilizing the Web:

Planning a strong user experience


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/


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


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)


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

Typical resolutions


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


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/


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/


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


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


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


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


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


Sites include:

• iPhoney: http://www.marketcircle.com/iphoney

• IPad Peak: http://ipadpeek.com

• Google Mobilizer: http://www.google.com/gwt/n

Testing your pages


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


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


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


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


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


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


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


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


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

design-done-right.aspx


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


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


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


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

[email protected]

+1 (888) 303-8694

+1 (360) 970-5357

Stephen Schneiter Certification Specialist

CERTIFICATION PARTNERS

[email protected]

+1 (866) 860-8559

+1 (602) 794-4106


Follow CIW today!

www.twitter.com/CIWcertified

www.facebook.com/CIWCertified

http://tinyurl.com/6eznl7z

www.youtube.com/CIWCerts

ciw going mobile

Technology

llc copyright

web developers

mobile phone

platform design

names ciw

pixels mode

instructor copyright

development tips