• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Ciw going mobile
 

Ciw going mobile

on

  • 158 views

 

Statistics

Views

Total Views
158
Views on SlideShare
158
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Ciw going mobile Ciw going mobile Presentation Transcript

    • 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 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
    • 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 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-putdevelopers-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
    • 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/ Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
    • 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 Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
    • 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 . . . Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
    • Typical resolutions A basic consideration: The size of the screen visitors will be using Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
    • 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 Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
    • 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/ Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
    • 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/ Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
    • 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 Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
    • 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 Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
    • 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 Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
    • 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) Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
    • 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] Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
    • 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 Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
    • Testing your pages Sites include: • iPhoney: http://www.marketcircle.com/iphoney • IPad Peak: http://ipadpeek.com • Google Mobilizer: http://www.google.com/gwt/n 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
    • 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/ 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
    • 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 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
    • 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 Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
    • 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 Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
    • 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 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-websitedesign-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-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 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
    • 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 Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
    • 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) 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 Copyright © 2012 Certification Partners, LLC -- All Rights Reserved