web app ui design patterns

web app ui design patterns

hi, i'm pete, a developeradvocate at google. i use a lot of different devicesto browse the web-- my desktop, my tablet, my phone. now some of thesesites look great across all thesedifferent devices. but other sites? not so much. when a site isn'toptimized or designed to work across themulti-device web,

it requires panning,zooming, trying to hit those tiny buttons. it's just no fun. and those same siteswhen viewed on my tv can be just as awkward. the buttons may bebigger, but touching my tv is just going toleave a fingerprint. it's not going to do anything. building sites that workwell on the multi-device web

isn't hard, but it doesrequire a shift in the way that we think about it. small screens aren't justzoomed-in big screens. instead, we need to tailorour content and styles for the multi-device web. the easiest wayto get started is by designing for a smallscreen, and then building up. so let's give it a shot. i've already created a page thatlooks great on a small screen.

it has all my content, thestyles for the small screen, and it includes themeta viewport tag. the meta viewporttag is important because it tellsthe browser to adapt the content to thesize of the device. it's important to setwidth=device-width, and initial-scale=1 to establisha one-to-one relationship between css pixels anddevice-independent pixels. without the meta viewporttag, mobile browsers

lie and pretend that they're980 pixels wide-- desktop width. our content looksweird because it's scaled to fit on a 980pixel-wide display, resulting in a pagethat's just way too small. with our viewportproperly set, we now have our siteoptimized for mobile. so let's make it lookbetter on a bigger screen by adding a breakpoint. a breakpoint is used to displaydifferent styles depending

on characteristics ofthe device, like device width or device pixel density. we can apply differentstyles using media queries, giving us a completelyresponsive experience. media queries onlyapply their styles if the device matches the query. you can either specify the queryby adding a media attribute to the linked css file,or directly in the css. for most designs, you'llfind the min-width query

to be the most helpful. min-width rules are appliedfor any browser width over the valuedefined in the query. defining breakpointsbased on specific devices, products, brand names, operatingsystems, anything like that, will always result in amaintenance nightmare. instead, use the content tofind the right breakpoint. let's expand ourpage and see where a breakpoint becomes necessary.

500 pixels looks like agood place for a breakpoint, so let's go aheadand add one there. i've added a new stylesheet with a media query that tests the browser width. if the browser is atleast 500 pixels wide, then the styles inweather-large.css are applied. great. now our base styles areapplied on smaller screens, but on screens over500 pixels wide,

the media querykicks in, giving us a great look for wider screens. now in addition tochoosing major breakpoints, it's also helpful toadd minor breakpoints. let's tweak some little things. for example, i've addeda minor breakpoint at 400 pixels that adjuststhe margins and paddings, ups some font sizes, and changesthe layout of a few items to make things fitmore naturally.

if you want to learn moreabout minor breakpoints, have a look at theweb fundamentals site. now obviously,there's a lot more to say about buildingawesome multi-device sites. but if you start small,add the meta viewport tag, and then resize your browseruntil the content tells you that a breakpoint's necessary,you're already well on the way. thanks for watching. go build something awesome.

web app ui design patterns WordPress 4.0 Rumor and News on the Web