How to Design WordPress Websites with a Responsive Layout - dummies

How to Design WordPress Websites with a Responsive Layout

By Lisa Sabin-Wilson

A WordPress website that has a responsive layout takes the size of any viewing device into consideration. It doesn’t matter if it’s the largest television monitor or the smallest mobile phone or tablet device; the website layout is prepared to handle any size on any device. It’s called responsive because the layout responds to its environment — or with a website, the layout responds to the size of the viewing device.

The number of devices, platforms, and browser systems available for users to view websites grows every day, it seems. Most website owners want to make sure they’re paying attention to their mobile and tablet readers, as well as their traditional visitors on regular computers.

Having a responsive layout in place accomplishes this goal and is an important design aspect for your website, particularly if a majority of website visitors are using handheld devices such as smartphones or tablets.

Here, you see an example of responsive design in practice as it shows how this website looks on an iPhone 5.


Here, you see how it looks on an iPad tablet. Responsive layouts are accomplished with a mix of grids and layouts that are flexible enough to respond to any size viewing environment. As website visitors switch their viewing devices, or even flip their view from portrait to landscape, the layout automatically switches to accommodate the size — and this includes navigation menus, images, media, and content areas.


You can design a responsive layout a number of different ways, but most importantly, you want to make sure that you’re using efficient techniques and tools and doing the job the right way. The following list describes some great resources to start with for designing responsively — definitely check these out and consider them as potential starting points and tools to add to your web designer toolkit:

  • Smashing Magazine: “Responsive Web Design: What Is It and How to Use It,” an article on responsive design that covers concepts and techniques.

  • Bootstrap from Twitter: A front-end framework including HTML, CSS, and JavaScript that makes responsive web design faster and easier.

  • Responsinator: A handy web-based tool that allows you to test how your website looks on several different mobile devices, including smartphones and tablets.

  • Media Queries: A fantastic site that showcases responsive design techniques in practice today — a great place for inspiration.

If digging into responsive design practices is a little intimidating or something you’d like to put off for now, WordPress has a handful of plugins that will provide mobile layout for any website, regardless of whether it has a responsive layout in place.

Keep in mind that these plugins will provide you with a mobile/tablet view; however, it is not always as customized or visually appealing as you may want it to be. The only way you have full control over how your website looks on any device is by getting into the practice of responsive design. Here are a few plugins from WordPress that will provide a mobile view for your website:

  • JetPack: A plugin with several different modules, including a Mobile module that will give your website viewers the opportunity to browse your website on any mobile device or tablet.

  • WPTouch: A popular plugin that transforms your WordPress website for mobile devices

  • WordPress Mobile Pack: A toolkit that provides a mobile view for your website and includes different themes, widgets, and a mobile admin panel.