Customizing Responsive Layouts in ElegantThemes

ElegantThemes has an excellent selection of responsive layouts for WordPress. Responsive layouts are designed to adjust design slightly based on the width of the screen available. The great thing about responsive layouts is that you know that every user no matter the device is seeing the same information, but it also allows users to experience the optimal view of your content based upon the view screen on their device. Responsive themes have some design limitations, but because they rely solely on CSS to accomplish a cross platform solution they are the ideal solution for a modern web site that needs to be accessible on mobile devices.

When customizing an ElegantThemes responsive theme it is helpful to have a basic understanding of how responsive themes work. A basic responsive theme simply responds directly to the width of the browser screen. So by setting widths to percentages you can have things automatically scale down to the exact size of the window. ElegantThemes utilizes a fancy method of this that utlizes CSS3 @media type rules to determine which CSS rules should apply at which size windows. That way you can determine that some items may float into columns for wider screens and for smaller screens have the element be centered on the screen at a set size for that width. This way content doesn’t just scale down at every variation, but in only in increments based on devices that might access the site.

The increments are Full Screen (960px), Tablet (748px), Horizontal Mobile (460px), and Vertical Mobile (300px).

For each increment there is a media rule in the css that looks something like this.

@media only screen and ( min-width: —- ) and ( max-width: —- ) {

// style rules

}

So outside of the standard CSS adjustments you would make to customize your theme you also need to consider how your customizations will look under the different screen sizes and place those style rules in the appropriate @media area.

For the themes that were originally designed to be responsive the @media conditional rules are in the primary style.css file, but many of the older themes are being reverse engineered to be responsive, and for those themes the CSS rules for the @media screen sizes is linked to from inside the css directory in the theme in a file called responsive.css.

The options for how to handle the differences between screen sizes are fairly limitless, but here are some tips for handling the different layouts.

1. Never hide good content for mobile users. Seeing as how you can’t disable a responsive layout, you are making it impossible for users to access the content if you hide it from the mobile view, so this should only be used to hide unnecessary elements like design elements or perhaps posts or teaser content that is accessible from other locations in the navigation.
2. Mobile content works best in one single column of scrolling content. Mobile users are looking to find content fast and the fastest way to do that is to scroll.
3. Less is more on a mobile view. The mobile view should be concise and to the point.

Please note that using this method, even if you hide an element or image from the mobile view doesn’t mean that the user isn’t having to download those graphics and content.  So if you ad a lot of images to the web view of the site then you are still loading a lot of unnecessary junk to the mobile user that they must download even if they don’t see it. For more complex web layouts you may want to use a mobile view plugin to separate the two views completely.