Wordpress Meet Responsive Design3

7/31/2019 Wordpress Meet Responsive Design3

1/38


2/38

A CODEPOET.COM BOOKCC BY-NC-SA 3.0, 2012
http://creativecommons.org/licenses/by-nc-sa/3.0/http://creativecommons.org/licenses/by-nc-sa/3.0/


3/38

i

CONTENTS

PREFACE

CHRIS COYIER

IAN STEWART

SARA CANNON

RWD RESOURCES

A CODE POET BOOK

01

02

14

21

32

35


4/38

01

PREFACE

Right now you quite possibly have sites out there in the wild that looklike death on one screen or another. And while your trainwreck site turnssite visitors away, devices are prolierating aster than anyone can remem-ber what to call them, making your trainwreck site a trainwreck pile up.

Gone are the days o the xed layout tailored to some imaginary, crampedCRT. And the hal way house o uid layouts are no longer enough when

youre presenting content to people looking at your site through smart-phones, tablets, various sized laptops or arrays o gigantic monitors with

resolutions o titantic proportions.

Thats where Responsive Web Design (RWD) comes in.

Since Ethan Marcotte coined the term back in 2010 more and more de-signers and developers have been building projects responsively; sites thatactually bother to query the viewport theyre being experienced through,and adapt to make the experience as good as can possibly be.

So whats that to you as a WordPress-powered designer or developer?Code Poet asked the people most likely to know. In this short book ChrisCoyier, Ian Stewart and Sara Cannon give you the lowdown on their realworld uses and strategies or designing WordPress responsively.
http://www.alistapart.com/articles/responsive-web-design/http://www.alistapart.com/articles/responsive-web-design/


5/38

02

Chris Coyier runsCSS-Tricks.com, a site all about learning, inspiration andall things design and development.

He co-authored the bookDigging into WordPressand collects bits odesign wisdom at QuotesOnDesign.com.

CHRIS COYIER RUNS CSS-TRICKS.COM, A SITE ALL ABOUT LEARNING,INSPIRATION AND ALL THINGS

DESIGN AND DEVELOPMENT.
http://css-tricks.com/http://digwp.com/book/http://quotesondesign.com/http://quotesondesign.com/http://digwp.com/book/http://css-tricks.com/


6/38

03

WE NEED TO START ADMITTINGWE DONT KNOW THE EXACT

CONDITIONS IN WHICH PEOPLEVIEW OUR WEBSITES

What is responsive design, and whats all the uss about?

I agree with Ethan Marcotte, the developer who coined the term respon-sive design, who says that we should be specic about what the termmeans. It makes discussion easier. Responsive design is specically:

1. Fluid layout / grids (in other words, use percentage widths or structuralelements)

2. Media that ts into the uid layout

3. Breakpoints (media queries) that adjust layout based on browser win-dow size

People are viewing the websites we build in a wider variety o browserwindow sizes than ever beore, and the trend is accelerating. We need tostart admitting we dont know the exact conditions in which people viewour websites so we can accommodate those unknowns. We need to get on

it and quick, as the uture is now.

Why do you design responsively?

One big reason is that its awully un. O course there is that whole thingwhere (hopeully) it gives users a better experience regardless o thebrowser/device they are using, but thats just a nice side benet.


7/38

04

OF COURSE RESPONSIVE DESIGNIS HARD, ITS DESIGN

@CANARYMASON

How do you explain to clients whyresponsive design is important?

I dont do direct client work, butI think the sell would be prettyeasy. Id have the client pull theirunbelievably amazing phone out otheir pocket and navigate to theircurrent website so they can seehow probably-sucky it is.

I live in the world o web applica-tion design. Everybody is prettymuch on board with the idea that

accommodating as many devicesas possible is ideal. Its just a mat-ter o tting it into developmentschedules, nding the right talent,deciding whats most important,

etc. Responsive design isnt theanswer or most apps. Ground-updevelopment ocusing on smallerscreens is important.

How oen do you use responsivedesign in your client-based designand development? What are thebenets or you as the designer/

developer?

O course responsive design is

hard, its design.

Are there any cases where you

think that responsive web design isan inappropriate approach? Why?

We (Dave Rupert and I) recentlyinterviewed Ethan on ShopTalk(our weekly podcast) and I likedhis answer to this question. He saida responsive approach might notbe appropriate i you have a super-

established desktop-size version o

I use responsive design techniques100% o the time. Id never build a

xed-width site again, when start-ing a project rom scratch. The ben-et is that more people can viewthe content and you get a moreuture-proo website.

Responsive design isnt easier thanxed-width design--its harder--butjust by a little. The hard part about

design is design. I read an awesomequote on Twitter the other day rom@canarymason:
http://shoptalkshow.com/https://twitter.com/#!/canarymason/status/18214799380015923https://twitter.com/#!/canarymason/status/18214799380015923https://twitter.com/#!/canarymason/status/18214799380015923http://shoptalkshow.com/


8/38

05

I THINK ITS MORE LIKELY THATRESPONSIVE DESIGN WILL COST

YOU MONEY UP FRONT

your site. Rather than try and slugthrough trying to responsivize

that, its likely better to begin reshwith mobile rst thinking as aork o your current site and usethat as a base or uture iterationso your desktop site.

Id add that web apps arent alwaysa good match or responsive design.The interactions on mobile devices

are so dierent that apps oen war-rant a totally dierent approach.For example, look at WordPress

and how dierent the mobile appsare rom the web app.

Can you think o a time where us-

ing responsive design has savedyou or your client time and/ormoney?

I think its more likely that respon-sive design will cost you money upront as it does take more time todo right. I believe that in the end

youll make more money as the site

will serve a wider audience. I I did

One o the impressive things aboutthe Smashing Magazine responsivedesign is the breadth o it.

There are ve major breakpoints

that I count, that happen at widthsthat eel very natural. The designworks well on absolutely enormousscreens as well as tiny phone-sizescreens. Thats the whole point oresponsive design o course, but re-ally nailing it or every width rom2000+px to 320px is pretty impres-sive.

direct client work Id try to sell cli-ents on a responsive approach with

that logic.

What are you avorite exampleso responsive WordPress designs?What do you like best about them?

The current iterations owebde-signerwall.com and smashingmag-

azine.com are splendid and theyboth run on WordPress.
http://webdesignerwall.com/http://webdesignerwall.com/http://smashingmagazine.com/http://smashingmagazine.com/http://smashingmagazine.com/http://smashingmagazine.com/http://webdesignerwall.com/http://webdesignerwall.com/


9/38

06

The current iterations owebdesignerwall.com and smashingmagazine.com

are splendid and both run on WordPress
http://webdesignerwall.com/http://smashingmagazine.com/http://smashingmagazine.com/http://webdesignerwall.com/


10/38

07

One o the impressive things about the Smashing Magazine responsive de-

sign is the breadth o it.


11/38

08

ITS HIP THESE DAYS TO GO MO-BILE FIRST AND I LOVE THATIDEA, BUT FOR NOW ITS SERVEDME WELL TO START WITH A DE-SIGN FOR DESKTOP/LAPTOP SIZED

Do you start your responsive designs rom scratch, or build on top o aparent theme or theme ramework?

Denitely rom scratch. I once created a ramework as a joke. The thingsthat I work on are so varied that I havent ound the need or a realramework.

I think the point o rameworks is to save you time i you work on a lot osimilar projects.

Can you share your responsive design workfow?

Im a bit araid to admit it, but I still start with a desktop layout. Its hipthese days to go mobile rst and I love that idea, but or now its servedme well to start with a design or desktop/laptop-size screens and thenadjust things with media queries as needed or smaller screens. That desk-

top layout is likely built rom large, oated elements with widths set inpercentages.

That gives me a uid environment, which automatically suites a largerange o browser window sizes. Then I write a ew (usually simple) me-dia queries to shufe things or mobile. These days, that shufing is oensimple things like collapsing several columns into one column thats nowider than the devices deault width. In the uture, things will get morecomplicated. We need to get more clever with the x-axis as well, instead o

just keeping to one column as the go-to mobile layout.
http://css-tricks.com/responsive-framework.csshttp://css-tricks.com/responsive-framework.css


12/38

09

And when CSS eatures such as grids and regions gain greater support,were going to be able to use those things to our advantage and be more

specic about which content we want to place where as the browser win-dow size shrinks or grows. I eel experienced enough as a designer to knowwhats important in a design, so what I end up with is probably prettysimilar to what I would have done should I have went mobile rst.

Tell us about the responsive sites youve created.

Im doing the BarCamp Tour again this year with Wuoo. I worked on thatwebsite, and its responsive. Weve recently redesigned Wuoo to add someresponsiveness as well.

My blog about ront-end web design css-tricks.com is responsive. I wentrom 1) doing nothing to 2) maintaining a mobile-specic site to 3) the cur-

rent responsive design.
http://barcamptour.com/http://wufoo.com/http://css-tricks.com/http://css-tricks.com/http://wufoo.com/http://barcamptour.com/


13/38

10

The mobile-specic site was nice in that it was super light-weight, whichmeant it was aster on oen-lower-bandwidth mobile devices. Ultimately,I just couldnt deal with the code-ork. Maintaing two sites with the samecontent sucked or me as a one-man team. I love how responsive designallows us to design or a lot o screen sizes with one code base. But thecurrent mobile design is quite a bit heavier than the old mobile specicsite was. Were still in a weird spot in the evolution o responsive design, inthat regard.

What would it take to move beyond this weird spot in RWDs evolution?

What we need to move beyond this point in RWDs evolution are tools tohelp us adjust the weight o our web pages depending on the circumstanc-es in which theyre loaded. For instance, in a browser with a very smallscreen and slow network connection, wed like to be able to serve up a low-er resolution image than we would on a browser with a large screen anda ast network connection. Those tools are hacky at best or nonexistent atworst today. Bandwidth media queries might help. Exact specications


14/38

11

WHEN DESIGNING RESPONSIVELY, IT

MAKES EVERYTHING YOU DOINTERACTION DESIGN WHICH IS ANEW CONCEPT TO SOME DESIGNERS

-tions on when to load and not load resources might help. New image or-mats and syntaxes might help. There are a lot o players involved so it gets

tricky, but the need is so strong that something is going to happen.

What are the biggest pain points in designing and developing responsive-ly?

Imagination is one o them, surprisingly. To design responsively you needto picture in your brain how youd like all the elements on the page to reacton dierent devices. Ive ound that is a mental block or some olks (which

is o course, something we can overcome with practice). When designingresponsively, it makes everything you do interaction design which is anew concept to some designers who are used to working in xed/at envi-ronments.

How did you overcome these pain points? What resources did you turn to?

Im not naturally good at it, but Ive just practiced responsive designenough that now when I approach a new design my brain just starts think-ing about a responsive approach automatically. Its similar to learningHTML and CSS or the rst time. Eventually even when designing with agraphic layout tool like Photoshop, your brain is thinking about which ele-ments will be used where and how its all going to t together in code.

I started tinkering with responsive design beore there were a whole lot o

resources so I cant give you a specic resource that was vital or me. Ex-


15/38

12

Id denitely recommend that anyone interested in responsive web designtake time to experiment. There are so many responsive designs out there

today, Id recommend getting in the habit o resizing your browser windowa lot more oen to spot what works and what doesnt.

Can you recommend any responsive design resources that youve ounduseul, such as books, websites, theme rameworks, code snippets in blog

posts etc.?)

Starting with Ethan Marcottes book is a good idea so you can understandthe why and the undamentals. You can visit mediaqueri.es and ollow@rwd or inspiration on how other people have built designs. I think Idavoid rameworks when starting out. Responsive design isnt such a com-plicated concept that you need abstraction. I later, aer you get it, youwant to explore some pre-built stu to save time, go or it. Perhaps theGolden Grid System would be useul.
http://www.abookapart.com/products/responsive-web-designhttp://mediaqueri.es/https://twitter.com/#!/rwdhttp://goldengridsystem.com/http://goldengridsystem.com/https://twitter.com/#!/rwdhttp://mediaqueri.es/http://www.abookapart.com/products/responsive-web-design


16/38

13

WORDPRESS DOESNT CARE WHATYOU DO TO THE FRONT END OFYOUR THEMES.

Any other thoughts on responsive design or WordPress sites

I wrote a post called Will This Work With WordPress?! in which I tried todispel a weird belie people sometimes develop, in that WordPress is thisstrange universe where certain web technologies will or wont work, orneed to be done in some special way to work.

I said that, essentially, WordPress doesnt care what you do on the rontend o your themes. You can use any JavaScript ramework you want. Youcan use any CSS trick you nd on the web. That said, WordPress is particu-larly good at content-driven sites.

So to answer the question more directly, you certainly can design respon-sive WordPress themes. When you do, make sure you think about media.For instance, uid images and uid video.
http://digwp.com/2009/08/will-this-work-with-wordpress/http://www.alistapart.com/articles/fluid-images/http://css-tricks.com/video-screencasts/103-integrating-fitvids-js-into-wordpress/http://css-tricks.com/video-screencasts/103-integrating-fitvids-js-into-wordpress/http://www.alistapart.com/articles/fluid-images/http://digwp.com/2009/08/will-this-work-with-wordpress/


17/38

14

IAN STEWART IS A THEME WRAN-GLER FOR AUTOMATTIC, THE FOLKSBEHIND WORDPRESS.COM

Ian Stewart is a Theme Wrangler or Automattic, the olks behind Word-Press.com, and has had a hand in creating some o the most popularWordPress themes around. Hes super-passionate about beautiul design,semantic HTML, and making the web better with WordPress.

You can nd him at themeshaper.com, the Automattic Theme Teams homeon the web, his personal site,iandanielstewart.com, and on Twitter at

@iandstewart.
http://themeshaper.com/http://iandanielstewart.com/http://twitter.com/iandstewarthttp://twitter.com/iandstewarthttp://iandanielstewart.com/http://themeshaper.com/


18/38

15

YOUR DESIGN IS NO LONGER ASTATIC-IMAGE LIKE THING THATJUST SITS THERE IN THE

BROWSER

What is responsive design, and whats all the uss about?

For me responsive design means web design that responds and adapts tothe current size o the browser viewport. Its a simple idea but the designpossibilities it opens up are enormous.

Your design is no longer a static image-like thing that just sits there in thebrowser but a living breathing thing thatwhen its done rightcan make

visiting a site a pleasure regardless o the device used. Tiny little smart-phone browsers all the way up to browsers ull-screened on a 27 monitor;each can have a design that beautiully responds to the canvas provided.


Working toward a responsive design eels really natural. Its hard to dothings just because you know theyre good or you. In the end responsivedesign ts in really well with the way I like to work and what I like to workwith: clean, ready-to-repurpose, uid CSS, layered over top o semanticHTML.

I also have the added benet o knowing that it really is good or me, thepeople that use the themes we work on, and their readers. Its becominghard not to design responsively.


19/38

16

THEY WANT THEIR BEAUTIFULWEBSITE TO EFFORTLESSLY

TRANSITION FROM ONE DEVICETO ANOTHER

How do you explain to clients whyresponsive design is important?

I nd it easy to explain responsivedesign to clients but thats becausemy clients are bloggers desperatelylooking or WordPress themes thatlook the same everywhere.

That is, they want their beautiulwebsite to eortlessly transition

rom one device to another withtheir careully chosen look andmost importantlyall their content

intact and where it ought to be.It takes some eort on the themedesigner to make that happen butwhen implemented correctly its re-

sponsive design that provides thateortless experience to them.

How oen do you use responsivedesign in your client-based designand development? What are thebenets or you as the designer/developer?

Are there any cases where youthink that responsive design is in-appropriate? Why?

I still think there are cases where aresponsive WordPress theme isntneeded. Sometimes the design isno better or worse i it respondedto dierent viewport sizes. Whenresponsive design is used to cre-ate a mobile site and the contentneeds to be dierent in that contextthen a separate mobile theme is

probably better.

We try and create responsive Word-Press themes as oen as possible.

And even when we dont createresponsive WordPress themes I ndthat it still inorms our work.When even a xed-width design isbuilt on a uid, percentage-basedstructure (the oundation o re-sponsive design) it makes it im-mensely easier to add new designelements and WordPress eatures

into an existing theme down theroad. Everything should just owinto place


20/38

17

What are you avorite examples o responsive WordPress designs?

My current avorite responsive WordPress theme is by German designersElmastudio. Its called Piha. It looks absolutely beautiul at every size andnothing ever eels like its missing.


posts etc.?

Ethan Marcottes book and his blog posts are the gold standard or me butnothing beats experimentation and testing. Followed by more testing. Andthen some more testing aer that. :)
http://www.elmastudio.de/http://themes.elmastudio.de/piha/http://www.abookapart.com/products/responsive-web-designhttp://unstoppablerobotninja.com/journal/http://unstoppablerobotninja.com/journal/http://www.abookapart.com/products/responsive-web-designhttp://themes.elmastudio.de/piha/http://www.elmastudio.de/


21/38


22/38

19

Working with images in WordPress that have hardcoded widths means yourun into some inconsistencies in how browsers handle them. You can see

our response to this in our starter theme_s.

We careully selected all possible images your WordPress theme needs tohandle in three declaration blocks. We have standard uid image CSS orall o our images, ollowed by auto height or our images that have beenadded to the WordPress media library. Those have hard-coded height andwidth attributes. We also have a patch or really large WordPress images inIE8.


Im most proud o the work I did or the 2011 deault WordPress theme,Twenty Eleven. My hope was that it would help make responsive designtechniques easier to understand by acting as a working example o them in

action.

Thousands o developers were able to dig in to Twenty Eleven and use it tobuild their rst responsive WordPress theme. It was exciting to be a part othat.

MY HOPE WAS THAT IT WOULDHELP MAKE RESPONSIVE DESIGNTECHNIQUES EASIER TO UNDER-STAND BY ACTING AS A WORKING

EXAMPLE OF THEM IN ACTION
https://github.com/Automattic/_shttp://theme.wordpress.com/themes/twentyeleven/http://theme.wordpress.com/themes/twentyeleven/https://github.com/Automattic/_s


23/38

20

Thousands o developers were able to dig in to Twenty Eleven and use it to

build their frst responsive WordPress theme.
http://theme.wordpress.com/themes/twentyeleven/http://theme.wordpress.com/themes/twentyeleven/


24/38


25/38

22

YOUR WEBSITE IS ALL ABOUTYOUR CONTENT. YOUR CONTENT

IS YOUR MESSAGE AND YOURSPOKEN BRANDING


Our content should always be the ocus. We have the ability to control howthe content is displayed on various devices, and its our duty to acknowl-edge it and make the content shine without device hindrance.

Native apps are costly. Youll end up maintaining multiple code bases writ-ten in multiple programming languages. The model is unsustainablethesheer amount o resources you need to be successul in the native appmodel is huge. Responsive design can give you an equally great content ex-

perience (minus a ew native hardware benets, which browsers are goingto gure out in the uture. (Think about how Google can locate your cur-rent location now, or how you can tap into your native camera unction.)

The interconnectivity o a browser is also a benet. Native apps dont talkto each other like web apps do. For example: i you click on an a Facebookemail link on your phoneit goes to the browser not the native app. Thereis a disconnect that browser-sites solve, and its cross-platorm, on onecodebase. I really believe the uture o mobile is in the web app.

How do you explain to clients why responsive design is important?

Your website is all about your content. Your content is your message andyour spoken branding. Typically, when someone hears about a company ora product or a brand, what do they do? They Google it. Their rst impres-sion o your brand and your content is online.


26/38

23

I TRULY BELIEVE THAT MOBILESHOULD NO LONGER BE ANAFTERTHOUGHT BUT A GIVEN

Currently people access your con-tent in so many ways on various de-

vices. Everything rom a tablet, toa gaming console, to a eed reader.Because we have so many dierentpoints o access, we shouldnt letthe device hinder the message andthe brand.

Everyone needs their site to adaptto its given environment, seamless-

ly, no matter what it is. This waypeople can ocus on what matters.

Mobile should never be an aer-thought.

There are 101.3 million Smartphonesubscribers now according to com-Score, which doesnt even begin toinclude tablet use. Accounting or

this in your designs and mockups isextremely important. Establishingconsistent break points where youruser base doesnt have to struggleto read anymore is importantbe-cause your content is key to your

to your identity. Dont make it hardon people to have a smooth interac-

tion with your brand.

How oen do you use responsivedesign in your client-based designand development? What are thebenets or you as the designer/developer?

I use responsive design on everysite I work on. I truly believe that

mobile should no longer be an a-terthought but a given. I think werebeyond delivering a site that onlyworks properly on a desktop.

Society today demands to be mo-bile. Its not a new thing anymore

and should be addressed.
http://techcrunch.com/2012/03/06/comscore-more-than-100m-u-s-mobile-subscribers-now-use-smartphones-android-and-ios-market-share-up/http://techcrunch.com/2012/03/06/comscore-more-than-100m-u-s-mobile-subscribers-now-use-smartphones-android-and-ios-market-share-up/http://techcrunch.com/2012/03/06/comscore-more-than-100m-u-s-mobile-subscribers-now-use-smartphones-android-and-ios-market-share-up/http://techcrunch.com/2012/03/06/comscore-more-than-100m-u-s-mobile-subscribers-now-use-smartphones-android-and-ios-market-share-up/


27/38

24

I TOLD THEM TO LOOK AT THEIRSITE ON THEIR PHONE, SO THATTHEY COULD SEE THAT IT WASALREADY MOBILE FRIENDLY

Are there any cases where you think that responsive design is inappropri-ate? Why?

Theres no case where addressing mobile is inappropriate. However, insome instances, traditional responsive techniques might reduce the sitesspeed. I youre looking or something tailored to be ast and slick like anapp, eliminating unneeded social JavaScript calls will contribute greatlyto success, which can be achieved through tapping into a separate tem-plate le. Im not sure i I would say that these certain techniques are notresponsive design but I would say that it denitely goes beyond the tradi-tional use cases.

Can you think o a time where using responsive design has saved you oryour client time and/or money?

One time a sketchy company contacted a client, oering them a costly ser-vice to make their site mobile-riendly. To their surprise, I told them tolook at their site on their phone, so that they could see that it was alreadymobile-riendly and that they had no need or another service. They werethrilled.

What are you avorite examples o responsive WordPress designs?

I love oodsense.is and morehazards.com. I love how oodsense.is isntscared to modiy the entirety o their layout to make sure that their contentshines. I love how morehazards.com isnt araid to get rid o excess when

they go down to mobile.
http://foodsense.is/http://morehazards.com/http://morehazards.com/http://foodsense.is/


28/38

25

I love howoodsense.isisnt scared to modiy the entirety o their layout to

make sure that their content shines.
http://foodsense.is/http://foodsense.is/http://foodsense.is/


29/38

26

I love howmorehazards.com isnt araid to get rid o excess when they go

down to mobile.
http://morehazards.com/http://morehazards.com/


30/38

27


posts etc.?

Responsive Web Design (book) by Ethan Marcotte

Responsive Web Design (article)by Ethan Marcott

Fluid Grids

Fluid Images

CSS Media Queries & Using Available Space

Create Fluid Width Videos

How To Use CSS3 Media Queries To Create a Mobile Version o YourWebsite

Responsive Web Design: What it is and how to use it

Responsive Web Design Techniques, Tools and Design Strategies

TwentyElevenWordPress theme

FitVid.jsa jQuery plugin or uid width video embeds

1140 CSS GridThe 1140 px CSS grid system

Less Framework 4an adaptive CSS grid system

css3-mediaqueries-js(css3-mediaqueries.js is a JavaScript library tomakes IE5+, Fireox1+, and Saari2 transparently parse, test, and applyCSS3 Media Queries)

Media QueriesThe W3C candidate recommendation

mediaqueri.es
http://www.abookapart.com/products/responsive-web-designhttp://www.alistapart.com/articles/responsive-web-designhttp://www.alistapart.com/articles/fluidgridshttp://unstoppablerobotninja.com/entry/fluid-images/http://css-tricks.com/css-media-queries/http://www.netmagazine.com/tutorials/create-fluid-width-videoshttp://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/http://theme.wordpress.com/themes/twentyeleven/http://fitvidsjs.com/http://cssgrid.net/http://lessframework.com/http://code.google.com/p/css3-mediaqueries-js/http://www.w3.org/TR/css3-mediaqueries/http://mediaqueri.es/http://mediaqueri.es/http://www.w3.org/TR/css3-mediaqueries/http://code.google.com/p/css3-mediaqueries-js/http://lessframework.com/http://cssgrid.net/http://fitvidsjs.com/http://theme.wordpress.com/themes/twentyeleven/http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/http://www.netmagazine.com/tutorials/create-fluid-width-videoshttp://css-tricks.com/css-media-queries/http://unstoppablerobotninja.com/entry/fluid-images/http://www.alistapart.com/articles/fluidgridshttp://www.alistapart.com/articles/responsive-web-designhttp://www.abookapart.com/products/responsive-web-design


31/38

28

Less Framework 4
http://lessframework.com/http://lessframework.com/


32/38

29

I TRULY BELIEVE THAT MOBILESHOULD NO LONGER BE ANAFTERTHOUGHT BUT A GIVEN

Do you start your responsive de-signs rom scratch, or build on top

o a parent theme or theme rame-work?

I oen build o oTwenty Eleven.But sometimes, I need to incorpo-rate more than just what TwentyEleven has in store. More mediaqueries, tvid, or other techniquesor more complicated sites.

ne or my purposes.

I am sure that one day I will comeacross a more mobile ui-involveddesign where I would need to takethe mobile rst approach.

So ar the sites Ive been workingon have been more about content-publishing and reading rather thanbased on tasks or interactivity.

Describe your responsive designworkfow

Typically I start with a design, thenI comp it out into a ew dierentbreakpoints. Typically large screen(max break point), laptop, iPad,

and iPhone.

When I nd the balance or whatlooks best or the content, I make aplan or development. Some peoplecome at it with the mobile rstapproach, but Ive ound that indevelopment, coding rom laptopup and laptop down has been just

To dene my workow simply:

1. exible grid2. exible images and video3. media queries4. nagling & crying test test test

test

5. launch6. PROFIT
http://theme.wordpress.com/themes/twentyeleven/http://theme.wordpress.com/themes/twentyeleven/


33/38

30

ONE MAIN PAIN POINT IS DEVELOP-ING FEATURES AFTER A SITE HASLAUNCHED

What are the biggest pain points in designing and developing responsive-ly?

I would say that one main pain point is developing eatures aer a site haslaunched. You always have to go back and re-test responsively every time

you add a new template or a new unctionality. The testing process be-comes way longer than typical browser and OS testing.

How did you overcome these pain points? What resources did you turn to?

I own a lot o devices and use them or testing. But it also helps to havea ew more testing protocol in place. In Chrome dev tools you can switchuser agents or easy, quick testing. There are also bookmarklets you caninstall on your iPad and iPhone or viewing source, as well asrebug tools.Also, getting a Kindle Fire was a good movethat user base is growingquickly!


I built PandoDaily.com as a child theme to Twenty Eleven actually.

It was really neat to build on the shoulders o the Automattic Theme Team/Lance (Willett), Ian (Stewart), etc. knowing that the theme will always bein tip-top shape or updates.
http://osxdaily.com/2012/03/30/view-source-safari-ipad-iphone/http://osxdaily.com/2011/12/02/run-firebug-on-ipad-or-iphone/http://pandodaily.com/http://pandodaily.com/http://osxdaily.com/2011/12/02/run-firebug-on-ipad-or-iphone/http://osxdaily.com/2012/03/30/view-source-safari-ipad-iphone/


34/38

31

I builtPandoDaily.comas a child theme to Twenty Eleven
http://pandodaily.com/http://pandodaily.com/


35/38

32

FURTHER READING

Responsive Web Design(book) by Ethan Marcotte

Responsive Web Design(article) by Ethan Marcotte

Fluid Grids(article) by Ethan Marcotte

Fluid Images(article) by Ethan Marcotte

CSS Media Queries & Using Available Space(article) by Chris Coyier

Create Fluid Width Videos(article) by Chris Coyier

Responsive Web Design: What it is and how to use it

Responsive Web Design Techniques, Tools and Design Strategies

Media QueriesThe W3C candidate recommendation

50 Fantastic Tools For Responsive Web Design

RWD RESOURCES
http://www.abookapart.com/products/responsive-web-designhttp://www.alistapart.com/articles/responsive-web-designhttp://www.alistapart.com/articles/fluidgridshttp://unstoppablerobotninja.com/entry/fluid-images/http://css-tricks.com/css-media-queries/http://www.netmagazine.com/tutorials/create-fluid-width-videoshttp://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/http://www.w3.org/TR/css3-mediaqueries/http://www.netmagazine.com/features/50-fantastic-tools-responsive-web-designhttp://www.netmagazine.com/features/50-fantastic-tools-responsive-web-designhttp://www.w3.org/TR/css3-mediaqueries/http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/http://www.netmagazine.com/tutorials/create-fluid-width-videoshttp://css-tricks.com/css-media-queries/http://unstoppablerobotninja.com/entry/fluid-images/http://www.alistapart.com/articles/fluidgridshttp://www.alistapart.com/articles/responsive-web-designhttp://www.abookapart.com/products/responsive-web-design


36/38

33

FURTHER LISTENING

ShopTalk 009Chris Coyier and Dave Rupert chat with Ethan Marcotte

Responsive Web Design with Jeremy Keith (SitePoint podcast)

The Big Web Show: Responsive Web Design

The Web Ahead: Ethan Marcotte on Responsive Web

Ethan Marcotte: The How and Why o Responsive Web Design

RWD RESOURCES
http://shoptalkshow.com/episodes/009-with-ethan-marcotte/http://www.sitepoint.com/podcast-111-responsive-web-design-with-jeremy-keith/http://5by5.tv/bigwebshow/9http://5by5.tv/webahead/2http://www.uie.com/brainsparks/2011/03/11/ethan-marcotte-the-how-and-why-of-responsive-web-design/http://www.uie.com/brainsparks/2011/03/11/ethan-marcotte-the-how-and-why-of-responsive-web-design/http://5by5.tv/webahead/2http://5by5.tv/bigwebshow/9http://www.sitepoint.com/podcast-111-responsive-web-design-with-jeremy-keith/http://shoptalkshow.com/episodes/009-with-ethan-marcotte/


37/38

34

RWD RESOURCES

FURTHER EXPERIMENTATION

TWITTER

_sa starter theme rom Automattic

TwentyElevenWordPress theme

FitVid.jsa jQuery plugin or uid width video embeds

1140 CSS GridThe 1140 px CSS grid system

Less Framework 4an adaptive CSS grid system

css3-mediaqueries-js(css3-mediaqueries.js is a JavaScript library tomakes IE5+, Fireox1+, and Saari2 transparently parse, test, and applyCSS3 Media Queries)

The Golden Grid System

@RWD
https://github.com/Automattic/_shttp://theme.wordpress.com/themes/twentyeleven/http://fitvidsjs.com/http://cssgrid.net/http://lessframework.com/http://code.google.com/p/css3-mediaqueries-js/http://goldengridsystem.com/https://twitter.com/#!/rwdhttps://twitter.com/#!/rwdhttp://goldengridsystem.com/http://code.google.com/p/css3-mediaqueries-js/http://lessframework.com/http://cssgrid.net/http://fitvidsjs.com/http://theme.wordpress.com/themes/twentyeleven/https://github.com/Automattic/_s


38/38

35

A CODE POET BOOK

WordPress, Meet Responsive Designis the rst in a series o ree books

geared toward, and ocused on, the needs, stragegies and eld tactics opeople who work with WordPress in the real world to build sites or clients,riends, and amily.

Visit codepoet.com to see additional Code Poet resources, sign up to re-ceive updates, or let us know what you think. Wed love to hear your ideas.
http://codepoet.com/http://codepoet.com/

Documents

Wordpress Meet Responsive Design3