Post on 05-Apr-2018
7/31/2019 Wordpress Meet Responsive Design3
1/38
7/31/2019 Wordpress Meet Responsive Design3
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/7/31/2019 Wordpress Meet Responsive Design3
3/38
i
CONTENTS
PREFACE
CHRIS COYIER
IAN STEWART
SARA CANNON
RWD RESOURCES
A CODE POET BOOK
01
02
14
21
32
35
7/31/2019 Wordpress Meet Responsive Design3
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/7/31/2019 Wordpress Meet Responsive Design3
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/7/31/2019 Wordpress Meet Responsive Design3
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/31/2019 Wordpress Meet Responsive Design3
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/7/31/2019 Wordpress Meet Responsive Design3
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/7/31/2019 Wordpress Meet Responsive Design3
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/7/31/2019 Wordpress Meet Responsive Design3
10/38
07
One o the impressive things about the Smashing Magazine responsive de-
sign is the breadth o it.
7/31/2019 Wordpress Meet Responsive Design3
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.css7/31/2019 Wordpress Meet Responsive Design3
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/7/31/2019 Wordpress Meet Responsive Design3
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
7/31/2019 Wordpress Meet Responsive Design3
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-
7/31/2019 Wordpress Meet Responsive Design3
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-design7/31/2019 Wordpress Meet Responsive Design3
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/7/31/2019 Wordpress Meet Responsive Design3
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/7/31/2019 Wordpress Meet Responsive Design3
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.
Why do you design responsively?
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.
7/31/2019 Wordpress Meet Responsive Design3
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
7/31/2019 Wordpress Meet Responsive Design3
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.
Can you recommend any responsive design resources that youve ounduseul, such as books, websites, theme rameworks, code snippets in blog
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/7/31/2019 Wordpress Meet Responsive Design3
21/38
7/31/2019 Wordpress Meet Responsive Design3
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.
Tell us about the responsive sites youve created.
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/_s7/31/2019 Wordpress Meet Responsive Design3
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/7/31/2019 Wordpress Meet Responsive Design3
24/38
7/31/2019 Wordpress Meet Responsive Design3
25/38
22
YOUR WEBSITE IS ALL ABOUTYOUR CONTENT. YOUR CONTENT
IS YOUR MESSAGE AND YOURSPOKEN BRANDING
Why do you design responsively?
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.
7/31/2019 Wordpress Meet Responsive Design3
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/7/31/2019 Wordpress Meet Responsive Design3
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/7/31/2019 Wordpress Meet Responsive Design3
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/7/31/2019 Wordpress Meet Responsive Design3
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/7/31/2019 Wordpress Meet Responsive Design3
30/38
27
Can you recommend any responsive design resources that youve ounduseul, such as books, websites, theme rameworks, code snippets in blog
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-design7/31/2019 Wordpress Meet Responsive Design3
31/38
28
Less Framework 4
http://lessframework.com/http://lessframework.com/7/31/2019 Wordpress Meet Responsive Design3
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/7/31/2019 Wordpress Meet Responsive Design3
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!
Tell us about the responsive sites youve created.
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/7/31/2019 Wordpress Meet Responsive Design3
34/38
31
I builtPandoDaily.comas a child theme to Twenty Eleven
http://pandodaily.com/http://pandodaily.com/7/31/2019 Wordpress Meet Responsive Design3
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-design7/31/2019 Wordpress Meet Responsive Design3
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/7/31/2019 Wordpress Meet Responsive Design3
37/38
34
RWD RESOURCES
FURTHER EXPERIMENTATION
_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/_s7/31/2019 Wordpress Meet Responsive Design3
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/