0
Mobile Web                                     Development                              The Challenges and How To Meet The...
Student Unions &                         Activities 2011 Poll                        50% have a smartphone                ...
Tuesday, April 17, 12Recognize?
YavinTuesday, April 17, 12This is Yavin, a red giant planet.
Yavin 4                          YavinTuesday, April 17, 12This is Yavin 4, the location of the rebel base
Student Unions &                        Activities Website                              2011: 4.34%Tuesday, April 17, 12A ...
Student Unions &                        Activities Website                            2012: 9.03%Tuesday, April 17, 12This...
Homecoming Website                              2010: 3.8%Tuesday, April 17, 12Homecoming 2010 during the event.
Homecoming Website                            2011: 11.64%Tuesday, April 17, 12Homecoming 2011 during the event.
Spring Jam Website                               2010: 5.46%Tuesday, April 17, 12Spring Jam 2011 during the event.
Spring Jam Website                             2011: 13.44%Tuesday, April 17, 12Spring Jam 2011 during the event.
Mobile Operating                                   Systems                 21458      21500                            103...
Device Dimensions                                                             Android       Android     Samsung   Nokia   ...
Responsive Design                              Ethan Marcotte       Photo: Peter J. Hart       flickr.com/photos/40054618@N...
A Dao of Web Design                        John Allsopp       Photo: drewm flickr.com/photos/drewm/       flickr.com/photos/...
A Dao of Web Design                        alistapart.com/articles/dao/                        “It’s time to throw out the...
Responsive            Architecture            “If a building could            change its posture,            tighten its m...
Flexible, Fluid Layouts                        widths, margins, padding in                        relative units          ...
Flexible, Fluid Layouts                                               Target / Context = Result                        Pho...
Flexible, Fluid Layouts                                                            24 / 16 = 1.5                        Ph...
Context Changes                                            13 / 24 = 0.54166666666666                        Photo: ansik ...
Media Queries                          Tablet    Netbook                     Desktop               Sm                 art ...
Media Queries                        @media screen and (min-width: 480px) {                            /* CSS goes here */...
Media Queries                            Media                        @media screen and (min-width: 480px) {              ...
Media Queries                            Media                               Query                        @media screen an...
Media Queries                        @import url(“css/phone.css”) screen                        and min-width: 480px);Tues...
Media Queries                        @import url(“css/phone.css”) screen                        and min-width: 480px);    ...
Media Queries                        @import url(“css/phone.css”) screen                        and min-width: 480px);    ...
Media Query Options                        •   width (browser width)                        •   height (browser height)   ...
Media Query Options                        • width (browser width)                        • height (browser height)       ...
There are no                               standard devices!                             Photo: Oliver White              ...
Set media                              query                        breakpoints                         where the         ...
“CSS Pixels” &                             “Hardware Pixels”                        Apple iPhone 4: 326 ppi               ...
Some Pixels Are More                         Equal Than Others                        Hardware Pixel                      ...
Some Pixels Are More                         Equal Than Others                        Hardware Pixel                CSS Pi...
Take Control of The                               Screen                        <meta name="viewport"                     ...
Take Control of The                               Screen                        width=device-width                        ...
Take Control of The                               Screen                        initial-scale = 1                        C...
Take Control of the                               Screen                        maximum-scale = 1                        C...
Take Control of the                              ScreenTuesday, April 17, 12Left: before setting the viewport meta tag. Ri...
Responsive Images &                              Media  Photo:Vicky Somma  flickr.com/photos/tgaw/2556511663/Tuesday, April...
Responsive Images &                              Media                        #container img {                            ...
Start with Basic HTML                         <a id=”home-link” href=”http://sua.umn.edu”>Home</a>Tuesday, April 17, 12Sta...
Use JavaScript to Detect                     Screen Dimensions                        h = screen.height;Tuesday, April 17,...
Use JavaScript to Detect                     Screen Dimensions                        h = screen.height;                  ...
Use JavaScript to Detect                     Screen Dimensions                        /* if devicePixelRatio is supported,...
Use JavaScript to Detect                     Screen Dimensions                        // Set the image directory according...
Use JavaScript to Detect                     Screen Dimensions                        $(a#home-link).html(<img            ...
Mobile First, Mobile                         Separate & RESSTuesday, April 17, 12Now that I’ve touched on a few techniques...
Mobile First                  Luke Wroblewski                  Photo: foltzwerk                  flickr.com/photos/foltzwer...
Mobile First                        • One site for all devices                        • Focus on content that’s truly impo...
Mobile First                        • Potential for unnecessary overhead                        • Convincing stakeholders ...
Polyfills                                 Respond: github.com/scottjehl/Respond                                            ...
Feature Detection                                                 Modernizr modernizr.com                  Photo: Patrick ...
Modernizr                        •   @font-face               •   CSS reflections                                          ...
Mobile First                                           Responsive                                             Images      ...
Mobile First                                            Responsive                                              Images    ...
Tuesday, April 17, 12Here’s an example of a responsive design in action. Notice how he’s designed the layout andimages to ...
Separate Mobile                        ExperienceTuesday, April 17, 12Remember these guys? Both have also done sites with ...
Separate Mobile                                Experience                        • Site tailored to use case              ...
Separate Mobile                                Experience                        • Two sites                        • Migh...
Device Detection                             detectmobilebrowsers.com                                  detector.dmolsen.co...
detectmobilebrowsers.com                                            Apache          Lasso                                 ...
detectmobilebrowsers.com                        <?php                        is_mobile();                        ?>       ...
Detector                        • detector.dmolsen.com                        • PHP only                        • Beta    ...
Detector                        <?php                        if ($ua->isMobile)                        {                  ...
Preserve                    The URI                    When                    Redirecting                         Photo: ...
if (is_mobile() && !isset($_COOKIE[mobile]))              {                  $redirect = /mobile/;                  if (pr...
JQuery MobileTuesday, April 17, 12We’ve used the JQuery Mobile framework for all of your mobile projects so far.
JQuery MobileTuesday, April 17, 12For one reason: it’s thoroughly tested. This is an image of the JQuery Mobile testing ta...
JQuery Mobile Setup                        <div data-role="page">                           <div data-role="header">      ...
Ajax Page Loads              <a itemprop="url" data-transition="slide" href="/path/">link</a>Tuesday, April 17, 12The fram...
Ajax Page Loads              <a itemprop="url" data-transition="slide" href="/path/">link</a>Tuesday, April 17, 12The fram...
JQuery Mobile Page                         Transition Options                          • fade                  • slideup  ...
JQuery Mobile ThemesTuesday, April 17, 12There are also 6 built-in themes available. You also have the option of designing...
JQuery Mobile Themes                        <div data-theme="a"></div>Tuesday, April 17, 12Themes are defined using a “data...
JQuery Mobile Grid                            Framework                        <div class="ui-grid-a">                    ...
JQuery Mobile Grid                             Framework                        • two-column: ui-grid-a                   ...
Binding JavaScript Events                      in JQuery Mobile                        Use pageInit() instead of          ...
REsponsive & Server                           Side (RESS)                  Photo: foltzwerk                  flickr.com/pho...
REsponsive & Server                           Side (RESS)                        • Heavy lifting handled on server side   ...
REsponsive & Server                           Side (RESS)                        • Harder to execute                      ...
There is no single                 solution and I will stand                 on Jeffery Zeldman’s                 coffee t...
Tools & Resources                        Testing                                Links                 •      Comprehensive...
Upcoming SlideShare
Loading in...5
×

Mobile Web Development: The Challenges & How to Meet Them

3,183

Published on

The slides from my presentation for MinneWebCon 2012 at the University of Minnesota St. Paul Campus.

Published in: Technology, Business
1 Comment
1 Like
Statistics
Notes
  • Not having mobile programming skills in Objective C, Java, Javascript, or other languages no longer has to be a roadblock to developing mobile apps. All developers can now build, test and deliver data rich, native apps quickly and easily without any mobile programming skills required.
    You can find more about this point in the article here:
    http://snappii.blogspot.ru/2013/02/howorganizations-can-address-mobile-app.html
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
3,183
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
19
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Mobile Web Development: The Challenges & How to Meet Them"

  1. 1. Mobile Web Development The Challenges and How To Meet Them Tony Thomas - Student Unions & Activities at The University of MinnesotaTuesday, April 17, 12
  2. 2. Student Unions & Activities 2011 Poll 50% have a smartphone 7% plan to get oneTuesday, April 17, 12Our unscientific student poll.
  3. 3. Tuesday, April 17, 12Recognize?
  4. 4. YavinTuesday, April 17, 12This is Yavin, a red giant planet.
  5. 5. Yavin 4 YavinTuesday, April 17, 12This is Yavin 4, the location of the rebel base
  6. 6. Student Unions & Activities Website 2011: 4.34%Tuesday, April 17, 12A snapshot from SUA a year ago.
  7. 7. Student Unions & Activities Website 2012: 9.03%Tuesday, April 17, 12This year.
  8. 8. Homecoming Website 2010: 3.8%Tuesday, April 17, 12Homecoming 2010 during the event.
  9. 9. Homecoming Website 2011: 11.64%Tuesday, April 17, 12Homecoming 2011 during the event.
  10. 10. Spring Jam Website 2010: 5.46%Tuesday, April 17, 12Spring Jam 2011 during the event.
  11. 11. Spring Jam Website 2011: 13.44%Tuesday, April 17, 12Spring Jam 2011 during the event.
  12. 12. Mobile Operating Systems 21458 21500 10330 767 82 56 37 31 6 4 0 S d y e S g ia top iO roi err on ianO sun ok LG nd ckb Ph b am N Hip A Bla ows Sym S nge r d W in DaTuesday, April 17, 12Our users are predominantly iOS & Android. Blackberry distant 3rd. Long tail of others.
  13. 13. Device Dimensions Android Android Samsung Nokia Android Android Android Android Blackberry Android Blackberry Android Windows Android Android Android Android Blackberry Android Android Android Android Android Android Android Android Nokia Android Android iPhone iPod Android Android Blackberry Samsung Blackberry Blackberry SymbianOS SymbianOS BlackberryTuesday, April 17, 12This is just a small sample of device dimensions taken from 1 month of SUA mobile traffic.
  14. 14. Responsive Design Ethan Marcotte Photo: Peter J. Hart flickr.com/photos/40054618@N03/5140728113/Tuesday, April 17, 12This is Ethan Marcotte who introduced the concept of responsive design in 2010.
  15. 15. A Dao of Web Design John Allsopp Photo: drewm flickr.com/photos/drewm/ flickr.com/photos/drewm/4732738890/Tuesday, April 17, 12It’s in part inspired by John Allsopp’s 2000 A List Apart article called “A Dao of Web Design.”
  16. 16. A Dao of Web Design alistapart.com/articles/dao/ “It’s time to throw out the rituals of the printed page, and to engage the medium of the web and its own nature.”Tuesday, April 17, 12[Read quote.] Back in 2000, Allsopp was advocating for embracing the inherent flexiblenature of the web.
  17. 17. Responsive Architecture “If a building could change its posture, tighten its muscles and brace itself against the wind, its structural mass could literally be cut in half.” --Guy Nordenson Photo: Evangelos KotsiorisTuesday, April 17, 12Responsive design is also inspired by Responsive, or adaptive architecture where buildingsrespond and change according to their environment. [read quote] Think of markup, CSS,JavaScript & media as the structural mass of a website.
  18. 18. Flexible, Fluid Layouts widths, margins, padding in relative units Photo: Sabrina Campagna flickr.com/photos/mar1lyn84/5649648853/Tuesday, April 17, 12The foundation of responsive design are layouts in relative units. That means widths, margins& padding are defined in ems or percents.
  19. 19. Flexible, Fluid Layouts Target / Context = Result Photo: ansik flickr.com/photos/ansik/304526237/Tuesday, April 17, 12This is Ethan Marcotte’s formula for calculating widths in ems. The assumption here is thatmost browsers maintain their default setting of a 16px font-size.
  20. 20. Flexible, Fluid Layouts 24 / 16 = 1.5 Photo: ansik flickr.com/photos/ansik/304526237/Tuesday, April 17, 12In this example, we’re looking for a 24 pixel font-size. 24/16 is 1.5, so our font size is1.5em.
  21. 21. Context Changes 13 / 24 = 0.54166666666666 Photo: ansik flickr.com/photos/ansik/304526237/Tuesday, April 17, 12Beware of context changes. If our font is 1.5em and thus, 24px and we want a 13px font inthat context, we have to divide 13 by 24 (our new context). Notice the number of decimalpoints in this example. Marcotte advocates for keeping all those decimal places. I haven’tbeen able to find any information as to how many places a different browsers will calculate.
  22. 22. Media Queries Tablet Netbook Desktop Sm art p ho neTuesday, April 17, 12Back to media queries. After we’ve established our grids, margins and padding in relativeunits, media queries are the next important step in making a design responsive.
  23. 23. Media Queries @media screen and (min-width: 480px) { /* CSS goes here */ }Tuesday, April 17, 12First a browser reads the media type, then evaluates the query. In this case, if the media is‘screen’ and the browser viewport is at least 480px, the enclosed styles will be rendered.
  24. 24. Media Queries Media @media screen and (min-width: 480px) { /* CSS goes here */ }Tuesday, April 17, 12First a browser reads the media type, then evaluates the query. In this case, if the media is‘screen’ and the browser viewport is at least 480px, the enclosed styles will be rendered.
  25. 25. Media Queries Media Query @media screen and (min-width: 480px) { /* CSS goes here */ }Tuesday, April 17, 12First a browser reads the media type, then evaluates the query. In this case, if the media is‘screen’ and the browser viewport is at least 480px, the enclosed styles will be rendered.
  26. 26. Media Queries @import url(“css/phone.css”) screen and min-width: 480px);Tuesday, April 17, 12Here’s an alternate syntax that will load a separate style sheet based on the parameters ofthe media query.
  27. 27. Media Queries @import url(“css/phone.css”) screen and min-width: 480px); MediaTuesday, April 17, 12Here’s an alternate syntax that will load a separate style sheet based on the parameters ofthe media query.
  28. 28. Media Queries @import url(“css/phone.css”) screen and min-width: 480px); Query MediaTuesday, April 17, 12Here’s an alternate syntax that will load a separate style sheet based on the parameters ofthe media query.
  29. 29. Media Query Options • width (browser width) • height (browser height) • device-width (device-width) • device-height (device-height) • orientation (portrait or landscape) • aspect-ratio (browser aspect ratio) • device-aspect-ratio (device aspect ratio) • color (bits of color component of device) • color-index (number of entries in the color lookup profile) • monochrome (similar to color but for monochrome devices) • resolution (pixel-density in DPI) • scan (TV’s-whether scanning process is progressive or scan) • grid (grid-based display, like feature phone)Tuesday, April 17, 12Here’s a complete list of media query options--including some related to television scanning.
  30. 30. Media Query Options • width (browser width) • height (browser height) • device-width (device-width) • device-height (device-height) • orientation (portrait or landscape)Tuesday, April 17, 12In reality these are the most common. I want to point out a few distinctions here. ‘width’ &‘height’ refer to the browser viewport. ‘device-width’ & ‘device-height’ refer to the height &width of the device. Device orientation is another handy option.
  31. 31. There are no standard devices! Photo: Oliver White flickr.com/photos/nuage_de_lait/6580839781/Tuesday, April 17, 12Until recently, it’s been popular to write queries based on the dimensions of popular devices.The list on the left of this slide is taken from SUA’s analytics. You can see the incrediblediversity of screen sizes in our mobile analytics. There are no standard devices. Instead oftrying to keep up w/ new device dimensions, you should evaluate the breakpoints of yourdesign. Look at where the layout gets awkward and set a breakpoint. Then let the devices fallwhere they may. New devices appear almost every day. Your design is the constant in theequation. Plan accordingly.
  32. 32. Set media query breakpoints where the design breaks. Photo: Ballookey Klugeypop flickr.com/photos/ballookey/136450028/Tuesday, April 17, 12
  33. 33. “CSS Pixels” & “Hardware Pixels” Apple iPhone 4: 326 ppi Sony Ericsson XPERIA X10: 245 ppi LG KM900 Arena: 311 ppi Samsung I9000 Galaxy S: 233 ppi Samsung S8000 Jet: 301 ppi HTC HD2: 217 ppi Canon EOS 550D (T2i): 289 ppi Nokia N8: 210 ppi HTC Touch Diamond: 286 ppi Apple iPhone 3GS: 165 ppi Samsung S8500 Wave: 283 ppi Apple iPad: 132 ppi HTC Desire: 252 ppi Google Nexus One: 252 ppi Source: blog.gsmarena.com/how-does-the-iphone-4-pixel-density-stand-in-comparison/Tuesday, April 17, 12Here are points per inch for several mobile devices. Notice the iPhone 4 at the top with themost points per inch.
  34. 34. Some Pixels Are More Equal Than Others Hardware Pixel CSS PixelTuesday, April 17, 12The iPhone 4 has a pixel-density of 2. That means there are 2 “hardware” pixels on the screen for every “CSSpixel.” That makes fonts and images render very crisply on the screen, but it’s a problem when we’re trying tocalculate CSS. Thus we level the field by setting the zoom-level to 100%. When the zoom level is 100%, the ratio ofhardware pixels to CSS is 1.
  35. 35. Some Pixels Are More Equal Than Others Hardware Pixel CSS PixelTuesday, April 17, 12By putting “initial-scale=1” in the viewport meta tag forces the browser to make hardwarepixels equal CSS pixels. The problem is, this will apply to text and layout, but images willzoom up and appear pixelated. You need to figure out the pixel density so the image qualitymatches the density of the screen. Which leads us to...
  36. 36. Take Control of The Screen <meta name="viewport" content="width=device-width, initial- scale=1, maximum-scale=1">Tuesday, April 17, 12It’s a good idea to use a “viewport” meta tag in the head of your document to gain somecontrol and provide better consistency between mobile devices.
  37. 37. Take Control of The Screen width=device-width Without this, mobile browsers will zoom the page out to 980px.Tuesday, April 17, 12First in that meta tag, I’m telling the browser to make the content width the device width.device-width
  38. 38. Take Control of The Screen initial-scale = 1 Controls the zoom level when the page is loaded. (1 = 100%)Tuesday, April 17, 12
  39. 39. Take Control of the Screen maximum-scale = 1 Controls zooming. In my example, the maximum scale is set to 100%. Other options: minimum-scale & user-scalable.Tuesday, April 17, 12
  40. 40. Take Control of the ScreenTuesday, April 17, 12Left: before setting the viewport meta tag. Right: after.
  41. 41. Responsive Images & Media Photo:Vicky Somma flickr.com/photos/tgaw/2556511663/Tuesday, April 17, 12After after fluid layouts and media queries come responsive images. The talking phones areoutraged that we’re trying to send them a gigantic image.
  42. 42. Responsive Images & Media #container img { max-width: 100%; }Tuesday, April 17, 12At their simplest, responsive images respond to the layout by never exceed the width of theircontainer. Unfortunately HTML alone is lacking in terms of providing a way to place thesmallest possible image on the page. Remember, mobile devices are often lacking inbandwidth. Sending a large image to a small screen is an unnecessary burden. JavaScriptdoes provide some relief.
  43. 43. Start with Basic HTML <a id=”home-link” href=”http://sua.umn.edu”>Home</a>Tuesday, April 17, 12Start with the lowest common denominator. In this example, I’m using a link, but this couldbe any container. This HTML will work with any feature phone.
  44. 44. Use JavaScript to Detect Screen Dimensions h = screen.height;Tuesday, April 17, 12Next we have to try to evaluate the screen height. I use height because smart phones couldbe turned to landscape mode at any time, making the height the new width.
  45. 45. Use JavaScript to Detect Screen Dimensions h = screen.height; // Pixel ratio (WebKit Only) r = window.devicePixelRatio;Tuesday, April 17, 12With the advent of high density screens, we have to account for pixel-density. The iPhone 4has a pixel density of 2 and many Android phones have a pixel density of 1.5. Depending onmeta tags in the head of your document, an iPhone might report dimensions of 320x480even though it’s true resolution is 640x960. Caution: devicePixelRatio is WebKit-only.Fortunately this scenario if pure enhancement and won’t affect the functionality orinformation on the page. A non-WebKit browser will simply report a lower resolution and sothe image may seem a little pixelated.
  46. 46. Use JavaScript to Detect Screen Dimensions /* if devicePixelRatio is supported, calculate the device height */ if (typeof r !== undefined) {    /* Calculate the true number of pixels on the screen */     height = h * r; }Tuesday, April 17, 12We can test for this by making sure the result of devicePixelRatio is not ‘undefined’. If it is,we simply use the original height reading. If not, we can get the true height by multiplyingthe reported height by the pixel-density.
  47. 47. Use JavaScript to Detect Screen Dimensions // Set the image directory accordingly if (height <= 320) {     // load 320 header     d = 320; }Tuesday, April 17, 12In this example, I have directories with names matching a few key heights. A copy of theimage is stored in each directory that matches it’s width. So a 320px wide image resides inthe 320 directory.
  48. 48. Use JavaScript to Detect Screen Dimensions $(a#home-link).html(<img src="/images/mobile/ + d + / header.png" alt="This is alt text." id="logo" class="logos" />);Tuesday, April 17, 12I can then use JQuery write in this HTML with the directory I want. The image will then loadthat is large enough for the device, but somewhat optimized for the dimensions of thescreen. This method is not perfect. For instance, the image will not load until after the DOMhas fully loaded--since I’m using JQuery and the ready() method. Still it’s a fairly goodcompromise to minimize the bandwidth necessary to load the page.
  49. 49. Mobile First, Mobile Separate & RESSTuesday, April 17, 12Now that I’ve touched on a few techniques, I want to go over three approaches to developingfor mobile. Those are Mobile First, a separate mobile experience and RESS which stands forResponsive and Server Side.
  50. 50. Mobile First Luke Wroblewski Photo: foltzwerk flickr.com/photos/foltzwerk/2779814860/Tuesday, April 17, 12Mobile First is a concept advocated by Luke Wroblewski in his book of the same name. Thebasic approach is that sites should be first designed for mobile with desktop versions comingafter. This approach begins with a number of constraints that filter through to the desktopexperience.
  51. 51. Mobile First • One site for all devices • Focus on content that’s truly important • No User Agent sniffingTuesday, April 17, 12Some of the advantage of this approach are that you have one site for all devices. Theconstraints force you focus on what’s truly important. You avoid User Agent sniffing thatsome other techniques rely upon.
  52. 52. Mobile First • Potential for unnecessary overhead • Convincing stakeholders to embrace constraints may be a barrier • Requires polyfills for older browsersTuesday, April 17, 12Some disadvantages: Mobile networks are often slower, and sometimes users will have a capon their data plan. You have to be careful to truly embrace the constraints through the entirestack so you can minimize the size of pages and media. Along with that, it’s not always easyto convince stakeholders to embrace those constraints. Finally, for the site to work in allbrowsers, you’re going to need to use a few JavaScript polyfills.
  53. 53. Polyfills Respond: github.com/scottjehl/Respond (media queries) Overthrow: github.com/filamentgroup/Overthrow (overflow: auto) html5shiv: code.google.com/p/html5shiv (HTML5)Tuesday, April 17, 12Respond for media queries in older versions of IEOverthrow for using overflow: autohtml5shiv if you’re using html5
  54. 54. Feature Detection Modernizr modernizr.com Photo: Patrick Ciebilski flickr.com/photos/mccieb/Tuesday, April 17, 12Modernizr is a JavaScript library for detecting browser features. It offers a lot of flexibility inthat you can enhance your site based on the capabilities of each browser.
  55. 55. Modernizr • @font-face • CSS reflections • localStorage • background-size • CSS 2D transforms • Cross-window • border-image • CSS 3D transforms messaging • border-radius • CSS transitions • sessionStorage • box-shadow • applicationCache • Web Sockets • Flexible Box Model • Canvas • Web SQL DB • hsla & rgba color • Canvas text • Web Workers • Multiple backgrounds • Drag and drop • Geolocation • opacity • haschange Event • Inline SVG • text-shadow • History management • SMIL • CSS Animations • HTML5 audio & video • SVG • CSS Columns • IndexedDB • SVG clip pathes • CSS generated content • Input attributes • Touch events • CSS gradients • Input types • WebGLTuesday, April 17, 12Modernizr has a long list of features that it detects.
  56. 56. Mobile First Responsive Images Media Queries Flexible, Fluid LayoutTuesday, April 17, 12Encompasses all aspects of a responsive design to deliver one site that works for all devices.
  57. 57. Mobile First Responsive Images Media Queries Flexible, Fluid Layout Web StandardsTuesday, April 17, 12And responsive design is built upon web standards. If you’re already used to developing withstandards, responsive design is just reaching a little further with the same concept.
  58. 58. Tuesday, April 17, 12Here’s an example of a responsive design in action. Notice how he’s designed the layout andimages to work across different screen widths.
  59. 59. Separate Mobile ExperienceTuesday, April 17, 12Remember these guys? Both have also done sites with a totally separate mobile experience.
  60. 60. Separate Mobile Experience • Site tailored to use case • Eliminate unnecessary markup, CSS & JavaScript • May be easier to convince stakeholders to embrace constraintsTuesday, April 17, 12Some of the advantages of providing a separate mobile experience: The site can be tailoredthe use case. You have a lot of control over reducing unnecessary markup, CSS & JavaScript. Itmay be easier to convince stakeholders to embrace constraints if they get to keep therecontent somewhere else.
  61. 61. Separate Mobile Experience • Two sites • Might not meet all users’ needs • Relies on device detectionTuesday, April 17, 12Some of the disadvantages: You maintain two sites. A separate experience might not meet allyour users’ needs. You’re going to have to rely on some sort of device detection.
  62. 62. Device Detection detectmobilebrowsers.com detector.dmolsen.com Photo: Brad Buchanan flickr.com/photos/frozenisles/3443607776/Tuesday, April 17, 12For the projects we’ve done at SUA so far, we’ve relied on the script atdetectmobilebrowsers.com. I have more recently come accross Detector and it looks quitepromising.
  63. 63. detectmobilebrowsers.com Apache Lasso ASP nginx ASP.NET node.js ColdFusion PHP C# Perl IIS Python JSP Rails JavaScript jQuery Photo: Herr Olsen flickr.com/photos/herrolsen/6199045384/Tuesday, April 17, 12Returns boolean. Available is several languages.
  64. 64. detectmobilebrowsers.com <?php is_mobile(); ?> Photo: Jeff Kubina flickr.com/photos/kubina/170938326/Tuesday, April 17, 12Using the script is very simple.
  65. 65. Detector • detector.dmolsen.com • PHP only • Beta • Uses same database of tests as Modernizr Photo: Jason Ahrns flickr.com/photos/musubk/5578348098/Tuesday, April 17, 12Detector, by comparison, is only available in PHP. It’s still in beta. It does a lot more thandetect whether a device is mobile or not. It also has the same database of feature detectionas Modernizr.
  66. 66. Detector <?php if ($ua->isMobile) { // Code goes here } ?> Photo: DigiTaL~NomAd flickr.com/photos/urban-spaceman/3947680057/Tuesday, April 17, 12Here’s an example of how you might use Detector to detect mobile devices.
  67. 67. Preserve The URI When Redirecting Photo: Chris Campbell flickr.com/photos/cgc/3809196941/Tuesday, April 17, 12If you’re using a method to detect and redirect mobile devices, remember to preserve theURL. That is, if they’re trying to get to a specific page or resource, make sure you redirectthem to the equivalent page or resource on the mobile site. If you don’t have a mobileversion, you shouldn’t be redirecting.
  68. 68. if (is_mobile() && !isset($_COOKIE[mobile])) { $redirect = /mobile/; if (preg_match(/event/(d+)/, $_SERVER[REQUEST_URI], $matches) > 0) { $redirect .= $matches[0]; } setcookie(mobile); header(Location: . $redirect); exit; }Tuesday, April 17, 12
  69. 69. JQuery MobileTuesday, April 17, 12We’ve used the JQuery Mobile framework for all of your mobile projects so far.
  70. 70. JQuery MobileTuesday, April 17, 12For one reason: it’s thoroughly tested. This is an image of the JQuery Mobile testing table ofdevices.
  71. 71. JQuery Mobile Setup <div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div><!-- /header --> <div data-role="content"> <p>Page content goes here.</p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page -->Tuesday, April 17, 12Setting up the framework is fairly simple. First, it does a require an HTML5 doctype. Afterthat, it makes extensive use of the HTML5 data attribute. You ca see several “roles” defined inthe markup here.
  72. 72. Ajax Page Loads <a itemprop="url" data-transition="slide" href="/path/">link</a>Tuesday, April 17, 12The framework also does a lot of heavy lifting for you. For instance, HTML page links areautomagically turned into AJAX page loads with nice transitions defined in a “data-transition”attribute.
  73. 73. Ajax Page Loads <a itemprop="url" data-transition="slide" href="/path/">link</a>Tuesday, April 17, 12The framework also does a lot of heavy lifting for you. For instance, HTML page links areautomagically turned into AJAX page loads with nice transitions defined in a “data-transition”attribute.
  74. 74. JQuery Mobile Page Transition Options • fade • slideup • pop • slidedown • flip • none • turn • flow • slideTuesday, April 17, 12The framework also offers several transition options.
  75. 75. JQuery Mobile ThemesTuesday, April 17, 12There are also 6 built-in themes available. You also have the option of designing and codingstyles for your own theme.
  76. 76. JQuery Mobile Themes <div data-theme="a"></div>Tuesday, April 17, 12Themes are defined using a “data-theme” attribute.
  77. 77. JQuery Mobile Grid Framework <div class="ui-grid-a"> <div class="ui-block-a"> </div> <div class="ui-block-b"> </div> </div><!-- /grid-a -->Tuesday, April 17, 12There is also a grid framework available. Here’s an example of a two-column grid. There’s awrapper with the class “ui-grid-a”. The child elements have classes of “ui-block-a” and “ui-block-b” respectively to place them as two columns on the page.
  78. 78. JQuery Mobile Grid Framework • two-column: ui-grid-a • three-column: ui-grid-b • four-column: ui-grid-c • five-column: ui-grid-d Photo: Mike Smail flickr.com/photos/smailtronic/2214772479/Tuesday, April 17, 12You can create grids all the way up to 5 columns.
  79. 79. Binding JavaScript Events in JQuery Mobile Use pageInit() instead of $(document).ready()Tuesday, April 17, 12Since AJAX is used to load page content, $(document).ready() is only called with the first pageload. To successfully trigger events when pages load, use JQuery Mobile’s pageInit instead.
  80. 80. REsponsive & Server Side (RESS) Photo: foltzwerk flickr.com/photos/foltzwerk/2779814860/Tuesday, April 17, 12Luke Wroblewski, who authored Mobile First, also has written about RESS, which is acombination of responsive design techniques and server-side feature detection.
  81. 81. REsponsive & Server Side (RESS) • Heavy lifting handled on server side • Able to provide a finely-tuned experience • Removes need for redirectsTuesday, April 17, 12Some of RESS’ advantages: The work of feature detection is handled on the server side,making the browser on the phone do less work. It offers a way to create a very finely-tunedexperience. No more redirects to a different mobile site. Preserves what Phil Hawksworth callsthe contract of the URI for providing content.
  82. 82. REsponsive & Server Side (RESS) • Harder to execute • Requires some user agent sniffingTuesday, April 17, 12 • Harder to execute ◦ more resources needed in terms of client and server side coding skills and time ◦ A lot of thought and planning needs to go into components and device classes (phone, tablet, desktop, TV, etc.) • Requires some user agent sniffing
  83. 83. There is no single solution and I will stand on Jeffery Zeldman’s coffee table and say that.Tuesday, April 17, 12
  84. 84. Tools & Resources Testing Links • Comprehensive list of emulators: • MobilePerf (z.umn.edu/mobileperf) mobilexweb.com/emulators • Adobe Shadow (labs.adobe.com/ • springbox.com/mobilizer technologies/shadow) Books • lukew.com (@lukew) • Responsive Web Design - Ethan • ethanmarcotte.com (@beep) Marcotte • jquerymobile.com • Mobile First - Luke Wroblewski • detectmobilebrowsers.com • detector.dmolsen.com • mobilizr.comTuesday, April 17, 12
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×