Mobile Web Development: The Challenges & How to Meet Them
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Mobile Web Development: The Challenges & How to Meet Them

  • 2,537 views
Uploaded on

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

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

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • 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
    Are you sure you want to
    Your message goes here
    Be the first to like this
No Downloads

Views

Total Views
2,537
On Slideshare
2,511
From Embeds
26
Number of Embeds
4

Actions

Shares
Downloads
17
Comments
1
Likes
0

Embeds 26

http://www.scoop.it 21
http://localhost 3
http://us-w1.rockmelt.com 1
https://si0.twimg.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. Student Unions & Activities 2011 Poll 50% have a smartphone 7% plan to get oneTuesday, April 17, 12Our unscientific student poll.
  • 3. Tuesday, April 17, 12Recognize?
  • 4. YavinTuesday, April 17, 12This is Yavin, a red giant planet.
  • 5. Yavin 4 YavinTuesday, April 17, 12This is Yavin 4, the location of the rebel base
  • 6. Student Unions & Activities Website 2011: 4.34%Tuesday, April 17, 12A snapshot from SUA a year ago.
  • 7. Student Unions & Activities Website 2012: 9.03%Tuesday, April 17, 12This year.
  • 8. Homecoming Website 2010: 3.8%Tuesday, April 17, 12Homecoming 2010 during the event.
  • 9. Homecoming Website 2011: 11.64%Tuesday, April 17, 12Homecoming 2011 during the event.
  • 10. Spring Jam Website 2010: 5.46%Tuesday, April 17, 12Spring Jam 2011 during the event.
  • 11. Spring Jam Website 2011: 13.44%Tuesday, April 17, 12Spring Jam 2011 during the event.
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Set media query breakpoints where the design breaks. Photo: Ballookey Klugeypop flickr.com/photos/ballookey/136450028/Tuesday, April 17, 12
  • 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. 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. 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. 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. 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. Take Control of The Screen initial-scale = 1 Controls the zoom level when the page is loaded. (1 = 100%)Tuesday, April 17, 12
  • 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. Take Control of the ScreenTuesday, April 17, 12Left: before setting the viewport meta tag. Right: after.
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Separate Mobile ExperienceTuesday, April 17, 12Remember these guys? Both have also done sites with a totally separate mobile experience.
  • 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. 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. 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. 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. detectmobilebrowsers.com <?php is_mobile(); ?> Photo: Jeff Kubina flickr.com/photos/kubina/170938326/Tuesday, April 17, 12Using the script is very simple.
  • 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. 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. 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. 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. JQuery MobileTuesday, April 17, 12We’ve used the JQuery Mobile framework for all of your mobile projects so far.
  • 70. JQuery MobileTuesday, April 17, 12For one reason: it’s thoroughly tested. This is an image of the JQuery Mobile testing table ofdevices.
  • 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. 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. 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. JQuery Mobile Page Transition Options • fade • slideup • pop • slidedown • flip • none • turn • flow • slideTuesday, April 17, 12The framework also offers several transition options.
  • 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. JQuery Mobile Themes <div data-theme="a"></div>Tuesday, April 17, 12Themes are defined using a “data-theme” attribute.
  • 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. 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. 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. 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. 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. 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. There is no single solution and I will stand on Jeffery Zeldman’s coffee table and say that.Tuesday, April 17, 12
  • 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