LukeW | Multi-Device Layout Patterns
6 weeks ago by fjordaan
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.
layout
mobile
patterns
responsive
lukew
multi-device
multiple
device
off-screen
navigation
swipe
6 weeks ago by fjordaan
A better Photoshop grid for responsive web design » Blog » Elliot Jay Stocks
february 2012 by fjordaan
Compare that to a container that has a width of 1000px. 1000 is a nice, easy, round number. Dividing by 1000 results in clean percentages and better still, dividing by 1000 is something we can do in our heads: just remove the zero. A 140px column inside a 1000px container is 14%. A 500px column in a 1000px container is 50%. 320px is 32%. Easy!
photoshop
grid
responsive
fluid
liquid
layout
february 2012 by fjordaan
iPad App concept based on a fluid layout | Moritz Haarmann's Blog
september 2011 by fjordaan
I’m going to discuss briefly a concept idea i had recently, replacing full-screen view controllers with a .. fluid layout. Just look at the video first to get an idea of what I’m talking about. Keep in mind that this is in no way a finished/polished app ( and probably will never be one, considering trademarks and stuff ).
ipad
concept
layout
ui
fluid
twitter
francois
comment
ikea
september 2011 by fjordaan
HTML5 Rocks - Quick hits with the Flexible Box Model
march 2011 by fjordaan
I'd bet that you've done your fair share of styling elements to be arranged horizontally or vertically on a page. As of yet, though, CSS has lacked a suitable mechanism for this task. Enter the CSS3 Flexible Box Module, or Flexbox for short.
css3
html5
layout
flexbox
paulirish
march 2011 by fjordaan
jQuery Masonry · David DeSandro
march 2010 by fjordaan
Masonry is a layout plugin for jQuery. Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.
columns
css
jquery
layout
daviddesandro
float
alternative
grid
boxes
fit
masonry
march 2010 by fjordaan
UK.keylayout - UK keyboard mapping for Mac OS X 10.2 or higher
january 2010 by fjordaan
The standard British key layout makes a UK-issue Apple keyboard work as it should do, but for some of us who have typed on non-Apple keyboards our whole lives - or for those Mac owners who are using a third-party keyboard - the Apple standard layout doesn't feel quite right. For example, Shift+2 gives you @, whereas on more standard keyboards it gives you ".
uk
layout
keyboard
mac
osx
fix
british
january 2010 by fjordaan
A List Apart: Articles: Fluid Grids
march 2009 by fjordaan
However, our client had one last, heart-stopping requirement: the design had to be fluid and resize with the browser window.
netvouzimported
netvouzpublic
alistapart
css
fluid
grid
hack
ie6
layout
liquid
max-width
march 2009 by fjordaan
Mozilla Webdev » Blog Archive » Cross-Browser Inline-Block
march 2009 by fjordaan
Ah, inline-block, that elusive and oh so tempting display declaration that promises so much, yet delivers so little. Too many times have I received PSD files like this: Gallery Design and begin to cry. Normally, this type of layout would be a cakewalk. Fixed width, fixed height, float:left and you’re done. Buuuuut, the design needs to work with variable amounts of content, which means if one of these blocks has more content than the others, it will break the layout:
netvouzimported
netvouzpublic
cross-browser
css
gallery
grid
inline-block
layout
march 2009 by fjordaan
The Perfect Fluid Width Layout
october 2008 by fjordaan
Why is this layout "perfect"? * Works in all major browsers * Shrinks to 780px This accommodates users with 800x600 resolution, with no horizontal scroll! * Grows to 1260px This accommodates users with 1280x768 resolution and everything in between. * This accomodates 90* of all internet users. You could easily make this layout grow larger, but be mindful of how line-length affects readability. Nobody wants to read a line of text 1980px long. * The left sidebar is of "equal height" to the main content
netvouzimported
netvouzpublic
css
fluid
layout
liquid
max
min
perfect
width
october 2008 by fjordaan
Designing a high usability Plone theme | Redi for Life
october 2008 by fjordaan
Often external artist is used to design a site theme. Artists might or might not have seen Plone, artists might or might not have any basic usability know how. This article should explain the elements which "must be there" to make a match between the theme and Plone easily.
netvouzimported
netvouzpublic
css
design
layout
mikko
ohtamaa
plone
theme
october 2008 by fjordaan
The Man in Blue > Resolution dependent layout update
august 2008 by fjordaan
Change CSS layout according to browser width
netvouzimported
netvouzpublic
browser
change
css
layout
script
themaninblue
width
august 2008 by fjordaan
How to prevent HTML tables from becoming too wide | 456 Berea Street
february 2008 by fjordaan
The layout model of tables differ from that of block level elements in that they will normally expand beyond their specified width to make their contents fit. At first that may sound like a good thing – and it often is – but it makes it possible for oversized content to make text unreadable or completely break a site’s layout, especially in Internet Explorer.
netvouzimported
netvouzpublic
456bereastreet
break-word
css
layout
overflow
table
table-layout
url
word-wrap
wrap
february 2008 by fjordaan
Subtraction: Grid Computing… and Design
december 2007 by fjordaan
The new layout uses eight columns and four ‘super columns,’ and it shoehorns everything into that structure
netvouzimported
netvouzpublic
demo
design
grid
khoi
layout
subtraction
vinh
december 2007 by fjordaan
cc | 3 col holy grail
march 2004 by fjordaan
CSS-Discuss Tue, 16 Mar 2004
netvouzimported
netvouzpublic
3
column
counterculture
css
layout
pure
template
march 2004 by fjordaan
related tags
2-col ⊕ 3-col ⊕ 9-11 ⊕ 37signals ⊕ 456bereastreet ⊕ 640x480 ⊕ 800x600 ⊕ a-z ⊕ aaa ⊕ accessibility ⊕ accesskey ⊕ adactio ⊕ adobe ⊕ advanced ⊕ agency ⊕ aggregator ⊕ aifia ⊕ airline ⊕ airport ⊕ ajax ⊕ al ⊕ aleksandar ⊕ alex ⊕ align ⊕ alistapart ⊕ all-css ⊕ allrecipes ⊕ allsopp ⊕ alternative ⊕ amazon ⊕ american ⊕ angeles ⊕ applets ⊕ application ⊕ architecture ⊕ arial ⊕ arsenal ⊕ art ⊕ artnet ⊕ asia ⊕ asilomar ⊕ asp ⊕ automatic ⊕ babycenter ⊕ background ⊕ balloons ⊕ banner ⊕ barbican ⊕ barstow ⊕ bernard ⊕ berners-lee ⊕ best ⊕ betting ⊕ bidirectional ⊕ birds ⊕ blind ⊕ blog ⊕ blogs ⊕ blue ⊕ bluerobot ⊕ blur ⊕ bom ⊕ bonn ⊕ bookmaker ⊕ box ⊕ boxes ⊕ break-word ⊕ bret ⊕ briggs ⊕ british ⊕ broadband ⊕ brown ⊕ browser ⊕ browserware ⊕ bt ⊕ bugs ⊕ bugzilla ⊕ busy ⊕ buttons ⊕ california ⊕ calling ⊕ cameras ⊕ carousel ⊕ cart ⊕ centered ⊕ centred ⊕ certificate ⊕ cgi ⊕ chandanais ⊕ change ⊕ chris ⊕ cinnamon ⊕ clagnut ⊕ clean ⊕ cms ⊕ codes ⊕ cognitive ⊕ college ⊕ cologne ⊕ color ⊕ colour ⊕ colours ⊕ column ⊕ columns ⊕ comment ⊕ comments ⊕ community ⊕ compare ⊕ complexspiral ⊕ concept ⊕ conservation ⊕ contentfree ⊕ contents ⊕ contextual ⊕ contingency ⊕ conventions ⊕ cool ⊕ copywriting ⊕ corporate ⊕ costello ⊕ counterculture ⊕ crit ⊕ cross-browser ⊕ css ⊕ css-p ⊕ css2 ⊕ css3 ⊕ customisable ⊕ cute ⊕ cv ⊕ cvs ⊕ cybergeography ⊕ czech ⊕ daisey ⊕ dao ⊕ daviddesandro ⊕ daylife ⊕ death ⊕ demo ⊕ demonstration ⊕ demos ⊕ desandro ⊕ desert ⊕ design ⊕ designer ⊕ device ⊕ dhtml ⊕ digiboy ⊕ digicams ⊕ disabilities ⊕ discuss ⊕ dispatch ⊕ div ⊕ diy ⊕ dominey ⊕ downing ⊕ draw ⊕ dreamweaver ⊕ drop-down ⊕ dropdown ⊕ dublin ⊕ dutch ⊕ dynamic ⊕ e-com ⊕ eastern ⊕ echoecho ⊕ ecoculture ⊕ ecom ⊕ economist ⊕ edevcafe ⊕ edge ⊕ elephant ⊕ email ⊕ eric ⊕ examples ⊕ exhibition ⊕ experiment ⊕ experimental ⊕ explanation ⊕ expressionengine ⊕ ezboard ⊕ facets ⊕ farsi ⊕ festival ⊕ fieldset ⊕ film ⊕ firdamatic ⊕ fisk ⊕ fit ⊕ fix ⊕ fixed ⊕ flash ⊕ flexbox ⊕ float ⊕ floating ⊕ fluid ⊕ font ⊕ food ⊕ fool ⊕ footer ⊕ forcing ⊕ form ⊕ forms ⊕ forums ⊕ found ⊕ francois ⊕ freelance ⊕ fuller ⊕ functionality ⊕ gallery ⊕ garden ⊕ generator ⊕ genetic ⊕ geography ⊕ getty ⊕ gimmicks ⊕ glish ⊕ government ⊕ gradient ⊕ graphical ⊕ graphics ⊕ grid ⊕ guidelines ⊕ guru ⊕ hack ⊕ having ⊕ hebrew ⊕ herald ⊕ hesperia ⊕ hgtv ⊕ hicksdesign ⊕ hockey ⊕ home ⊕ homepage ⊕ homeportfolio ⊕ horizontally ⊕ hosted ⊕ html ⊕ html5 ⊕ hybrid ⊕ ia ⊕ icon ⊕ icons ⊕ ie ⊕ ie6 ⊕ iht ⊕ ikea ⊕ illustration ⊕ images ⊕ independent ⊕ index ⊕ information ⊕ ink ⊕ inknoise ⊕ inline-block ⊕ installer ⊕ institute ⊕ interface ⊕ international ⊕ internationlisation ⊕ ipad ⊕ ism ⊕ jam ⊕ japan ⊕ javascript ⊕ jish ⊕ john ⊕ journalism ⊕ journey ⊕ jquery ⊕ k ⊕ keyboard ⊕ khoi ⊕ kontakt ⊕ label ⊕ language ⊕ latimes ⊕ layers ⊕ layout ⊖ learn ⊕ legend ⊕ lessons ⊕ letterbox ⊕ lettering ⊕ lightbulb ⊕ links ⊕ liquid ⊕ list ⊕ little ⊕ livestoryboard ⊕ login ⊕ logo ⊕ london ⊕ los ⊕ love ⊕ lukew ⊕ mac ⊕ macfly ⊕ macgregor ⊕ magazine ⊕ magic ⊕ manifesto ⊕ mappa ⊕ maps ⊕ marcus ⊕ margin ⊕ mark ⊕ markdown ⊕ markup ⊕ masonry ⊕ master ⊕ matthew ⊕ max ⊕ max-width ⊕ menu ⊕ meta ⊕ metadata ⊕ meyer ⊕ meyerweb ⊕ mezzoblue ⊕ michael ⊕ microformats ⊕ microsoft ⊕ middle ⊕ mijnkopthee ⊕ mikko ⊕ min ⊕ minimal ⊕ mobile ⊕ model ⊕ msr ⊕ mt ⊕ mticket® ⊕ multi-device ⊕ multiple ⊕ mundi ⊕ myth ⊕ navigation ⊕ ncolor8 ⊕ nederlands ⊕ negative ⊕ nerve ⊕ netvouzimported ⊕ netvouzpublic ⊕ new ⊕ newhouse ⊕ news ⊕ newsday ⊕ newspaper ⊕ ninjakitten ⊕ nintendo ⊕ noao ⊕ not ⊕ nouveau ⊕ nyc ⊕ nz ⊕ odeo ⊕ off-screen ⊕ ohtamaa ⊕ ojr ⊕ online ⊕ onlinejam ⊕ ontology ⊕ open ⊕ opera ⊕ optgroup ⊕ optimization ⊕ organisation ⊕ osx ⊕ overflow ⊕ owen ⊕ page ⊕ parsing ⊕ patterns ⊕ paulirish ⊕ perfect ⊕ petr ⊕ pharmacy ⊕ phone ⊕ photography ⊕ photolog ⊕ photos ⊕ photoshop ⊕ php ⊕ picker ⊕ piefecta ⊕ pixel ⊕ pixels ⊕ pixy ⊕ placement ⊕ plane ⊕ plone ⊕ plugins ⊕ political ⊕ pork ⊕ portfolio ⊕ positioniseverything ⊕ practical ⊕ practice ⊕ priceline ⊕ print ⊕ products ⊕ professional ⊕ project ⊕ projectseven ⊕ property ⊕ protection ⊕ public ⊕ pure ⊕ pvii ⊕ quick ⊕ r2communications ⊕ rainbow ⊕ ramblers ⊕ randal ⊕ rant ⊕ readability ⊕ recipes ⊕ red ⊕ reference ⊕ reflex ⊕ refresh ⊕ related ⊕ relative ⊕ research ⊕ resizable ⊕ resize ⊕ resolution ⊕ responsive ⊕ resume ⊕ retail ⊕ reverse ⊕ review ⊕ ria ⊕ right-to-left ⊕ righttoleft ⊕ rob ⊕ robert ⊕ robinson ⊕ royal ⊕ rspb ⊕ rtl ⊕ rust ⊕ satzansatz ⊕ screening ⊕ script ⊕ scrollbars ⊕ search ⊕ secure ⊕ selector ⊕ semantic ⊕ seven ⊕ shadow ⊕ shell ⊕ shop ⊕ shopping ⊕ sidebar ⊕ signage ⊕ signposting ⊕ simon ⊕ simple ⊕ simplicity ⊕ sites ⊕ size ⊕ skin ⊕ slick ⊕ slider ⊕ smokinggun ⊕ sms ⊕ society ⊕ software ⊕ sound ⊕ sparber ⊕ speech ⊕ sport ⊕ squidoo ⊕ standards ⊕ stanjames ⊕ stanícek ⊕ star ⊕ statistics ⊕ store ⊕ story ⊕ storyfuck ⊕ stretch ⊕ structural ⊕ style ⊕ stylesheet ⊕ subtraction ⊕ superb ⊕ swipe ⊕ tabindex ⊕ table ⊕ table-layout ⊕ table-less ⊕ tableless ⊕ tables ⊕ tabs ⊕ tags ⊕ tao ⊕ target ⊕ tech ⊕ techniques ⊕ television ⊕ template ⊕ terrorism ⊕ text ⊕ themaninblue ⊕ theme ⊕ thenoodleincident ⊕ thetimes ⊕ three ⊕ thumbnail ⊕ thumbnails ⊕ tickets ⊕ times ⊕ tips ⊕ toc ⊕ todd ⊕ tokyo-london ⊕ tonevendor ⊕ tools ⊕ tourism ⊕ translucency ⊕ transparency ⊕ travel ⊕ trebuchet ⊕ tribune ⊕ tricks ⊕ tutorial ⊕ tutorials ⊕ twitter ⊕ typography ⊕ ui ⊕ uk ⊕ units ⊕ urdu ⊕ url ⊕ usa ⊕ usability ⊕ uscho ⊕ useful ⊕ v2studio ⊕ vancouver ⊕ vertically ⊕ victor ⊕ viff ⊕ viget ⊕ vinh ⊕ visibility ⊕ w3c ⊕ wai ⊕ walking ⊕ wannabegirl ⊕ web ⊕ web-authoring ⊕ webapp ⊕ weblog ⊕ webmd ⊕ webnouveau ⊕ webplication ⊕ webreview ⊕ website ⊕ weir ⊕ wellstyled ⊕ westciv ⊕ whatdoiknow ⊕ wide ⊕ width ⊕ willison ⊕ wired ⊕ wise ⊕ word-wrap ⊕ worrydream ⊕ worst ⊕ wrap ⊕ wtc ⊕ xhtml ⊕ xml ⊕ xplane ⊕ yahoo ⊕ yoyodesign ⊕ zealand ⊕Copy this bookmark: