Not Signed-In
Which clippings match 'Adaptive Layout' keyword pg.1 of 1
11 MAY 2012

Luke Wroblewski on: Multi-device Layout Patterns

"Through fluid grids and media query adjustments, responsive design enables Web page layouts to adapt to a variety of screen sizes. As more designers embrace this technique, we're not only seeing a lot of innovation but the emergence of clear patterns as well. I cataloged what seem to be the most popular of these patterns for adaptable multi–device layouts."

(Luke Wroblewski, 14 March 2012, via Christopher Allwood)

1

TAGS

adapt to screen sizes • adaptable multi-device layout • adaptive layoutBBC • column • column drop • columnscommunication design • design for large screen • design for mobiledesign for the screendesign innovationFacebook • Five Simple Steps • fluid grids • Food Sense (website) • Google (GOOG)grid systemHCI • image layout • information architectureinteraction designinterface designlayout • layout adjustments • layout designlayout patterns • layout shifter • layouts • Luke Wroblewski • margins • media query adjustments • mobile design • Modernizr • mostly fluid • multi device • multi-column layout • multi-devicemulti-device adaptation • multi-device layout patterns • multiple screen sizes • NUI • off canvas • optimised for mobilepage layoutpage layout pattern • Path (app) • responsive design • responsive design layout patterns • responsive web design • screen size • screen sizesscreen space • single column layout • small screen • small screen sizes • small screens • stacking • stacking columns • The Boston Globe • tiny tweaks • Trent Walton • UIusabilityvisual communicationvisual screen designweb designweb page layoutsweb pageswebsite

CONTRIBUTOR

Simon Perkins
19 APRIL 2012

Bryan Rieger: Rethinking the Mobile Web

"A few months back I submitted the smallest speck of an idea for a talk I was hoping to present at Over The Air in London. Having presented at Over The Air before I assumed my experiences this time around would more or less be the same – a chance to bounce a few of my recent thoughts off two–dozen or so UK developers.

To suggest that my assumption was wrong would in–fact be a massive understatement...

Three weeks later, the dust is still settling on the 90,000 140,000 presentation views, hundreds of tweets, and multitude of conversations, and I finally have time to provide the presentation with a much–needed introduction."

(Bryan Rieger)

Fig.1 "Rethinking the Mobile Web" by Yiibu

1

TAGS

abstraction layer • accessible and inclusive mobile experiences • adaptive layoutAJAXAndroid OSApple • Bada • BlackBerry LtdBMW • Bryan Rieger • cHTML • CSS animations • CSS3device • DeviceAtlas • feature phone • featurephone • Fennec • Google (GOOG)HTMLHTML5Internet accessInternet ExploreriOSiPhone • Java ME • JavaME • market sharemedia queries • media types • MicroB • mobile browsermobile devices • mobile internet users • mobile operating systems • mobile web • most used devices • Nokia • Nokia Qt • Obigo • OBML • one web • Opera Binary Markup Language • OperaMini • optimised for mobile • Over The Air • Palm (OS) • phone • popular devices • presentation • real web • Rethinking the Mobile Web • Samsung • Skyfire • SlideSharesmartphoneSony Ericsson • SquirrelFish • standards support • SVG • Symbian • tabbed browsingtechnology • UK developers • w810i • WAP • WebKit • WebOS • William GibsonWindows Mobile • WML • WURFL • Yii

CONTRIBUTOR

Simon Perkins
07 MARCH 2011

Responsive Web Design

"Recently, an emergent discipline called 'responsive architecture' has begun asking how physical spaces can respond to the presence of people passing through them. Through a combination of embedded robotics and tensile materials, architects are experimenting with art installations and wall structures that bend, flex, and expand as crowds approach them. Motion sensors can be paired with climate control systems to adjust a room's temperature and ambient lighting as it fills with people. Companies have already produced 'smart glass technology' that can automatically become opaque when a room's occupants reach a certain density threshold, giving them an additional layer of privacy.

In their book Interactive Architecture, Michael Fox and Miles Kemp described this more adaptive approach as 'a multiple–loop system in which one enters into a conversation; a continual and constructive information exchange.' Emphasis mine, as I think that's a subtle yet powerful distinction: rather than creating immutable, unchanging spaces that define a particular experience, they suggest inhabitant and structure can–and should–mutually influence each other.

This is our way forward. Rather than tailoring disconnected designs to each of an ever–increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards–based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design. But how?"

(Ethan Marcotte, 25 May 2010)

1

TAGS

A List Apart • adaptive • adaptive approachadaptive layoutarchitecture • art installations • climate control systems • constructive information exchange • contextconvergencecrowdCSS3designdesign for the screendevice • embedded robotics • Ethan Marcotte • flexibilityform and contentHTML5information in contextJackson Pollockmedia queries • Michael Fox • Miles Kemp • mobile • motion sensors • responsive • responsive architecture • responsive designresponsive web designSimon Collison • smart glass • solutionspacetechnology • tensile materials • usabilityvisualisation • wall structures • web designweb standards

CONTRIBUTOR

Simon Perkins
Sign-In

Sign-In to Folksonomy

Can't access your account?

New to Folksonomy?

Sign-Up or learn more.