www.it-ebooks.info getting startod Responsive design is also a state of mind = Fluid-grid layouts CSS media queries Fluid images/media ULLET POINTS Q = The mobile web isnot unlike the Wild West its full of surprises and adventure. The mobile web browser landscape is diverse, and, sometimes, crazy-making. "= Just because we can use the same layout on a mobile device as in a “traditional” browser doesn't mean we necessarily should = Responsive Web Design (RWD) is a collection of approaches to make our web content adapt tothe user, not the other way around (Forcing the user to look at rigidly formatted pages) = RWD isa combination of CSS3 media queries, fluid- gtid layouts, and fluid images. I's also a way of thinking about layout and content = CSS3 media queries let us apply CSS selectively to different user environments based on the current value of relevant media features, Letting go of pixel-perfett layouts and instead designing oor __ Content to adapt te different (browser or device) environments Media types (e.g, screen, print, projection) have media features (wicitn, col monochrome, orientat ion), Its these media features we evaluate in our media queries. A CSS media query isa logical expression. When it evaluates to TRUE, the enclosed CSS rules are applie. ‘A fluid layout is one that uses proportional widths instead of fxed widths such that the content ofthe page scales and lows naturally across a range of window widths. Fluid images are a CSS technique that keeps outsized images (or media) from “breaking out” of their parent elements when the parent element width is smaller than that ofthe image (or media). The images and media scale down as the parent element scales down Using a simple font-size reset on the element and defining font sizes in ems or percentages keeps our type uid youarohero> 44wat exacty is a viewport? Imagine taking a sheet of cardboard and cuting out a rectangle in the middle of it Lay that rectangle over your monitor so you can only see the portion of the web page that shows through the rectangle, That's what a viewoort does for web pages. QQ: so the viewport tag te the browser wht sz fo make the viewport? A: exact eta 08 ste vinpor to S60 pal youve otmzed Your page or slr eens, sting the cneta-vaewport> tgllshe browser ct set te veo today & BULLET POTS $$ A a thoreyare ne Dumb Questions QQ: wnat are breakpoints? deserting the resluton at wich a dosignar decides to change ne layout ofa page. This is usualy doe via media quoi checking toseeifa page snare or wide than 3 cern rurberof piel ‘complex responsive design may have multple breakpoin's, including some that make wholesale changes tothe layout as wall as some minor breakpoints that only make a few largeted tweaks to fx minor layout issues, QQ: saowtwantto prevent people from zooming, but that OS bug = prety heinous there anyway to enable Zooming and not havea broken page? A\: Youcan ina tase votarond ath tht conf0r285 www.it-ebooks.info responsible responsiveness QQ: wy des the ovata wth he map cr inthe frst place? A. sacs to maps an done hat denntca wth ro ee ao ten ewido smal he vow cant crore mapa snl sobeletcoumn ents ovo not con Q: bowen adding amin-wideh totho map break th responsive design by creating an element that doesnt eae wth the browser window? Technically, yes. t seems tke a decent soliton here because we've modified the macia queries to adaress overlapping content. Anathereption would have been to Use media queies to adjust the dimensions ofthe map and proportions of the columns. ‘Adding media queries to an existing desktop site may make it look good on mobile, but doesn't mean that itis. ‘mobile optimized. "= Because most mobile browsers don't support plug-ins, there are fewer tools to assist mobile web developers. = Using a proxy server ora testing solution tke Blaze Mobitest can help you see what is actually getting downloaded by a mobile browser. = HTTP archive files and waterfall charts are essential performance tools, 1 Mobile-first Responsive Web Design helps optimize web pages by making sure that smaller resources are downloaded by default. Mobile-frst RWD is another form of progressive enhancement that uses screen size to determine how to.enhance web pages. Designing for mobile fist forces you to focus on what really matters, thus helping you remove cruft from ages. Internet Explorer 8 and below do nat support media queries. Conditional comments are a workaround JavaScript can augment media queries by testing for sorgen size and adding content when appropriate, Instead of designing breakpoints based on the typical screen resolutions, let the content dictate the resolutions at which you need to modily the layout, youarchere> 89the new si pushes creature comforts' buttons Great success! Drape ture Comforts’ COREREEN POE ni Wiles Bask. Dr 2. messages) you sete rer =ieiae 2, Messages (2). ate mn 2. Your Schaiula ‘ingen ene he — Android Nexus S amu POINTS = It'.a big world, and there are bitions (yep) of mobile phones. Not al of them are bleeding-edge smartphones, and sometimes you have to make your ‘website or web app work with those phones. 1 There are reabife circumstances: older systems, recalcitrant clens, or specific projects that make having a totally separate mobile website nacessary. = One of the ways fo route mobile trafic to a mobile-spectfic website isto use server-side mobile device detection and redirection. = User-agent sniffing s a popular technique for evaluating whether an incoming request is from @ mobile browser. = User-agent sniffing examines the User-Agent. header that browsers send as part of each HTTP request. Users can “spoof their user agent— knowingly or nat, This is a weakness ofthis method. Motkup on a BlackBerry 330, x Creature Comforts __ Agent Portal Ieicome back Br. Jessica Evans 4. Your Dashboard Looks fine on newer smartphones, like this www.it-ebooks.info reature Co Agent Portal Welcome back Br 1 Your Daehboard AL You tan see the final mockup at: hete-//nt--mw.tom/th3/en/6. Some older mobile browsers (and current, lower-end mobile devices) implement different standards for HTML and CSS. XHTML Mobile Profile (KHTML-MP) is a mobile-spectfc standard used by many mobile browsers. Itis similar to XHTML, but does not support everything that XHTML does. Similarly, CSS Mobile Profile (CSS-MP) is a mobile-spectfic flavor of CSS. XHTML-MP was superseded by XHTML-Basic ‘11, which is almost the same except for a few new supported elements, It's important to choose the appropriate DOCTYPE for your mobile web project and pay atention to keeping your markup valid—bad code can make phones behave very badly. 134 Chaptor 3www.it-ebooks.info detective work How do | know my customers have the right stuff? Now that I have a device requirements list, haw do I know if a specific phone fits my criteria? Great question. There are two main methods: server-side device detection and client-side feature detection. We're going to look at device-detection databases in the next chapter. It sounds like you're readly for this interlude to end and get back to building things. We tol ‘wouldn't take long [Now get ready to roll up your sleeves again and dig into the crazy world of device databases and the bane of web developers everywhere: user-agent strings Don't worry. It isn't as bad as it sounds. By the end of the next chapter, you'll be bossing those evil user- agent strings around, & BULLET POINTS 150 Every project draws the line somewhere on which = Progressive enhancement should be the default dovices it supports approach, This will make your site work on many more devices than you can officially support Knowing where to draw the line isa combination of experience, research, and gut instinct = Unless you know for certain that you cannot support a device, you shouldn't exclude it. New browsers show up al the time. Give them a chance to prove theyre up to snuf There is a difference between devices you don't support and those you can’t support vecause they lack eral features that make itimpossible to Use your site = Dont let mabile’s complexity overwhelm you. You already have all of the tools you need to know ‘where to draw the line, Trust your experience and instincts. Look at your project requirements and your target, audience to help decide where to draw the line, Chapter 4www.it-ebooks.info device databases and classes How do I make a choice between server-side detection, which can trip up on bad or mysterious user agents, and Responsive Web Design and feature detection, which doesn't have full support inall mobile browsers? It doesn’t have to be one way or the other. You don't have to throw RWD out the window when you use server-side device detection. Some very handsome things can be accomplished. th a combination of the two, Each has its pros and cons. Making the two dance in harmony is part of what we'll look at in Chapter 9, as we look \ to the future, Qe POINTS Device data repositories lke WURFL (Wireless Device classes are abstract groupings of devices based Universal Resource FiLe) allow us to get at very detailed «on common capabilities. information about a whole lot of devices. "= By slotting a device into a device class, we can take = WURFL data contains over 500 capabilties per device, further action upon it (e.g, delivering adapted content) organized into a couple dozen groups. without having to track individual capabilties constantly, = We canuse a device database to identify a value fora ‘It important to buildin default device classes, error given capability and act upon that value checking, and generic device handling into any code that uses ad 1 WURFL’s PHP APIis one of several APIs for interacting at uses @ device database fr identficaton with WORFL data, Diferant APIs handle and represent Like neary everthing onthe Web, server-side device the data slightly diferent detecton fs nota 100% buletproof concept "= ScientiaMobile was founded in 2011 by some of the jide detection and content adaptation can be original WURFL maintainers. The company provides client-side adaptation—ine two are not open source and commercial icenses for WURFL, There mutually exclusive, We'll be looking into this more later. ate alternatives if WURFL doesnt work for you. "= When working on larger projects, it can be helpful to jas into device classes. youarehere> 245you're done Hey, guys. That's looking pretty good. Tim excited about moving on to the next phase of the Tartanator—that’s where the fun stuff really happens. www.it-ebooks.info 2 BULLET POLES. _—-ARAODa A People want apps! The definition of what, exactly, makes ‘a website a web app is fuzzy. Applike websites tond to feel more interactive than content pages. Chunks of content and data are often retrieved asynchronously and inserted into an existing DOM, reducing the frequency of full-page loads. HTMLS's a specifi, single thing's a spec representing the evolution of HyperText Markup Language (HTML)—but he term HTMLS is often used to represent a combination of technologies that create applike web experiences, Building mobile web apps from scratch can be very complex. We encourage you to try it! But for our purposes, we used a mobile user interface development framework to help us out ‘There are lots of mobile web frameworks out there (more every day), representing many different approaches and emphases, Query Mobile is a popular mobile web framework. Ithas a strong relationship with wellformed HTMLS markup, which makes it relatively straightforward to build mobile interfaces from basic code. We built the stucture for phase 1 of the Tartanator by, ‘among other things, using jQuery Mobleenhianced lstviews, headers, footers, navbars, and form elements Making a web app feel more native is always a balancing ac, requiring some careful decisions. We used some HTMLS form element attributes to build our prototype form. jQuery Mobile helps to adapt these form elements across mobile browsers, including ‘adaptation for those that don't support them yet, 264 Chapter 6