Been Googling a while, building my first site, just now putting together a header in photoshop … all sorts of info about header graphic sizes … is there a size that will be good for a regular laptops and tablets?
Thanks
TL;DR: Upload as high a resolution as possible so it looks good on 2k and 4k screens and then use a “responsive” framework to resize it for your visitors.
The most common monitor pixel widths are 1366 and then 1024, and most smartphones can handle that in a horizontal (landscape) orientation too. So if you use 1000 as an easy to remember width, that should be a good all-around compromise. Stats: New US regulations. Will online casinos be properly reviewed now? - codeitdown.com.
However, if you can invest some time to learn “responsive web design” – design that scales to arbitrary viewing sizes – and upload a super high res version to begin with that scales down, both your high-res and low-res viewers will thank you for it. It is easier to build on top of an existing responsive framework, such as a modern Wordpress theme or Squarespace.com. Upload a high-res banner using those frameworks and they’ll automatically resize it for your visitors down to spec.
Squarespace makes it very easy to build a first website of your own, and they typically function much better than hacked-together HTML built by someone new to it. (Not to discourage you from learning web editing, just that frameworks/content manage systems make it much easier for both developer and end-user).
Concur. It is very helpful to download a browser resizer (Firesizer, for FF) to force the window to various sizes and see how it will be reflowed.
Dynamic and responsive frameworks are great, but they’re either kiddie toys like most builders, and pretty limiting if you are really trying to learn modern web coding and development, or pretty advanced stuff. Working with good choices of fixed standards is more productive and leads to the more complex approaches as you need to solve specific problems, IMVHO.
Thans to both of you. I will probably come back to this after another week of Photoshop tutorials and having fired up Dreamweaver (and it’s web page templates) …
If you’re at the novice level with Photoshop, Dreamweaver, etc. you have a lot to learn. On the other hand, you get to skip over more than a decade of fumbling solutions, patches, fixes, dead-ends and failed approaches.
I will bring up one thing that hasn’t changed: learn the fundamentals. The fundamentals of graphics design (from a technical standpoint), page layout, coding etc. haven’t really changed in a long time and are nowhere near being obsolete knowledge. We’ve gone through several standards revision and HTML5/CSS3 is, in many ways, much easier to use than older standards. As good as all the visual and builder tools have gotten, nothing replaces a good understanding of code-level design - nothing.
As you’re learning the high-level, drag-and-drop, component-based tools, work your way through a basic tutorial like those at W3C. When something breaks at the visual level, being able to pop the hood and fix some simple bit of broken code - or tweak it in a way the builder doesn’t let you - can be priceless and save hours of slow mucking around.