Populr's theming engine is a powerful tool, but with great power comes great responsibility. It's not always easy to design for end users when you don't know what they plan to do with their content. We're posting this list to share some hard-learned lessons with our theme developers, hopefully saving time and effort.
Here's a quick checklist of the basics we require in every theme.
- Either 2 or 3 regions.
- At least 2 theme styles.
- Attractive layout on mobile devices.
- Compatibility across major browsers.
For more detailed design recommendations that will improve your theme, read on below.
- Themes must have either 2 or 3 regions. Two regions give users a minimum level of variety for their content and layout. Three regions is the maximum level of complexity we want to allow in a theme.
- Every region must be able to handle every asset type. For example, you can't build a region that only takes image assets.
- All editor menus should effect changes to the user's pop. When editing a pop, the following menus appear at the top of the pop: Logo, Background, Font, Theme, and Style. Every theme must allow the user to add a logo, change the background image, and change the font for asset titles and/or descriptions.
- Every theme should be built with at least 2 styles. One common way to meet this requirement is to build a light and dark version of your theme. We encourage you to add color variations to your theme as well. Take a look at the Styles section of our theming documentation to find out how to add a custom color picker to your theme.
- Themes must be mobile-friendly. Theme development isn't complete until a theme looks good on mobile devices. Read the mobilization section of our documentation page for details on how our mobilizing mixin works; this mixin must be included with every theme, and it'll save you a lot of time getting your theme ready for mobile.
- Themes must work in all major browsers. Published pops using your theme must look good in Chrome, Safari, Firefox, and IE back to version 7. It's OK if the theme doesn't look identical across all of these browsers, but where it fails, it must fail elegantly.
- Text should always be easy to read. This is especially important for text that is overlaid in front of a user-specified image (such as an image asset or a background). This can be challenging when you don't know what image a user will place behind the text. We recommend using a semi-transparent background for the text or possibly the text-shadow CSS attribute to ensure legibility.
- Dont force text to be bold, italic, or capitalized. We generally recommend that you do not use CSS to force formatting like italics or ALL CAPS upon title and description text. This formatting may look good when filling your theme with sample content, but it prevents users from changing their text styling with Populr's built-in text formatting features.
- Links should look like links. Whether they appear in body text, asset titles, or document assets, clickable objects should look clickable. We recommend adding hover and active states for all of your links.
- We encourage consistency in asset component layout for assets that appear in the same row. For example, it can look unattractive when an image asset with a title beneath the image appears in a row next to an embed asset with the title above the embed. Here are our recommendations for the asset content order at various sizes.
Text assets: Title, Body
Document assets: Title, Body, Documents array
Image and Embed assets, size 1 and 2: Title, Content, Description
Image and Embed assets, size 3: Content, Title, Description
- Pops usually look best when images and videos have a uniform size. As such, we usually recommend setting your image slider to the same proportions as YouTube videos, a commonly-used embed asset. YouTube videos are currently sized at 640x360 pixels, which is a 16:9 proportion ratio.