Create A Responsive, Mobile-First WordPress Theme

Advertisement

Let’s assess the situation. WordPress is an extremely popular, flexible, easy to use and open-source blogging and CMS system. More and more mobile devices are flooding the market every day, changing the way people use the Internet. And the need is growing for more beautifully designed and coded WordPress themes that work well across all of these devices. So, what are we waiting for? Let’s get to work!

How to create a responsive mobile first WordPress Theme1

At first, the idea of designing and developing a fully responsive, mobile-ready WordPress theme might be overwhelming. You might be thinking, “How do I handle a responsive design with all of this flexible content that a WordPress theme has? What should I consider when designing for touch devices? And do I really have to get rid of drop-down menus and other hover elements on mobile devices?”

But after doing some research and looking more closely at some of the responsive WordPress themes and theme frameworks out there, you will probably wrap your head around the idea pretty quickly, and the evolving world of WordPress theme design will sound like a huge opportunity that you can’t wait to get started on.

It’s All About Preparation

Having a detailed design concept is even more important for a responsive WordPress theme than for a static-width theme. At this stage, you haven’t decided anything, so nothing will get in your way of creating a clever and practical layout that adapts smoothly to different screens.

First, consider what you want to achieve with your WordPress theme, which user group you are targeting, and what their needs are. With these considerations, you can create a list of useful elements for your layout.

Creating the Theme’s Concept

Using this list, you can plan your theme by sketching the layout at various screen sizes.

Responsive WordPress theme layout sketches2

When sketching, be aware that the layout widths you choose are only rough reference points to represent the common screen sizes of today’s smartphones, tablets and desktop computers. Your goal should always be to create a responsive design that adapts smoothly to a wide diversity of screen sizes.

Ethan Marcotte, author of Responsive Web Design3, described his approach to responsive Web design in a recent interview4, explaining:

I’m a big, big believer of matching breakpoints to the design, not to individual devices. If we’re after more future-proof responsive designs, we should stop thinking in terms of “320px,” “480px,” “768px,” or whatever — the Web’s so much more flexible than that, and those pixels are a snapshot of the Web as we know it today. Instead, we should focus on breakpoints tailored to the design we’re working on.

While working on your concept sketches, also think about which layout options to offer in the theme (such as header and sidebar options or multiple widget areas) and how they will adapt to different screen sizes as well.

Responsive Layout Sketches5
An optional sidebar element in a responsive layout.

Tools for Concept Sketching

Which tool you use to develop the theme’s concept is not important. Just choose one that allows you to work quickly and that doesn’t interrupt your workflow.

If you feel most comfortable sketching on a piece of paper or in a notebook, go for it. You could also try sketching on an iPad using a popular app such as Paper6 by FiftyThree or Bamboo Paper7, together with a digital pen like Wacom’s Bamboo Stylus8. Working directly on a tablet will make sharing your ideas later with the developer a lot easier. One of my all-time favorite articles is Mike Rohde’s “Sketching: The Visual Thinking Power Tool9,” which promotes sketching as a simple visual tool for thinking.

The iPad as a Sketching Tool10
Use your tablet a simple fast sketching tool.

A Good Concept Saves Time

If you develop the concept precisely at the beginning of the project, you will save a lot of time and effort later in the design process. The layout will adapt to different screen sizes more intelligently if you have thought a lot about the design’s behavior before even opening Photoshop (or your software of choice).

Theme-Specific Challenges to Consider

Because designing a WordPress theme with very flexible content is quite a different challenge than designing a static website, at this early stage of the process you should find solutions to the following theme-specific problems:

1. WordPress’ Navigation Menu

Until responsive Web design found its way into WordPress theme designs, most themes seemed to rely on good old-fashioned drop-down menus to give users multi-level navigation. But because drop-down menus rely on mouse hovering, they don’t work well on touch devices.

We already have some smart solutions for developing responsive, touch device-ready navigation. Brad Frost has a very helpful resource comparing common solutions for responsive menus in his post “Responsive Navigation Patterns11.”

2. Responsive Layout Options

Most themes offer users at least some layout options, such as left or right sidebar, header widget and footer elements. To offer this kind of flexibility in a responsive theme, you will have to consider how all of the layout elements will behave on different screen sizes. For instance, if you want to offer a left sidebar option, consider that the content of this sidebar would appear above the main content area on mobile devices. In most cases, this wouldn’t be the best solution because mobile users want to read the most important content first (such as the latest blog post) without having to scroll down a sidebar.

3. Flexible Widget Areas

Widget areas are another challenge for responsive designers. After all, designing one is not easy if you don’t know what kind of content the user will put in it. So, you need to make sure that the design works no matter which and how many widgets are used in the widget areas.

Enough Headaches. Let’s Get To The Fun.

Because you are creating a responsive website, designing the entire website pixel by pixel in Photoshop and then just handing it over to the developer would result in too static a design and too time-consuming a process.

Working With Reference Points

Instead, the design process should be used to figure out the general look and feel of the theme. At this stage, you should also work more intensively on the challenges mentioned, such as responsive navigation, layout variations and flexible widget areas.

How you prepare the design for further development will depend partly on the nature of the project and how closely you will work with the developer. In general, showing your design in the three layout versions is a good starting point: smartphone, tablet and desktop. These “screenshots” can then be used as reference points for development.

Responsive web design layouts12
A responsive layout in three variations.

Designing in the Browser

Design details such as font sizes, white space and button styles can be defined later directly in the browser. Because browsers often treat these elements differently, designing and testing them directly in their final environments is way more efficient.

Designing for Touch Devices

Because your design will also be used on touch devices, you have to consider the special requirements of these devices. Using a finger to navigate a website is entirely different than using a precise mouse cursor.

This is why buttons and form input fields need to be at the right size. Font sizes and white space should also be applied more generously, so that users can navigate easily and read content comfortably.

Exercise Your Communication Skills

Staying in constant communication with the developer during the entire process is very important (i.e. if you are not the developer yourself). Especially in a responsive design process, incorporating the developer’s knowledge into your decisions will keep you from having to change things later on.

Development

After wrapping up the design process, the first decision to make is whether to code the theme from scratch or to use a blank or starter theme (such as Automattic’s Toolbox13 or the newer _s14 theme).

If you want to work with one of the popular responsive frameworks such as Twitter’s Bootstrap15 or ZURB’s Foundation16, then you could use a starter theme that already includes the framework, such as BootstrapWP17 or WordPress Foundation18. Another popular starter theme is Bones19, which uses 320 and Up20 as a mobile-first boilerplate.

Of course, the way you start a theme will always depend on the project and your personal preferences. But if you’re still learning, then a blank theme would serve as a solid foundation for development.

Go Mobile First

A smart approach is to design and develop for the smallest layout first (i.e. smartphones) and then work your way up to tablet and desktop screen sizes. To get further insight into the mobile-first approach to Web design, read the book Mobile First21 by Luke Wroblewski.

Mobile First Web Design22
Design and develop your WordPress theme starting with the smallest size first.

Supporting Media Queries in Old Browsers

With the smartphone layout as your default, you will need to rely on a JavaScript solution such as Respond.js23 to support media queries in old browsers (such as Internet Explorer 7 and 8).

Alternatively, you could add CSS classes for old IE browsers through conditional comments, and then add CSS styles to set a maximum width for old IE browsers outside of your media queries. You can find a detailed explanation of this method in the article “Leaving Old Internet Explorer Behind24.”

Images in a Responsive Theme

With the release of high-pixel-density devices such as the new iPad and new MacBook Pro, you will also need to reconsider the images in your theme.

Alternatives to images would be to use a CSS solution or use icon fonts25. Fewer images will also result in a much more lightweight theme, which will speed up performance on slow mobile Internet connections. Trent Walton shares his reflections on the Retina-optimization of Web design in his article “In Flux26.”

Test, Test, Test

Particularly when developing a responsive theme, testing your work live as soon and as often as possible is critical. This way, you can quickly correct styles during development as necessary. Also, test whether fonts are easy to read and whether images, gallery sliders and embedded elements such as video work correctly on different devices.

How to Test on Mobile Devices

Of course, checking your theme on one of the many screen-resolution-testing tools, such as Screenfly27, during development is very helpful, too.

Testing a web design with Screenfly28
The mobile version of United Pixelworkers29’s website tested with Screenfly.

But because of the different behavior of mobile browsers, touchscreens and high-density screens, constantly testing your theme on actual devices is important.

Unless you work for a big company, finding ways to test your theme during the development process can be quite a challenge. Of course, you won’t be able to test on all of the devices out there, but besides the devices that you own, you could ask friends, family, other freelancers and coworkers to help you test. You can also visit your local electronics store to test on the devices there.

Test your WordPress theme on multiple devices30
Test your WordPress theme on various devices as often as you can.

A helpful post with a lot of testing advice is part 5 of the recent “Build a Responsive Site in a Week31” tutorial series on .NET magazine.

Responsive Theme Vs. Mobile Plugin

A mobile theme plugin such as the popular WPtouch plugin32 can be a great temporary solution to give mobile users a better experience on an existing website. In most cases, offering visitors an optimized mobile experience with the help of a plugin is probably better than not optimizing at all.

But in the long term, a fully responsive theme has many advantages to a plugin:

  • The website can maintain its unique branding across all devices.
  • Users will get the same experience on all devices and thus have less trouble navigating the website.
  • The website will be easier to maintain (the administrator won’t need to install and update the plugin).

Responsive theme vs mobile theme plugin33
A responsive WordPress theme on the left, and a mobile plugin at work on the right.

Conclusion

Responsive Web design is often still described as a trend. And some might quietly hope that the trend will pass sooner or later. But responsive Web design is so much more than a trend: it’s a new mindset, as has been said34:

It’s such a shame that Responsive design is often degraded to being a ‘Web design trend’. It isn’t. It’s a new mindset.

In a multiple-device world, where the Internet seems to be available everywhere, responsive Web design feels so much more like a natural process that is just starting to show its potential.

So, what should our job as theme designers and developers be? Because responsive WordPress themes are still so new and in constant development, we must not be afraid to start from scratch, search for improvements and continue learning. And let’s share our knowledge and experience with each other along the way.

(al)

Footnotes

  1. 1 http://www.smashingmagazine.com/wp-content/uploads/2012/05/responsive-wordpress-themes-splash.jpg
  2. 2 http://www.smashingmagazine.com/wp-content/uploads/2012/05/responsive-layout-sketches.jpg
  3. 3 http://www.abookapart.com/products/responsive-web-design
  4. 4 http://www.netmagazine.com/interviews/ethan-marcotte-answers-your-responsive-web-design-questions
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2012/05/ipad-layout-sketches.jpg
  6. 6 http://www.fiftythree.com/paper
  7. 7 http://bamboopaper.wacom.com/
  8. 8 http://www.wacom.com/en/Products/Bamboo/BambooStylus.aspx
  9. 9 http://www.alistapart.com/articles/sketching-the-visual-thinking-power-tool/
  10. 10 http://www.smashingmagazine.com/wp-content/uploads/2012/05/ipad-sketching-tool.jpg
  11. 11 http://bradfrostweb.com/blog/web/responsive-nav-patterns/
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2012/05/responsive-design-layouts.jpg
  13. 13 http://wordpress.org/extend/themes/toolbox
  14. 14 http://themeshaper.com/2012/02/13/introducing-the-underscores-theme/
  15. 15 http://twitter.github.com/bootstrap/
  16. 16 http://foundation.zurb.com/
  17. 17 http://bootstrapwp.rachelbaker.me/
  18. 18 http://320press.com/wp-foundation/
  19. 19 http://themble.com/bones/
  20. 20 http://stuffandnonsense.co.uk/projects/320andup/
  21. 21 http://www.abookapart.com/products/mobile-first
  22. 22 http://www.smashingmagazine.com/wp-content/uploads/2012/05/mobile-first.jpg
  23. 23 https://github.com/scottjehl/Respond
  24. 24 http://jonikorpi.com/leaving-old-IE-behind/
  25. 25 http://css-tricks.com/flat-icons-icon-fonts/
  26. 26 http://trentwalton.com/2012/05/08/in-flux/
  27. 27 http://quirktools.com/screenfly/
  28. 28 http://www.smashingmagazine.com/wp-content/uploads/2012/05/screenfly-testing.jpg
  29. 29 http://www.unitedpixelworkers.com/
  30. 30 http://www.smashingmagazine.com/wp-content/uploads/2012/05/device-testing.jpg
  31. 31 http://www.netmagazine.com/tutorials/build-responsive-site-week-going-further-part-5
  32. 32 http://wordpress.org/extend/plugins/wptouch/
  33. 33 http://www.smashingmagazine.com/wp-content/uploads/2012/05/responsive-vs-plugin.jpg
  34. 34 http://twitter.com/smashingmag/statuses/175477183551242240

↑ Back to topShare on Twitter

Advertising
  1. 1

    Nice article about the first steps in responsive webdesign! :-)

    4
  2. 2

    Great article, thanks so much for the write-up!

    One point I don’t agree with is under point 2, Responsive Layout Options: “if you want to offer a left sidebar option, consider that the content of this sidebar would appear above the main content area on mobile devices”.

    This does not have to be true at all. It’s actually quite easy to get a left sidebar to show under the main content, as you can see at for example my Basejump theme: http://wpbaseju.mp/page-templates/alt-sidebar-content/

    5
  3. 3

    Andreas Koutsoukos

    June 29, 2012 1:09 am

    Great post Ellen.

    0
  4. 4

    This is a great post! Yes, mobile is going to rule and we should prepare ourselves to be ready to handle mobile Web requirements…

    2
  5. 5

    Great article! And thanks for this detailed overview of designing your nice themes!

    2
  6. 6

    Hey Ellen,

    Awesome post! I’m glad I saw this in my Facebook feed. I’m working on my first responsive theme at the moment, but not writing the theme from scratch. I’m working with a theme that was written by someone else, and I think that has caused me a bit of a headache.

    It’s fun and i’m enjoying working with the max-widths and 100% widths. but trying to convert a fixed layout to a clever responsive one is definitely challenging. I’m glad I learned this the hard way. Definitely gonna start from scratch or from a framework.

    Thanks for the tips and resources!

    7
  7. 7

    Cool!!! Soon mobiles are gonna be king of the web world :-)

    3
  8. 8

    “It’s such a shame that Responsive design is often degraded to being a ‘Web design trend’. It isn’t. It’s a new mindset”

    Hm.. is it really a _new_ mindset? When I took a university course for about 6-7 years ago in “Web accessability and usability” we were tought that a responsive design was the only right thing to do if you had usability and accessability in mind. The only difference about it was that they didn’t call it “responsive design”, instead it was called “floating design” (directly translated from swedish).

    So maybe the new trend (or perhaps mindset) is that everybody now feel that they need to do their designs responsive, instead of having separate websites for different web broswers (tablet, mobile and so on…).

    8
    • 9

      Vic, you stole my thunder a bit. I fully agree with you: how is responsive web design a trend?! Responsive design isn’t the same as a big header or a big footer or shiney buttons; something that will be cool now and then die when the next cool thing comes along. Responsive web design means preparing for the future and enabling access to your site and content to the most amount of people.

      Last week someone tweeted that they get extremely frustrated and annoyed when the input type email isn’t used on email inputs, and I feel the same way. If you think about it, that is a form of responsive web design since it matters most on mobile devices in that instance. More and more I am getting annoyed and frustrated when I go to sites that hide content from me because I’m on my phone, or that don’t plan layout and usability for mobile users (ie. NOT responsive).

      This is a great article and starting point for building responsive wordpress themes. People need to jump off of the “responsive design is a trend” train pretty quick because that train is going nowhere but backwards.

      2
      • 10

        Agree with above.. I think the, let’s say, more mature designers who were around Bubble One time (i.e. 1999) have seen all this before: So many new “trends”, even the famous Skeuomorphics (however it’s spelt) of Apple have been done before, so have fluid / flexible layouts, responsive design etc.

        There are slight differences, and this time there is more refinement and common purpose, and faster diffusion and adoption of trends. It’s hard to remember life before the internet, but even before Twitter things were very different.

        Personally I think responsive design is here to stay, simple because it the poorman’s alternative to a real mobile design, because, let’s face it – different spaces can use information better. It’s difficult to optimise for both, it’s a compromise of both. Simply making things “bigger” on the desktop screen is no solution really, it’s a hack.

        4
  9. 11

    Hi Ellen, hi all,
    thank You for the good explanation!

    Responsive design is not a big business. Its very easy for us developers to switch from desktop-layout to responsive. The real re-thinking-job have the website-owners!

    Why? The difficult points in responsive design – i see – are only: A) the menu (content-structure) and B) the content.
    If you only have 5 to 7 items without sub-levels – no problem. But if you have big websites with 3 or more sub-levels and a huge bunch of items and/or a lot of content on a page. Then the most responsive-themes/frameworks are not to use. Not why they are bad! Simply because they were not made ​​for it. A small device (monitor) its a small device – they just were also not made for it.

    When we will start to (re-)build a website, we have to start first with a new concept of the site: What will i show on my pages. Then we can start to think about a responsive theme or framework.

    Maybe in the future we will see more small websites then big-ones; more websites with fewer menu-levels?

    (Ok, i hope my bloody English was good enough. Maybe i write my comment in German later on my blog.)

    Greetings from Berlin
    Heiko

    4
  10. 12

    Great Article, and thanks for the Bones mention!

    0
  11. 13

    Great article – and great things to have in mind when designing.

    1
  12. 14

    Great Article

    1
  13. 15

    What exactly does any of this have to do with WordPress?

    Sure, also WordPress-themes should use responsive designs if possible/needed, but apart from that?!

    5
  14. 16

    Well to be honist, I am using a mobile device to view this page. Smashing magazine is itself quite responsive that I feel at ease reading this :)

    1
  15. 17

    On perfect time………… Thanks :)

    0
  16. 18

    @heiko 
    Complex (or cluttered) navigation has always been a problem in webdesign. In responsive design it simply gets more obvious.
    There are “big ones” out there using rwd and even a mobile first approach. Have a look at starbucks.com for example. 
    The need to keep mobile usability in mind might make coding a bit more challenging.
    It’s simply not enough to design some sort of big chunky dropdown-flyout-something to contain everything. It needs to be usable, too. 
    Right now there are very few solutions that do the trick on big sites. Many of which you can’t even put to work with a mouse, never mind a touch pad.
    In my opinion, Responsive Design in connection with Mobile First will help to improve coding standards. But that’s a big advantage. So lets go for it! 

    3
  17. 19

    interesting. It’s really isn’t a trend but the future of the web. designers should offer responsive design sketches as a standard already!

    3
  18. 20

    Awesome article Ellen, congrats and many thanks for the super useful information!

    2
  19. 21

    Thanks for this post and some of the great resources you have linked to in this article. I haven’t heard of respond.js before I’m sure it will be useful to use.

    I’ve tried WPtouch in the past and didn’t get on with it and made sure I quickly put together a responsive site. It doesn’t take too long to do on a WordPress theme and can make a big difference.

    0
  20. 22

    Hi Helen -

    Great post!

    You mentioned that a responsive theme is better than a plugin/alternate mobile theme. While I agree with you that it may make for easier maintenance, I don’t agree with:

    “Users will get the same experience on all devices and thus have less trouble navigating the website.”

    Who is to say users want the same experience on a phone that they do on a desktop? They could have different use cases entirely…

    2
  21. 23

    I used adobe shadow for few of my projects. Liked it much than other responsive testing tools http://labs.adobe.com/technologies/shadow/

    -3
  22. 24

    You should remember there can be people who use Metro-style Internet Explorer 10 in snapped view to view your site so your @media-queries should add:

    @media screen and (max-width: 320px) {

    @-ms-viewport { width: 320px; }

    }

    @media screen and (min-width: 768px) and (max-width: 959px) {

    @-ms-viewport { width: 768px; }

    }

    like this.

    6
  23. 25

    WordPress is the best… the best part of this CMS, it uses very useful plugins which makes your site work more perfectly… I use wordpress for my blog .. Thanks for sharing

    -11
  24. 26

    All my designs are now responsive – I use wordpress as my default CMS all the time now and I generally use a theme like Yoko and develop on that, it works great and I am always happy when the client sees their site on a mobile device it shows you care.

    0
  25. 27

    EXCELLENT article!

    We use WPTouch most of the time and certainly is not the best option. I’ve being pointed to bootstrap-like frameworks in the past, but I’ve never considered using them seriously, mainly because it means changing our whole work methodology.

    I’m working right with your suggestions on a new small project we’re currently developing.

    Thanks a lot!

    1
  26. 28

    Great article, I have recently used some wordpress responsive themes but after customising the look/feel of the theme, the time spent fixing it again for tablets/devices brings me back to the days wasted on IE6 fixes.

    2
  27. 29

    Christopher John Cubos

    July 4, 2012 7:51 am

    Awesome article … I used this to teach my students responsive layouts to get them to understand the basics … very useful :)

    0
  28. 30

    Ellen,

    Thanks for the BootstrapWP mention!

    As more and more sites are developed to be responsive to diiferent device sizes, the 960px fixed layout websites that make visitors “pinch to zoom” are going to be left behind.

    1
  29. 31

    Hello… Very nice article, like always…
    Can you give me a solution finding where to modify the css properties to an element when my website is in mobile view… Where are applied those properties changing the display from desktop > tablet > mobile? I just don’t know how exactly responsive themes work in wordpress though I have searched on internet and surprisingly haven’t found explanations. Any help would be gratefully appreciate. Thanks in adavnce!

    0
  30. 32

    Thanks for sharing wonderful information… I too agree with what you said in the post… Responsive mobile — comes only with a responsive web design and for that companies are looking to hire mobile application developer who is skilled as well as well versed…

    0
  31. 33

    responsive website or wordpress theme not supported in IE 6 ?
    but IE 6 is gone …

    some country’s using for testing IE 6 present now

    -1
  32. 34

    I stopped going to Mashable blog as often because I got really tired of the “Fanboying” attitude I was seeing there. There was no way I was a about to get a real objective review on anything since it almost seems Mashable is an Apple subsidiary.

    I don’t see much different attitude here. I am an Android user so I will have to go somewhere else.

    -1
  33. 35

    a lot work to update all stuff out side there in the net

    0
  34. 36

    I have a theme that is responsive but the content appears uneven within its page container so that it appears aligned left. I want to make sure that it is always centered no matter the screen size; and I was wondering if I could and how to convert it to being fixed or correct the issue.

    1
  35. 37

    Thank for sharing. this has been very informational.

    -1
  36. 38

    Daniel Condurachi

    July 30, 2013 7:56 am

    Recently I created a responsive WordPress theme for my photography business-hobby. I used Foundation framework by ZURB. I also implemented responsive dynamic images and a front page responsive dynamic slideshow.

    For the menu I tried to simplify it as much as possible. In the first iteration I had a button appearing for mobile devices. When pushed the menu would appear in a very visible way and easy to use on mobile devices. But this meant that the whole content of a page would have to load first so that the JS for the menu to work properly. So I ditched the idea and simplified the menu.

    0
  37. 39

    Nice article very useful for me :)

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top