LukeW | Multi-Device Layout Patterns
11 weeks ago by sunpig
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.
lukew
responsive
adaptive
layout
linear
column
navigation
design
css
mediaquery
pattern
from twitter
11 weeks ago by sunpig
Mobile First Design: Why It’s Great and Why It Sucks | Design Shack
11 weeks ago by sunpig
The reality of the situation is a little more complex though. When you start with the desktop platform, you tend want to take advantage of everything that platform has to offer. You build an amazing product that leverages lots of great technology, only to realize that none of it scales well down to mobile. This can and does lead to severely watered down mobile products that feel more like an afterthought than a polished, finished product. Does this happen with every project? Perhaps not, but the story is likely far more common than you’d like to believe.
mobilefirst
design
webdev
frontend
constraint
progressive
enhancement
graceful
degradation
approach
rwd
responsive
adaptive
mobile
11 weeks ago by sunpig
Greenbelt Festival - Where arts, faith and justice collide
11 weeks ago by sunpig
Lovely responsive design & implementation: designed & built by @rachelandrew, @drewm, @ratiotype
responsive
web
design
rwd
frontend
fluid
adaptive
art
culture
music
css
html
11 weeks ago by sunpig
cxpartners | Responsive Design & ROI – observations from the coalface
11 weeks ago by sunpig
Responsive Design & ROI – observations from the coalface
responsive
adaptive
design
development
agile
webdev
webdesign
breakpoint
fluid
grid
11 weeks ago by sunpig
Fashionably flexible responsive web design (full day workshop) // Speaker Deck
11 weeks ago by sunpig
So many good examples of responsive (& mobile in general) web design in this deck by @malarkey:
andyclarke
malarkey
responsive
adaptive
web
design
mobile
development
frontend
device
size
dimension
11 weeks ago by sunpig
Responsive News - Cutting the mustard
12 weeks ago by sunpig
RT @brad_frost: Absolutely fantastic read about responsive web design and devices support: Related: ...
bbc
news
design
webdev
frontend
mustard
responsive
adaptive
layout
speed
js
javascript
amd
module
detect
browser
support
12 weeks ago by sunpig
Height matters! – Anders M. Andersen
february 2012 by sunpig
Show some love to the vertical; consider "max-height" as part of your media queries: (Especially for landscape mode!)
mediaqueries
media
query
vertical
horizontal
maxheight
max-height
height
width
landscape
portrait
tall
responsive
adaptive
design
layout
february 2012 by sunpig
Responsive Navigation Patterns | Brad Frost Web
february 2012 by sunpig
RT @brad_frost: Responsive Navigation Patterns: an in-depth look into responsive web design navigation techniques
bradfrost
mobile
web
navigation
pattern
desktop
responsive
adaptive
width
mediaquery
adjust
webdev
frontend
february 2012 by sunpig
RESS, Server-Side Feature-Detection and the Evolution of Responsive Web Design – Mobile in Higher Ed
february 2012 by sunpig
RT @dmolsen: RESS, Server-Side Feature-Detection and the Evolution of Responsive Web Design
ress
responsive
server
css
adaptive
yiibu
design
webdev
frontend
mobile
wpo
february 2012 by sunpig
Redefined | Trent Walton
february 2012 by sunpig
RT @brad_frost: "The largest and most exciting part of the design process now happens in the browser" great read by ...
trentwalton
responsive
adaptive
design
pixel
proportion
layout
mediaquery
webdev
html
css
from twitter
february 2012 by sunpig
Responsive Advertising| Mark Boulton
november 2011 by sunpig
@krijnhoetmer @ppk @stephenhay It would be awesome if you could get someone from the Ad industry to speak at Mobilism:
markboulton
responsive
advertising
ad
industry
layout
adaptive
mpu
mmu
unit
size
web
webdev
webcommerce
financial
revenue
package
november 2011 by sunpig
Pragmatic responsive design
november 2011 by sunpig
Wholly awesome, Batman! "Pragmatic Responsive Design" presentation by @yiibu MUST READ for mobile.
pragmatic
responsive
design
adaptive
layout
width
media
query
server
yiibu
bryanrieger
stephanierieger
css
breakpoint
webdev
mobile
november 2011 by sunpig
Fixed Positioning in Mobile Browsers | Brad Frost Web
november 2011 by sunpig
"Take a step back and understand why you need fixed positioning in the first place." YES @brad_frost
bradfrost
fixed
positioning
overflow
scroll
webdev
design
layout
adaptive
november 2011 by sunpig
Responsive IMGs Part 3 — Future of the IMG Tag « Cloud Four
october 2011 by sunpig
RT @grigs: New blog post: Responsive IMGs Part 3 — Future of the IMG Tag
image
responsive
adaptive
resolution
density
layout
html
img
design
mobile
jasongrigsby
grigs
cloudfour
from twitter
october 2011 by sunpig
Responsive IMGs Part 2 — In-depth Look at Techniques « Cloud Four
october 2011 by sunpig
"Responsive IMGs Part 2 — In-depth Look at Techniques" Great article by @grigs
image
responsive
adaptive
resolution
density
layout
html
img
design
mobile
jasongrigsby
grigs
cloudfour
from twitter
october 2011 by sunpig
LukeW | RESS: Responsive Design + Server Side Components
september 2011 by sunpig
Progressive enhancement with the traditional three tiers of HTML + CSS + JS misses something. Tier 0 is the Server.
lukew
lukewroblewski
mobile
responsive
adaptive
server
client
web
design
progressive
enhancement
ress
from twitter
september 2011 by sunpig
Toffee-nosed. — Unstoppable Robot Ninja
march 2011 by sunpig
RT @stephenhay: Giddy with agreement on this post by @beep:
ethanmarcotte
robot
ninja
css
design
responsive
adaptive
logic
argument
fallacy
audience
users
ux
march 2011 by sunpig
related tags
ad ⊕ adactio ⊕ adaptive ⊖ adjust ⊕ advertising ⊕ advice ⊕ agile ⊕ ala ⊕ alistapart ⊕ amd ⊕ andyclarke ⊕ apache ⊕ app ⊕ approach ⊕ architecture ⊕ argument ⊕ art ⊕ audience ⊕ background ⊕ bbc ⊕ block ⊕ boston ⊕ bostonglobe ⊕ bradfrost ⊕ breakpoint ⊕ browser ⊕ bryanrieger ⊕ business ⊕ cache ⊕ capability ⊕ chrismills ⊕ client ⊕ cloudfour ⊕ colspan ⊕ column ⊕ constraint ⊕ content ⊕ css ⊕ css3 ⊕ culture ⊕ data ⊕ daveolsen ⊕ decision ⊕ degradation ⊕ density ⊕ design ⊕ desktop ⊕ detect ⊕ development ⊕ device ⊕ dimension ⊕ dmolsen ⊕ dyn ⊕ enhancement ⊕ ethanmarcotte ⊕ expectation ⊕ fallacy ⊕ feature ⊕ filament ⊕ filamentgroup ⊕ financial ⊕ fittest ⊕ fixed ⊕ flexible ⊕ fluid ⊕ format ⊕ frontend ⊕ frontent ⊕ gameboy ⊕ globe ⊕ graceful ⊕ grid ⊕ grigs ⊕ group ⊕ header ⊕ height ⊕ horizontal ⊕ htaccess ⊕ html ⊕ image ⊕ img ⊕ industry ⊕ ipad ⊕ jasongrigsby ⊕ javascript ⊕ jeffcroft ⊕ jeremykeith ⊕ jquery ⊕ js ⊕ landscape ⊕ layout ⊕ lettering ⊕ linear ⊕ links ⊕ logic ⊕ lukew ⊕ lukewroblewski ⊕ malarkey ⊕ margin ⊕ markboulton ⊕ max-height ⊕ maxheight ⊕ media ⊕ mediaqueries ⊕ mediaquery ⊕ mmu ⊕ mobile ⊕ mobilefirst ⊕ modernizr ⊕ module ⊕ mpu ⊕ music ⊕ mustard ⊕ nathanford ⊕ native ⊕ navigation ⊕ news ⊕ ninja ⊕ noscript ⊕ opera ⊕ overflow ⊕ package ⊕ padding ⊕ pattern ⊕ php ⊕ pixel ⊕ planning ⊕ plugin ⊕ portrait ⊕ positioning ⊕ postpc ⊕ pragmatic ⊕ preparser ⊕ problem ⊕ progressive ⊕ proportion ⊕ query ⊕ range ⊕ resize ⊕ resolution ⊕ responsive ⊕ ress ⊕ revenue ⊕ robot ⊕ row ⊕ rwd ⊕ sass ⊕ script ⊕ scroll ⊕ server ⊕ site ⊕ size ⊕ slot ⊕ speed ⊕ stephanierieger ⊕ strategy ⊕ support ⊕ table ⊕ tablet ⊕ tall ⊕ template ⊕ thomasprior ⊕ trentwalton ⊕ ui ⊕ unit ⊕ upstatement ⊕ users ⊕ ux ⊕ vertical ⊕ viewport ⊕ web ⊕ webcommerce ⊕ webdesign ⊕ webdesignshock ⊕ webdev ⊕ width ⊕ wireframe ⊕ wpo ⊕ yiibu ⊕ zeldman ⊕ zomigi ⊕ zone ⊕Copy this bookmark: