{"id":609,"date":"2012-07-31T21:00:51","date_gmt":"2012-07-31T12:00:51","guid":{"rendered":"http:\/\/www.santoshkori.com\/blog\/?p=609"},"modified":"2012-08-23T17:24:51","modified_gmt":"2012-08-23T08:24:51","slug":"create-a-responsive-mobile-first-wordpress-theme","status":"publish","type":"post","link":"https:\/\/www.santoshkori.com\/blog\/create-a-responsive-mobile-first-wordpress-theme\/","title":{"rendered":"Create A Responsive, Mobile-First WordPress Theme"},"content":{"rendered":"

Let\u2019s assess the situation. WordPress<\/a> 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<\/a> that work well across all of these devices. So, what are we waiting for? Let\u2019s get to work!\u00a0<\/p>\n

\"Responsive<\/a><\/p>\n

It\u2019s All About Preparation<\/h3>\n

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

First, consider what you want to achieve with your WordPress theme<\/a>, 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.<\/p>\n

Creating the Theme\u2019s Concept<\/h4>\n

Using this list, you can plan your theme by sketching the layout at various screen sizes.<\/p>\n

\"\"<\/a><\/p>\n

When sketching, be aware that the layout widths you choose are only rough reference points to represent the common screen sizes of today\u2019s 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.<\/p>\n

Ethan Marcotte, author of Responsive Web Design<\/em><\/a>, described his approach to responsive Web design in a recent interview<\/a>, explaining:<\/p>\n

I\u2019m a big, big believer of matching breakpoints to the design, not to individual devices. If we\u2019re after more future-proof responsive designs, we should stop thinking in terms of \u201c320px,\u201d \u201c480px,\u201d \u201c768px,\u201d or whatever \u2014 the Web\u2019s 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\u2019re working on.<\/p><\/blockquote>\n

While working on your concept sketches, also think about which layout options<\/strong> 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.<\/p>\n

\"ipad<\/a>
\n<\/a>
\nAn optional sidebar element in a responsive layout.<\/em><\/p>\n

Tools for Concept Sketching<\/h4>\n

Which tool you use to develop the theme\u2019s concept is not important. Just choose one that allows you to work quickly and that doesn\u2019t interrupt your workflow.<\/p>\n

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 Paper by FiftyThree or Bamboo Paper, together with a digital pen like Wacom\u2019s Bamboo Stylus. 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\u2019s \u201cSketching: The Visual Thinking Power Tool,\u201d which promotes sketching as a simple visual tool for thinking.<\/p>\n

\"ipad<\/a>
\n<\/a>
\nUse your tablet a simple fast sketching tool.<\/em><\/p>\n

A Good Concept Saves Time<\/h4>\n

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\u2019s behavior before even opening Photoshop (or your software of choice).<\/p>\n

Theme-Specific Challenges to Consider<\/h3>\n

Because designing a WordPress theme<\/a> with very flexible content<\/strong> 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:<\/p>\n

1. WordPress\u2019 Navigation Menu<\/h4>\n

Until responsive Web design<\/a> found its way into responsive WordPress theme designs<\/a>, 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\u2019t work well on touch devices.<\/p>\n

We already have some smart solutions for developing responsive<\/a>, touch device-ready navigation. Brad Frost has a very helpful resource comparing common solutions for responsive menus in his post \u201cResponsive Navigation Patterns.\u201d<\/p>\n

2. Responsive Layout Options<\/h4>\n

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<\/a>, 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\u2019t 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.<\/p>\n

3. Flexible Widget Areas<\/h4>\n

Widget areas are another challenge for responsive designers<\/a>. After all, designing one is not easy if you don\u2019t 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.<\/p>\n

Enough Headaches. Let\u2019s Get To The Fun.<\/h3>\n

Because you are creating a responsive website<\/a>, 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.<\/p>\n

Working With Reference Points<\/h4>\n

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.<\/p>\n

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 \u201cscreenshots\u201d can then be used as reference points for development.<\/p>\n

\"responsive<\/a>
\n<\/a>
\nA responsive layout in three variations.<\/em><\/p>\n

Designing in the Browser<\/h4>\n

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.<\/p>\n

Designing for Touch Devices<\/h4>\n

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.<\/p>\n

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.<\/p>\n

Exercise Your Communication Skills<\/h4>\n

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<\/a> process, incorporating the developer\u2019s knowledge into your decisions will keep you from having to change things later on.<\/p>\n

Development<\/h3>\n

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\u2019s Toolbox<\/a> or the newer _s<\/a> theme).<\/p>\n

If you want to work with one of the popular responsive frameworks<\/a> such as Twitter\u2019s Bootstrap<\/a> or ZURB\u2019s Foundation<\/a>, then you could use a starter theme that already includes the framework, such as BootstrapWP<\/a> or WordPress Foundation<\/a>. Another popular starter theme is Bones<\/a>, which uses 320 and Up<\/a> as a mobile-first boilerplate.<\/p>\n

Of course, the way you start a theme will always depend on the project and your personal preferences. But if you\u2019re still learning, then a blank theme would serve as a solid foundation for development.<\/p>\n

Go Mobile First<\/h4>\n

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 First<\/em><\/a> by Luke Wroblewski.<\/p>\n

\"mobile<\/a>
\n<\/a>
\nDesign and develop your WordPress theme<\/a> starting with the smallest size first.<\/em><\/p>\n

Supporting Media Queries in Old Browsers<\/h4>\n

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

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 \u201cLeaving Old Internet Explorer Behind<\/a>.\u201d<\/p>\n

Images in a Responsive Theme<\/h4>\n

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<\/strong> in your theme.<\/p>\n

Alternatives to images would be to use a CSS solution or use icon fonts<\/a>. 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 \u201cIn Flux<\/a>.\u201d<\/p>\n

Test, Test, Test<\/h3>\n

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.<\/p>\n

How to Test on Mobile Devices<\/h4>\n

Of course, checking your theme on one of the many screen-resolution-testing tools, such as Screenfly<\/a>, during development is very helpful, too.<\/p>\n

\"screenfly<\/a>
\n<\/a>
\nThe mobile version of United Pixelworkers<\/a>\u2019s website tested with Screenfly.<\/em><\/p>\n

But because of the different behavior of mobile browsers, touchscreens and high-density screens, constantly testing your theme on actual devices<\/strong> is important.<\/p>\n

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\u2019t 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.<\/p>\n

\"Test<\/a>
\nTest your WordPress theme<\/a> on various devices as often as you can.<\/em><\/p>\n

A helpful post with a lot of testing advice is part 5 of the recent \u201cBuild a Responsive Site in a Week<\/a>\u201d tutorial series on .NET magazine.<\/p>\n

Responsive Theme Vs. Mobile Plugin<\/h3>\n

A mobile theme plugin such as the popular WPtouch plugin<\/a> 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.<\/p>\n

But in the long term, a fully responsive theme has many advantages to a plugin:<\/p>\n