Responsive layouts are increasingly a necessity in current web design. More and more people will access your site using devices with small screens, and really, screens of a wide variety of sizes and aspect ratios. A responsive layout is a layout that can accommodate all the possible devices: it is responsive to the size and aspect ratio of the user’s screen.
I’m going to briefly touch on the basics of this so that the more specific information that follows will make sense to people who are relatively new to this subject.
How Responsive Displays Work
Responsive layouts rely on the ability of HTML elements, properly styled with CSS, to rearrange themselves and change size on the page display. A good responsive layout is one that can rearrange and resize itself to look good and convey all it’s information on all the different screens. This means that the content is grouped into blocks (often called “containers”) that can stack next to each other in various ways. Groups of blocks will also be in containers that arrange the page on a larger scale. Within the blocks, the content flows into the shape and size of it’s container.
All of this is controlled by multiple CSS style sheets and inline rules, which are lists of targeted declarations that determine the layout and behavior of the blocks.
If this sounds complicated, it really is. And to make matters worse, there is no generally accepted way to achieve this on the web. While it’s good that there are so many options, for someone new to this, it can be hard to decide the best approach, let alone understand how any particular responsive layout works.
In WordPress, this is made a bit easer with the use of responsive themes. It’s only a little bit easier though, because each theme seems to have it’s own way of doing this: some require additional plugins or special child themes, some are built to be responsive natively. Many aren’t responsive at all, and so mobile users might be on a different theme entirely using some kind of theme switcher. Maybe the user doesn’t even get a responsive display, in which case the mobile browser just does it’s best to show the page.
Start with a Responsive Theme
If you want your mobile and handheld device users to have the best experience with your site, you must use a responsive theme or at least a responsive setup for your theme. If you’ve already got a theme and want it to be responsive, contact the theme vendor for instructions on the best way to achieve that with the theme. In some cases, you will just have to change your main theme.
Once you have your responsive theme in place, working and looking the way you want, you can focus on the displays that Participants Database produces.
Participants Database Support for Responsive Layouts
Participants Database has the capability to produce responsive displays, but they are best approached as basic frameworks, not as finished displays that can be set and used as-is. Each shortcode has a responsive template you can use as your starting point:
[pdb_list template=responsive] [pdb_list template=flexbox] [pdb_single template=bootstrap] [pdb_record template=bootstrap]
(My apologies if that is a bit confusing: the “list” shortcode does have a bootstrap template, but it uses a table, and tables are not generally considered responsive.)
Once you enable the responsive template, you’ll want to test it on different devices. Your WordPress theme will be doing most of the work: arranging the page content to fit the screen, changing the way the menu works, etc. Participants Database shortcodes will attempt to fit their output into the content box provided by the theme.
Making it Look Good
Much of the time, the display will work OK, but you may want to make some adjustments to the layout and appearance. This is mostly accomplished with CSS rules to override the existing rules that are formatting the content. Be warned, however, that CSS stylesheets for responsive layouts can be very complex. For example, rules that apply to one screen size, won’t apply to another because its possible to make a rule only active on particular screen sizes. Also, with space so tight, your options for making things look better are going to be very limited.
So: generally speaking, if you are not skilled with CSS, you may find only very limited success in modifying the layout on various devices. It may be best to just be satisfied with a useable display, not necessarily the exact layout you would prefer.
Working with CSS Styles
If you do want to make some changes, and aren’t sure how to proceed, I’ll offer some help. The first thing you’ll want to do is familiarize yourself with your Browser Developer Tools. I find I like Firefox best for this, it has a “responsive display” mode that lets you check various screen sizes easily. At the same time, you can check on the effect of your CSS changes so you know the exact changes you want to make before saving them.
I’ve written a series of articles that can give you some of the basic tools needed to start modifying the CSS and layout of your pages. If you’re new to CSS, I recommend reading it through, it will help you understand how to work with the CSS rules to get what you want…or close to it, anyway.
This is explained in the article above, but when it’s time to save your CSS rules, Participants Database has a “Custom CSS” setting you can use for this purpose. These CSS settings are only loaded on pages with Participants Database content, so if you need to make global changes to your site layout, it’s better to put your rules in a general custom CSS setting. Most themes (and the Jetpack plugin) provide a place to do this.
The Flexbox List Template
With PDB version 1.7.8, I added the “flexbox” template for the pdb_list shortcode. The flexbox layout offers quite a few options, and I think you’ll find it’s the most flexible template for responsive displays, adapting really well to desktops and mobile phones and everything in between.
There are some really easy-to-understand explanations of what is possible with flexbox layouts on CSS Tricks, I suggest giving it a read.