Responsive Design Templates

If you’re just getting started designing custom WordPress websites, you probably are wondering about responsive design templates to use in Photoshop. There are many responsive design templates out there if you do a Google search including free ones from a variety of sources. Here are a few things to consider as you ponder your selection.

Considerations for Responsive Design Templates

  • Do you need templates for each of the various devices or can your developer simply apply the framework responsive defaults and a common sense approach to achieve professional-looking responsive layouts from your full screen design? If your initial design is based upon a 1920 pixel wide PSD file that has a content “container” that is 12 equal columns wide, a savvy developer can apply the defaults from responsive frameworks like Bootstrap or Foundation and achieve your responsive layouts without specific responsive designs being created. This approach saves time and cost in the design and development phases of the project.
  • If your client wants to review and approve the responsive layouts for all of the various devices, what templates do you need to create? Based on the latest devices that are available and the data about market share of the various screen resolutions, the minimum templates you need to create are:
    • The most common resolution for laptop computer monitors is 1366px wide. In order to leave a little breathing room on either side of the main content area, we frequently see designers providing a 12-column layout with each column 100px wide for a total width of 1200px and 83px on either side of the main content area. We occasionally see designers also providing a version at 1920px wide with 12 columns that are each 150px wide for a total of 1800px and 60px on either side of the main content area. This version is intended for large screen, high resolution monitors.
    • Responsive design templates for an iPad or other tablet held “landscape” are typically based on 1024px width.
    • Responsive design templates for an iPad or other tablet held “portrait” are typically based on 768px width.
    • Responsive design templates for an iPhone or other mobile phone held “landscape” are typically based on 600px width.
    • Responsive design templates for an iPhone or other mobile phone held “portrait” are typically based on 300px or 320px width.

Share this article:

Table of contents: