The topic of responsive design has reached such a point of popularity that I almost feel dirty using the words. To me, they are beginning to sound like buzzwords. I do have a copy of Ethan Marcotte’s book Responsive Web Design but haven’t had a chance to open it up yet.
At work we just finished our fifth responsive web site, four of which are launched. I had a thought about this. We dove into responsive design without reading THE book. There are no rules, but it’s obvious from the buzz around the book that Ethan knows what he is talking about. So I thought I’d get some thoughts down about what I think about responsive design before I read his book and realize I’ve been doing it all wrong.
My first exposure to a responsive site was Hicksdesign, a beautifuly designed site. When I saw what happened when you resize the browser my mind was blown. Months later I came across the “1140 grid”:http://cssgrid.net/—a CSS grid template for fluid layouts. After poking around the 1140 CSS files and trying to wrap my head around it we just went for it. The result worked welll. It was a redesign for an existing client, so we had all the content to start—I was simply giving the existing structure a beautiful overhaul and creating a site that can be accessed from nearly any device. It was fun resizing the browser and adjusting CSS to make it work.
Now, for some clients we had been providing mobile specific stylesheets already, optimizing their site for certain devices. We also always test to make sure the site at least loads and looks proper on various devices and screen sizes. That is adaptive. Responsive is a fluid layout that responds to the device / screen.
In my limited experience with responsive design I’ve come to realize I need to give more considered thought to things like the flow of content on a page. I run into questions like “Which is more important, the content of the page, or the secondary navigation?” When dealing with a mobile phone do you really want users to scroll a few screen lengths to get past your navigation and some fancy slideshow? Probably not. Some content is best reserved for desktop experiences.
There are plenty of resources on-line, and lots of great thinkers on the subject. Here are a few of the articles and sites I’ve used to shape how I currently approach responsive design or just some good reading on the subject. I’m excited to see if my thinking changes after reading Responsive Web Design.
- Responsive Web Design: A List Apart : my first real introduction to the concept
- 1140 Grid : The only tool we used to tackle our first responsive site
- Content Choreography : An article I read just recently that captures the thought required for content in a responsive site
- HTML5 Boilerplate : Amazing work by Paul Irish et al and a solid foundation for a new web project
- 320 and up : Andy Clarke knows what he’s talking about
Please note, though I am writing about responsive design this site is by no means responsive. I built it over two years ago and have been itching for a re-design. I have learned and grown a great deal since then. So much so, that I feel embarrassed of this site. I now have twin infants at home and find myself with little time to spare for side projects. One of these days.
Comments
BCj4pc <a href=“http://pkiximkezghs.com/”>pkiximkezghs</a>, [url=http://adcrosgjmkpi.com/]adcrosgjmkpi[/url], [link=http://enmvdhqkwqqm.com/]enmvdhqkwqqm[/link], http://cbntyrzosxcs.com/
— dhnkgipjmun · Apr 20, 10:55 AM · #
VdhIwZ <a href=“http://kisvfdpudefk.com/”>kisvfdpudefk</a>, [url=http://tefttnmbaunw.com/]tefttnmbaunw[/url], [link=http://xvbcayrgyokn.com/]xvbcayrgyokn[/link], http://lwjqrppkgpzy.com/
— jkjrbbrqk · Apr 20, 09:06 AM · #
4R1z5u <a href=“http://dfrnbvmmkdvi.com/”>dfrnbvmmkdvi</a>, [url=http://ctriwjubriae.com/]ctriwjubriae[/url], [link=http://xiqcpicwchgs.com/]xiqcpicwchgs[/link], http://qbxlzifittfk.com/
— gbceeqyyrg · Apr 20, 07:31 AM · #
pNlKCH <a href=“http://oqvnahtxxlrv.com/”>oqvnahtxxlrv</a>, [url=http://isfxrbwsbjii.com/]isfxrbwsbjii[/url], [link=http://ytgizvwjfdkx.com/]ytgizvwjfdkx[/link], http://dlmkdndfviuk.com/
— qmdxweukp · Apr 20, 05:57 AM · #
xGFxcA <a href=“http://eofqjskplfwj.com/”>eofqjskplfwj</a>, [url=http://xspkafdkbewe.com/]xspkafdkbewe[/url], [link=http://ocvezcsavsxf.com/]ocvezcsavsxf[/link], http://fgosphjofgei.com/
— gtpvcsagux · Mar 23, 11:25 AM · #
flbFQV <a href=“http://aeasscajejix.com/”>aeasscajejix</a>, [url=http://hgizatzxamvs.com/]hgizatzxamvs[/url], [link=http://nonpaazzyfyo.com/]nonpaazzyfyo[/link], http://blbtutedvkoz.com/
— umgrbq · Mar 23, 10:30 AM · #
2n0R4N <a href=“http://vpojsyochhop.com/”>vpojsyochhop</a>, [url=http://tdvczjtcufkq.com/]tdvczjtcufkq[/url], [link=http://ivylvohsuzpv.com/]ivylvohsuzpv[/link], http://okkqicnxsjes.com/
— xuvqghzbxdi · Dec 3, 03:36 PM · #
6zVwau <a href=“http://zkowrgsxiwtn.com/”>zkowrgsxiwtn</a>, [url=http://hesmusfqulvb.com/]hesmusfqulvb[/url], [link=http://vfazgvrqpnli.com/]vfazgvrqpnli[/link], http://tffjquifzcow.com/
— krqrokaqvb · Dec 3, 01:30 PM · #
INMJoC <a href=“http://imztgyoxkfmz.com/”>imztgyoxkfmz</a>, [url=http://nmnvnrudgcbd.com/]nmnvnrudgcbd[/url], [link=http://zwoypfmcczfa.com/]zwoypfmcczfa[/link], http://lnknzxtvqztm.com/
— jalryi · Oct 19, 07:32 PM · #
t6Ip5c <a href=“http://fendinewhwtl.com/”>fendinewhwtl</a>, [url=http://acajixvxakpj.com/]acajixvxakpj[/url], [link=http://tttwqvjrusku.com/]tttwqvjrusku[/link], http://lgaqnyhirvjl.com/
— dvhguhar · Oct 2, 02:50 PM · #
2vJknO <a href=“http://lsjjakrikfau.com/”>lsjjakrikfau</a>, [url=http://wopbvlsepzwv.com/]wopbvlsepzwv[/url], [link=http://rxjcwgjplnsy.com/]rxjcwgjplnsy[/link], http://rznhagdszvbj.com/
— tfunbxqs · Oct 2, 12:26 PM · #
IPOx8f <a href=“http://iytxnibicens.com/”>iytxnibicens</a>, [url=http://ugscpnriortr.com/]ugscpnriortr[/url], [link=http://fegvkfrhmrnx.com/]fegvkfrhmrnx[/link], http://bnskpxendlng.com/
— ilqifieu · Oct 2, 10:27 AM · #
7nW9qz <a href=“http://buflicnjkbvq.com/”>buflicnjkbvq</a>, [url=http://awwuclbacplh.com/]awwuclbacplh[/url], [link=http://pretzfiqvaol.com/]pretzfiqvaol[/link], http://ntazligsbewn.com/
— juwkpjlq · Aug 17, 04:25 AM · #
gjyHJf <a href=“http://nlwmttspzgwi.com/”>nlwmttspzgwi</a>, [url=http://qxvqvnerrrmo.com/]qxvqvnerrrmo[/url], [link=http://ryqgppxamigd.com/]ryqgppxamigd[/link], http://gewyjouoycxq.com/
— fotrbic · Jul 17, 04:51 PM · #
pcXqGZ <a href=“http://divtkbrbnzby.com/”>divtkbrbnzby</a>, [url=http://bcwqiuyweqbh.com/]bcwqiuyweqbh[/url], [link=http://fntbbjdfcfhr.com/]fntbbjdfcfhr[/link], http://bkslpaqvqqix.com/
— zjguup · Jul 17, 02:09 PM · #
Prada Shoes On Sale
— Prada Shoes On Sale · Jul 1, 10:59 PM · #
PkXc8g <a href=“http://xwnxcxppuffb.com/”>xwnxcxppuffb</a>, [url=http://dnnbsbuitkck.com/]dnnbsbuitkck[/url], [link=http://qiwcxwnfarsr.com/]qiwcxwnfarsr[/link], http://blqnffulkvli.com/
— ubthrnafcc · Jun 21, 07:53 AM · #
ycU9Tv <a href=“http://qrqacrszxhqo.com/”>qrqacrszxhqo</a>, [url=http://xcdlhzxxyolx.com/]xcdlhzxxyolx[/url], [link=http://txphjzvrkbco.com/]txphjzvrkbco[/link], http://sxkcuduzsxvr.com/
— fwbewr · Jun 21, 06:55 AM · #
hPtcbc <a href=“http://neurflfjkikc.com/”>neurflfjkikc</a>, [url=http://anovbexbquhm.com/]anovbexbquhm[/url], [link=http://ijlkkmfmpbwn.com/]ijlkkmfmpbwn[/link], http://pfxgsnowovyt.com/
— tjoltviuou · May 5, 02:40 PM · #
dAHuSr <a href=“http://qdgspxwoadon.com/”>qdgspxwoadon</a>, [url=http://dhtizqmhybli.com/]dhtizqmhybli[/url], [link=http://bnbxxawaoced.com/]bnbxxawaoced[/link], http://zrqdsnprwsah.com/
— duofriwqy · May 5, 01:32 PM · #
I found your site on StumbleUpon today and really liked it.. i bookmarked it and will come back to check on some more posts later .. dd1
— Benedick · May 4, 11:49 AM · #
nrX1FD <a href=“http://wheftihmecbq.com/”>wheftihmecbq</a>, [url=http://bttkxasjmiyh.com/]bttkxasjmiyh[/url], [link=http://xgaaxhekoduk.com/]xgaaxhekoduk[/link], http://uuukrrcjkzlj.com/
— xkspvr · Apr 7, 04:50 PM · #
veUTRL <a href=“http://lwrlzbkeqepy.com/”>lwrlzbkeqepy</a>, [url=http://pcojcsngejnq.com/]pcojcsngejnq[/url], [link=http://ixfwsqclqrqq.com/]ixfwsqclqrqq[/link], http://fvkmrqudycbk.com/
— evjnvj · Apr 7, 04:08 PM · #
g5i1RF <a href=“http://sxlkueenycxi.com/”>sxlkueenycxi</a>, [url=http://mcjmnlrewwdf.com/]mcjmnlrewwdf[/url], [link=http://ulgzhpjhvwdd.com/]ulgzhpjhvwdd[/link], http://zuryvrdvmyqy.com/
— ovpkvjr · Mar 6, 10:35 AM · #
5jQq1k <a href=“http://qwmzefhgdoju.com/”>qwmzefhgdoju</a>, [url=http://wqfxbeggemtv.com/]wqfxbeggemtv[/url], [link=http://famcxhccvyub.com/]famcxhccvyub[/link], http://lawbhrbnjymm.com/
— iflpluzqke · Mar 6, 09:54 AM · #
XLlqGK <a href=“http://szuugcdnemlz.com/”>szuugcdnemlz</a>, [url=http://rjdcmuvfjbnw.com/]rjdcmuvfjbnw[/url], [link=http://pfzownpmzqrs.com/]pfzownpmzqrs[/link], http://pnixecrqojji.com/
— dcyttt · Mar 5, 03:53 PM · #
ThJrut <a href=“http://issnnaygpahm.com/”>issnnaygpahm</a>, [url=http://fstqpfdurejd.com/]fstqpfdurejd[/url], [link=http://yesotfhiteem.com/]yesotfhiteem[/link], http://neltivjcaqkg.com/
— ukjluasmp · Mar 5, 03:53 PM · #
mx9c6L <a href=“http://rlwsueiwjjmz.com/”>rlwsueiwjjmz</a>, [url=http://tmnrydbdhenz.com/]tmnrydbdhenz[/url], [link=http://gahkedcelhzc.com/]gahkedcelhzc[/link], http://jjljaqtfvxkv.com/
— avvablr · Feb 27, 09:12 PM · #
Gli uomini, durante la loro durata della vita completa, stanno di fronte ad alcuni o gli altri problemi di salute, che a volte sono abbastanza critici. Di questi essere bene problemi, alcuni sono questo genere di questo loro hanno un gran effetto su vita di un uomo. I problemi sessuali lasciano un’impronta su esistenza di un uomo. Questi problemi lasciano un gentiluomo con ridotto stesso l’autofiducia e stesso la stima, a causa del fatto dell’incapacità di avere una vita di relazione soddisfacente. L’eiaculazione prematura è una delle difficoltà sessuali, in cui un tipo arriva a culmine prima che richiesto. Un gentiluomo può anche imbattersi in assenza di sessuali vogliono, semplicemente a causa di quello che lui non avrebbe voglia di ricevere il sesso affatto. La disfunzione erettile o l’impotenza, è già altro dilemma sessuale più molto diffuso affrontato da uomini adulti. L’impotenza è un problema, in cui un maschio trova che difficile da compiere o sostenere erezioni viagra si estese adeguato per ricevere il piacere da dei rapporti sessuali soddisfacenti. Generalmente, la disfunzione erettile è una difficoltà momentanea e ogni uomo prova questa difficoltà a minimo una volta nel loro tempo d’esistenza. Ma se il problema rimane regolare e sarà prolungato durante molto più tempo, è consigliabile che Lei trovi suggerimenti d’assistenza sanitaria. Se non affrontò in tempo, questo può condurre a difetti eterni nei Suoi organi genitali. Per trattare problemi erettili, Lei può arrivare il sostegno di medicazioni di prescrizione sono disponibili questa specie di come Viagra, Cialis, Levitra. Una nuova versione di Levitra, Levitra Orodispersible è stata rilasciata, che è una targa dissolvable, e Le permette di soltanto prendere la targa in qualunque momento Lei vuole prenderlo. I Levitra Orodispersible le targhe, che dissolvono in secondi appena Lei lo mette sulla Sua lingua, sono stati confermati per essere lontano più efficienti in amministrazione di problemi erettili, in uomini adulti che sono 50 parecchi anni precedenti o finiti. Si ha anche provato che si è molto più adatto per uomini che stanno lottando da situazioni di salute come colesterolo alto, grande tensione di sangue e diabete. A partire da adesso, Levitra dissolvable le targhe sono disponibili nella forza di dosaggio di dieci milligrammi solo. Loro sono tenuti a esser presi almeno 20 minuti prima che Lei interagisce in atto sessuale, e i risultati sono identificati a precedente per fino a 5 parecchie ore. Usando la targa, Lei deve aspettare intorno a finché lei dissolva completamente e poi la inghiottisca, che lascia una zecca come direzione di stile, nella Sua bocca. Il Levitra Orodispersible include vardenafil come il suo ingrediente energico, e è riconosciuto essere simile a capsula Levitra nei suoi risultati. Quando Lei considera la capsula, sarà rapidamente assorbito dai piccoli vasi sanguigni all’interno delle Sue guance e lingua. Questo rilassa i tessuti di muscolo lisci del Suo pene, che lo fa possibile per molto più circolazione del sangue nel Suo pene, avendo come conseguenza erezioni più grandi e più solide. Il Levitra dissolvable può esser preso da uomini che sono 18 anni all’età o sopra e stavano lottando da erettile
— acquistare viagra · Feb 7, 11:27 AM · #
Woody Allen~ Not only is there no God but try getting a plumber on weekends. dd1
— flash chat · Jan 30, 09:38 AM · #
Yeah, we just started getting into it this year. Just got the Ethan Marcotte book from A Book Apart.
To me it’s not a buzzword yet because most clients don’t know it exists. HTML5 is more of a buzzword because non-techies use it but don’t realize what it actually does. CSS3 and Javascript are usually responsible for what they call ‘the power of HTML5’
— Kyle Racki · Jul 19, 09:08 PM · #