Going Mobile: Design and development

tediousfifthΚινητά – Ασύρματες Τεχνολογίες

12 Νοε 2013 (πριν από 3 χρόνια και 7 μήνες)

292 εμφανίσεις

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

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


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