Member Avatar for kipl20

Hi,

I would like to design my website in photoshop but am struggling firstly with what resolution to use? i have read articles etc that say 800x600 is dead and i should use at least 1024x768.

my next question is how would i start such a layout as obviously i need to take the resolution in abit to take in account the browsers navigation etc but how much should i leave on a 1024x768?

thanks

  • 4 Contributors
  • 3 Replies
  • 217 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by Arianna

Dani AI

Generated

Design advice for and followups from , and : avoid picking a single fixed "resolution" as the primary goal. Treat the design as content-first and responsive. Establish the content that must be visible and the layout structure, then create Photoshop artboards that represent common breakpoints (mobile, tablet, desktop). Use a column grid (12 columns works well) so the same design system adapts to different widths instead of relying on one fixed pixel canvas.

Practical Photoshop workflow: use artboards or layer comps for each breakpoint, keep type as live text, build with vector shapes for icons, and name/export layers for easy asset extraction. Prepare assets at 1x and 2x (retina) or export SVGs for UI icons. Reserve a visible "safe area" inside each artboard (padding on left/right) to account for browser chrome and scrollbars rather than filling the exact viewport edge. That preserves important UI from being obscured on different browsers and platforms.

A minimal CSS pattern to mirror a centered, responsive wrapper (convert this from the PSD layout into percent/grid in the site build):

/* centered container */
.wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* simple breakpoint tweak */
@media (max-width: 768px) {
  .wrapper { padding: 0 12px; }
}

Testing and priorities: treat the "fold" as fluid (Arianna's point) but keep primary calls to action high. Test designs in browser dev tools at several viewport widths, check zoom levels and real devices, and verify typography scales with rem/em units. Combine 's percent/em approach with modern CSS (flexbox or grid) to translate the Photoshop layout into a flexible site.

Recommended Answers

All 3 Replies

Member Avatar for almostbob

the current W3C reccommendations are device resolution independent, Ems %age dimensions adjust to all screen sizes and user preferences
Web editors that can layout in % are freely available
Web editors that cant, can be converted
example if you design for 800*600
width=80px becomes width=10%

Member Avatar for zukilover

thanks almostbob, and kipl20 remember when u're starting to design your website at 1024x768 resolution, there's always a space for the scrollbar on your browser, thus u have to contract the width to 1000 px.

Member Avatar for Arianna

Usually, you can make it up to 1024 by 768. It's nice to have the important stuff above the 'fold', though. That's where you have to scroll further, and estimating it at about 700-800 would be a good idea.

Of course, there are some nice sites which use fixed-width layouts. You can put everything in a 'wrapper' div and then use margin:auto to center it. That works well if it's not so much text, but images and snippets of text/widgets/blank space and the like.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.