What is a Responsive Theme?

Many people confuse “responsive design” with “mobile design,” but mobile design targets mobile devices specifically, whereas responsive design includes support for mobile devices and many more.

We use responsive design to create a consistent user experience for browsers of all shapes and sizes because the digital world doesn’t run on just 4:3 resolutions anymore. We adapt content to viewports of different sizes, including everything from mobile phone browsers all the way up to large television screens.

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 Patterns.”

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.