Ideal size document in photoshop to design a wordpress theme

Question

After some research on the net, I could not find information on the ideal size should my photoshop document to my theme adapts to any width screens.

Answer 1

You didn't find it because there's not one ideal size, since the width of your theme will vary. It will depend how flexible your theme will be, if it will also fit mobile screens, etc. So you should decide how big or small screens your website will be presented in (ideally desktops and mobile devices) and make a layout that can adapt to the different sizes.

Answer 2

Short answer - There is no ideal size

Up until a few years ago, when most sites were designed and built to a specific size you could design a website in Photoshop and hand that file over to a developer who would recreate the design exactly.

Pixel perfect designs don't make sense any more.

Screen sizes and resolutions are no longer a reliable variable to design for, there are thousands of screen sizes and different devices people use to browse the Internet, with mobile internet browsing fast catching up with desktop browsing and things like TVs and watches (and probably your fridge freezer soon enough) becoming internet ready.

You should do the majority of the designing in the browser.

This however means you need to know at least the basics of how to code a website. You don't need to be a master, but you should learn at least enough HTML & CSS to code the basic structure of a website.

Even if you will be handing over your designs to a developer to build the final website (or template or Wordpress theme or whatever else), handing over a working HTML mockup is infinitely better than a static Photoshop file. You can do a combination of both and create the basic structure in HTML & CSS but create more complete visuals in Photoshop.

Designing in Photoshop first is OK too

If you are going to design the website in Photoshop first and pass the designs on to a developer to code, there are a few things you need to keep in mind:

Your Photoshop designs are mockups or approximations of the final design - Your content and layout should reflow to the screen size and it is impossible to design for all screen sizes. You, your client and the developer - and whoever else the mockups are for - need to understand that.

You should design a number of screens to decide how the content and layout will reflow at different sizes. This will depend on you situation and the content and layout of the website. You could design a desktop layout, laptop or smaller desktop layout, tablet layout and a mobile layout - or a subsection of these - or more - it depends on what you need.

If you are designing for multiple screen sizes you need to have at least a basic understanding of how the layout will be structured in code as this will affect how things can change at different sizes. If you don't take this in to account when designing you could end up with some horribly coded workarounds and unnecessary work for you and the developer.

So, if you are designing in Photoshop:

Design for multiple screen sizes, be aware they are mockups, not pixel perfect designs and either learn to code or work very close with the developer.

Answer 3

From my personal view, any project what you do is individual, no matter it's Wordpress or anything behind it, but there are some recommended width/height size options from the point of 'best practices' I mean for example: you may heard about 960 grid system, etc.

Nowadays also bootstrap framework is very popular, just if you take some of information like this under consideration it may make some things easier, for developers.

But you know almost nothing is impossible today, no matter it's Wordpress or anything else, point is not to limit your creative vision..

Answer 4

On the web, size is fairly meaningless. How long is a page? How wide? Please read A Dao of Web Design. Embrace the flowing aspect of the web where size is determined by the user and their device(s) and you ultimately have no final say in how they'll see or view your design. CSS is just a suggested way for a browser to render your site (it can be turned off or overridden).

But back to your specific question: for website design comps I suggest using 1024x768 px (or larger), and I focus on designing the "look and feel". I specifically avoid designing for the "size" of elements. Design around ratios. "This header should be 2.4x larger than the main body text" and "this content area should take about 1/3rd of the browser viewport except at small phone sizes where it will be positioned below the main content area".

Again, focus on the look and feel (and ratios) and not the specific "size" of things.