Inspiring

Question

Good dimensions for a webpage layout?

Forum|Forum|7 years ago
April 13, 2018
5 replies
26096 views

I want to use InDesign to lay out some ideas for a website landing page. Then I'll hand it off - possibly as a PDF - to a developer who will actually do he work. I'm not doing any coding, I'm not even doing anything in HTML. I just want to use InDesign to make a "sketch" of my ideas.

Can someone give me a good suggestion for an appropriate, all-purpose page width? There will be a navigation column on one side...how wide should it be?

How to

This topic has been closed for replies.

M

MarieMeyerAuthor

Inspiring

Thanks all. I've been reading up on "break points" and I think I've got a better idea now.

rob day

Community Expert

Can someone give me a good suggestion for an appropriate, all-purpose page width?

Bob's right if sites are not responsive (mobile friendly) they get penalized by Google, so your developer shouldn't be building pages to any static pixel dimension. Changes in screen size usually are handled by CSS media queries. Why not ask the developer what they expect for your sketch?

Dave Creamer of IDEAS

Community Expert

I believe that the question was just for design concepts, not creating the actual website code.

>lay out some ideas

Usually, the various responsive sizes are linked to a static dimension (often in pixels), but the dimensions are modified by CSS queries as Rob mentioned. That I why I suggested creating 2-3 design concepts to present to the developer.

David Creamer: Community Expert (ACI and ACE 1995-2023)

rob day

Community Expert

Usually, the various responsive sizes are linked to a static dimension (often in pixels), but the dimensions are modified by CSS queries as Rob mentioned.

Just to clarify my last post, CSS media queries are trigger points they don't define static pixel dimensions, but are conditional i.e. if the screen size or browser space is less than 900 pixels then update all of the enclosed CSS styles. You could have a table or a div with a specific width and height defined in one of the styles, but you usually wouldn't want to do that because there are too many screen size variables to deal with.

As you suggest, Marie could show what she wants to have happen at some chosen break point widths, but it is futile to get too specific or target any device.

https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints/

Dave Creamer of IDEAS

Community Expert

First, I would use Illustrator or Photoshop. They can support CSS export and are more appropriate for web design.

For sizes, you will need two to three layout concepts. I would suggest the following approximate sizes...

Desktop: 1280 width Website Dimensions - The Resource for New Webdesigners.

Tablet: 1024 width (horizontal view)

Phones, look at: iPhone 6 Screen Size and Mobile Design Tips - Updated for iPhone 8 & X!

Website technically don't have a depth limit, but if you want your home page to fit on screen, try the following...

Desktop: 1024 height

Tablet: 720 height

Phone: use previous link

For the side navbar, it could change for each view. What you need to do if figure out the longest amount of text you would have in the nav links, then determine what size you want it to be in each view. For example, you might want it to be 240 px in the desktop view.

(Note: ems or percentage might be an better measurement option than pixels when actually producing the site, but the problems in questions don't support those measurements.)

David Creamer: Community Expert (ACI and ACE 1995-2023)

BobLevine

Community Expert

Everything is (or should be responsive). There is no real guideline.

Michael Riordan

Inspiring

When you make a new document in InDesign you can choose a web document profile and InDesign will offer up a number of web appropriate preset sizes for you.

mostly it depends on your target audience. Will visitors to your site be coming mostly on desktop machines, iPads, phones, older equipment or newer? The latest desktop Systems will allow your visitors to see wide screens older systems not so much. Adobe Muse though now at end of life is still a viable option for creating a working prototype. It defaults to a screen width of 960 pixels so maybe a 960 x800 page would be a good place to start, maybe.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded