Good dimensions for a webpage layout?

Engaged ,
Apr 13, 2018 Apr 13, 2018

Copy link to clipboard

Copied

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?

TOPICS
How to

Views

19.1K

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Apr 13, 2018 Apr 13, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 13, 2018 Apr 13, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 13, 2018 Apr 13, 2018

Copy link to clipboard

Copied

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
Adobe Certified Instructor, Adobe Certified Professional, and Adobe Certified Expert (since 1995)

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 13, 2018 Apr 13, 2018

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 14, 2018 Apr 14, 2018

Copy link to clipboard

Copied

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
Adobe Certified Instructor, Adobe Certified Professional, and Adobe Certified Expert (since 1995)

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 14, 2018 Apr 14, 2018

Copy link to clipboard

Copied

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-breakpoi...

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 14, 2018 Apr 14, 2018

Copy link to clipboard

Copied

You are right, Rob. I would have said "..responsive sizes are linked to a static dimension ranges (often in pixels),...".

David Creamer
Adobe Certified Instructor, Adobe Certified Professional, and Adobe Certified Expert (since 1995)

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 14, 2018 Apr 14, 2018

Copy link to clipboard

Copied

LATEST

FWIW, when I’m hired to create a site, we discuss features, content and general look and feel. I usually ask for a few sites that the client likes.

Mock-ups? Honestly, not a great idea. Let the pro do what the pro does.

Just my $0.02

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Apr 14, 2018 Apr 14, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines