10 Tips for Creating a Responsive WordPress Site

By Nathan Segal

In this article we’re going to look at ten different ways of building a responsive WordPress site. For some of you, nothing is more appealing than to build a site from scratch, but that’s not necessary unless you’re a hard-core programmer. Instead, we’ll look at tools and methods to make the process easier.

1.      Brainstorming: A great way to begin is to make use of a mind map and write out the various components you want to put into your site. This process only takes a few minutes. After using the mind map, you can switch to using a storyboard or a flow chart and plan out the look and feel of your site. Once that’s done, you can start building your site.

2.      Mobile First: One option is to consider building the mobile interface first, partly because it will have many layout restrictions. By building the mobile interface first, you’ll get a sense of what will work for all devices.

3.      Make use of Prototyping Software: One great program for this is Adobe Edge Reflow. With it, you can create various layouts (desktop, tablet, mobile) and export the CSS to another program, like Adobe Dreamweaver.

4.      Use Photoshop to Mock Up the Layout: Use Photoshop or other image design programs (such as Illustrator or CorelDRAW) to mock up the layout so you can see the finished result for desktop, tablet and mobile. With the new functionality in both Photoshop CC and Reflow CC, you can quickly export the Photoshop design to be used in Reflow, where it can then be cleaned up and refined. After that, you can transfer the CSS to another program, such as Dreamweaver, to complete the design.

5.      Use Ready-Made Responsive Design Programs and Themes: A simple way of meeting your needs is to take advantage of themes that are already built for you. If one closely matches your design concept, it could be a simple matter to modify the design, which will save you a lot of time. Some options to consider are: OptimizePress2, Genesis, and Thesis. Other options are Moboom and Headway, which allow you to build a site from scratch. As mentioned earlier, you can also use Adobe Dreamweaver, which has some useful site layout tools.

6.      Use Plugins: Plugins can add quite a bit to your design and some of these will allow you to build layouts for your site. Two examples are the OptimizePress plugin and WordPress Landing Pages.

7.      Navigation is Key: A crucial part of your design is considering the navigation; it’s placement on your pages and whether you have a simple navigation bar or drop down menus. The navigation is important to the look and feel of your site and it’s especially important with mobile, because of the size and making it easy to select items with your fingertip. Too large and the design will seem clunky; too small and it will be difficult to make selections.

8.      Images: This is often a thorny subject because images can really make a theme come alive: They can also add to bandwidth cause performance issues with a poor Internet connection. One solution is to build a layout which makes use of CSS in place of images. Another compromise is a combination of bitmaps and CSS imagery. A third solution is a a combination of CSS, 24-bit bitmaps and 8-bit bitmaps for smaller images, such as thumbnails.

9.      Building a Mobile Site: One solution to building a mobile site is to make use of either a plugin or a standalone product that will produce a mobile site. For a plugin, have a look at WPTouch. For a mobile CMS (content management system), I recommend goMobi, which you can purchase from resellers such as OpenSRS or HostPapa. I like the goMobi interface because it’s simple to use and you can build a mobile site within a few hours or less, depending on the amount of content you want to use. goMobi does have some limitations though. I’ve written about this in another article. With this information you can extend the goMobi interface with HTML, CSS and JavaScript.

10.  Testing: Testing is where you find out how well your site works and if there are mistakes which need to be fixed. One useful tool for testing is Screenfly. Bear in mind that this tool won’t cover all the devices available, but it’s a good starting point. It’s a good idea to ask your colleagues and friends to check out your site, as well.

Conclusion

As you can see, there are many different ways of building a responsive WordPress site. It’s also important to note that there’s no such thing as a design standard for these themes and programs. Each is different and you might have to experiment with one or more to find what works for you.

Resources

Building Responsive Themes

Build a Responsive WordPress Theme with Bootstrap

Mobile First



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •