10 Tips for Creating a Responsive WordPress Site
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.
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.
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.
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.
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.