Hi Guys,
Ive been asked to produce a webite mockup using photoshop, but i am unsure as to what size to use for my canvas. I know the majority of people use 2014x768px, but Im not sure what size this should be?
I’ve uploaded a test image to my server which was 980px in size but it didnt fill the browser’s width. How do I achieve no horizontal scroller, only a vertical scroller?
Many Thanks
Tonz
Two problems there.
One is the concept of the ‘width’ of a website. The other is the word ‘Photoshop’.
The ideal width for a website is the width of my window or a comfortable line length, whichever is smaller. Yes, most people have screens that are at least 1024px wide, but not everyone does. And of the people that do, not everyone has a maximised browser window; a fair number of people have sidebars permanently open, which eats into that space. Most mobile phones - even pretty good smart phones - work best with websites up to about 960px, any more than that and they have to be zoomed out so much to fit on the screen that they become too small to be any use.
It isn’t realistically possible to design a website that scales to any width, because there comes a point where you can’t make it any narrower without something breaking, but you should always try to design your site to fit on a screen 800px wide, with a maximised browser window and no sidebar (so probably aim for about 775px). That way your site will be fine for almost everybody, and will only generate a horizontal scrollbar for a tiny number of people.
It’s fine to have a site that is flexible - it fits on a viewport 775px wide if that’s what’s available, but stretches wider if it can. If you’re going down that route, it’s a good idea to put a max-width on it, to stop it stretching forever on really large screens, because if the lines get too long, they become more difficult to read comfortably (you can no longer easily just flick your eyes backwards and forwards).
And that brings us to the dreaded Photoshop. It’s fine to come up with your design and then show an example rendering of it in Photoshop, at a particular window size. Build first, then use Photoshop to capture it. That way, you create a flexible design that works at whatever range of widths you want. If you design it in Photoshop and then try to recreate a flat, static image in a dynamic and varied environment like everyone’s web browsers then you’re often going to struggle to get that flexibility, because you end up aiming for pixel precision that matches the mockup.
Photoshop creates a picture of a Web site. I’d want a functional (to an extent) mockup that employs real code if I were the client. Same as if I went to buy a car and the salesman started showing me pictures. All well and good as far as that goes, but I need to see the actual car before I even start thinking about a purchasing decision.
Beautiful explanation. I will like add - also consider is you are making a full width or liquid layout that will take the whole width of the browser then also you can design at 980px. We normally use to leave 20px for browser vertical scrollbar and design for the rest. So for the most popular screen resolution of 1024X768px 980 is a safe width to avoid horizontal scrolls.
Stevie hit it on the head – for me, starting out drawing some goofy picture is putting the cart before the horse; I often used the client wanting some picture with no idea what’s going into it for CONTENT as a way to wean out the people who have no business having a website from the people who “get it”. The blank stare when they start talking looks and you ask “but what do you want ON IT” is always a great way to tell if it’s a project that you’re better off just walking away from. I firmly believe that until you know what’s going on the page for CONTENT, you have NO BUSINESS making a layout for it.
But my development process has ALWAYS been to write semantic markup first, bend that markup to my will to make the layout in CSS, and then at the very very very end start up the goof assed paint program like photoshop (I use Paint Shop Pro actually) to make the graphics to be hung on the layout. If the client actually wants a mockup it’s often better for me to code it and send them a screen-cap of the coded site, than it is to sit there screwing around in photoshop making a pretty picture that might not even be a viable layout from an accessibility or coding perspective.
After all, with the broken fixed height backgrounds so many PSD jockeys use, the whine “but I can do it in photoshop” wears pretty thin after a while. Much less the endless “It’s very pretty, but what good is it” garbage most of your “photoshop first” people vomit up.
Again, CONTENT FIRST. People visit websites for the content, so semantically marking up the content and making sure it’s accessible should take precedence over the goof assed graphics you hang around it. Bitter pill for the “artsy” types to swallow, but it’s the truth. 99% of the time you have some … art {slur omitted so as not to offend Wanda Sykes} running their mouth about “visual consistency” or “engaging user experience” – they’re usually just using their art skills to polish a turd…