Content Max Width when designing?

I am about to design a new webpage in Adobe XD but have some questions that I really would appreciate if someone could help me with:

1. What max-width for the content is used nowdays for desktops? 1366px? 1200px?

2. I will use a 12 grid system for desktops. What gutter width do you recommend? 2%?

Thanks a lot!

 

You're asking the wrong questions. You should concern yourself with how wide should columns of text be for ease and comfort of reading. A common rule of thumb is to keep columns less than ~65 characters wide. If you use a proportional font (almost always in Western languages), that's about 32ems. A minimum width might come in at 30 characters, or 15ems. You do not look at px metrics except for some fixed size items. Tables will make demands of their own.

As for grid systems, they are left over from print design, a fixed layout method. Web pages are sized dynamically. Make your columns to fit the content, then using the visitors' default font size will determine page columns and responsive break points.

Search @deathshadow's posts and links to his essays on the subject.

gary

 

Mistake #1, Adobe doesn't make web design tools. As a dearly departed friend (and member of these forums) used to say, the only thing about Adobe products that can be considered professional grade tools are the people promoting their use.

Photoshop, Illustrator, etc are NOT design tools. They're paint programs. Design is NOT art unto and of itself. ACTUAL design is engineering that incorporates art, relying on dozens of things under the hood that is more important than how things look -- because HTML itself is for MORE than just visual layouts. HTML is for the visually impaired using screen readers (software that reads the page aloud) or braille readers, print, TTY, teletype, there are dozens of user-agent types that will give a flying purple fish about your screen media layout. As the joke goes, search engines don't have eyeballs.

That is why HTML and CSS should be kept in separate files, and 99% of the time you see style="" and 100% of the time you see <style> it's being done all wrong. It's why classes like "text-center box-shadow col-4-m col-6-l" is ignorant, incompetent, inept, half-witted trash created by people not qualified to write a single blasted line of HTML undoing some twenty-plus years of progress!

Design is engineering that incorporates art as the final step, based on specifications (HTML, CSS), limitations of the medium(s) (bandwidth, semantics, graceful degradation), accessibility guidelines (WCAG), all of which should be completed before you even THINK about layout for screen media!

Thinking in pixels is as Gary suggested equally flawed (though his math for EM to characters is backwards, for a arial-spaced kerned font it's 0.4em per character average since EM on-page ends up not being what EM is supposed to mean!) You should be working in EM not PX, so that your font sizes, widths, paddings, and so forth dynamically scale to the user's default OS or browser size preference. That way you aren't sending users diving for the zoom, or outright telling those with accessibility needs to piss off.

Equally flawed is the half-assed notion of pre-concieved "grids", one of the most dumbass concepts in "design" that basically forces content to be designed to the layout instead of building a layout that adjusts itself to the content. It is as utterly back-assward an approach to creating layouts as dicking around in a goofy paint program is; and whoever it was that started said asshat practice needs a good swift kick in the junk.

ACTUAL web designs should be graceful degrading, semi-fluid (max-width in EM), elastic (damned near everything in EM) and responsive. You're not going to get that dicking around pushing pixels in a paint program or some dipshit WYSIWYG.

Hence the technique for site building I advocate is called "progressive enhancement with separation of presentation from content".

1) Start out with your content or a reasonable facsimile of future content -- ALL OF IT -- in a flat text editor and arrange it as if HTML and CSS don't even exist!. Don't worry about formatting it, just type in your content with headings as if you were writing a flat professional document for text-only printing, with the alt-text for any content images representing said images.

2) Markup that content semantically, saying what things ARE (paragraphs, short lists of bullet points) and enhancing the logical document structure with numbered headings and horizontal rules.

Remember unless you use HTML 5's Idiotic dumbass pointlessly redundant) structural tags, your H1 is THE heading (singular) on your SITE (singular) that everything on every page is a subsection of. Same as how the title of a newspaper or book is at the top of every page or fold-pair. An H2 or HR indicates the start of major content subsections
with the first H2 indicating the start of your main content area. H3 mean the start of a subsection of the H2 precding it. H4 means the start of a subsection of the H3 preceding it, care to guess what H5 and H6 mean? They have structural meanings which is why going "up" in number you don't skip around willy-nilly, why pairing a H1+H2 for title and tagline is ignorant bull, and they sure as hell don't mean "fonts in different weights and sizes" nor does HR mean "draw a line across the screen". Those are simply their default appearance for screen media, which is again NOT what HTML is even for in the first damned place.

As this is the semantics stage, you likely shouldn't be adding DIV or SPAN since they are semantically neutral existing just as hooks for saying "this might receive style" without saying what that style actually is. It also means no classes or ID's yet.

Basically on this step, if you choose any of your HTML tags based on what they look like instead of what they mean grammatically, structurally, and semantically, you're doing it ALL WRONG.

3) Using an external stylesheet bend the markup to your will to create the first (of many) screen media layouts. This means the <link> should at LEAST have media="screen" on it since your screen layout means dick to print, aural/speech, tty, etc, etc. This is why if you see a <link rel="stylesheet"> that lacks a media="" attribute, or sets media="all" what you are likely -- as I say a lot -- looking at developer ignorance, incompetence, and/or ineptitude!

The first layout for screen I suggest creating is the legacy desktop. A LOT of people will say "mobile first" and IMHO that too is utterly back-assward. Any mobile devices we care about supporting can be targeted and customized with media queries, whilst legacy desktop cannot... so why the blue blazes would you start wtih what you can customize, since then how does one even target non-media query capable devices? Makes no sense.

At this point you can also add any presentational images in the CSS, since images that are part of the template have ZERO business in your HTML as content. Thankfully the need for such images has dwindled as CSS has taken over.

3) Once that legacy screen layout is defined, narrow the screen width until the layout breaks. Figure out how many EM that is, and write your media queries to adjust the layout stripping off columns, adjusting paddings, and so forth. That's your breakpoint.

4) Lather, rinse, repeat step 3 until you're down as small as you think you'd need to support. Whist there are 192px wide devices, they have really disappeared from the mainstream so I treat a 256px display size (16em if you're on standard metric font-size) as the minimum I bother supporting. On my workstation since I'm set to 8514 / Windows Large / Windows 7+ medium / 125% / 120dpi / 20px / pick a huffing name already, for me the minimum size is 320px, since 1em system size for that machine == 20px. My Media center / TV runs 24px / 150%, so that's 384px as the smallest size.

5) Then and only then once you have a fully working responsive page, do you have any business even thinking about enhancing it further with JavaScript. If you needed JavaScript before this point, you screwed up. If the layout or even basic page functionality doesn't gracefully degrade when JavaScript is blocked, unavailable, etc, you've done it all wrong.

THAT is web design. Dicking around in a paint program pushing pixels around is not. Wasting time in some dipshit WYSIWYG like Dreamweaver isn't design either. It's artsy-fartsy BS that universally results in websites that tell large swaths of potential users to go plow themselves.

... and telling users to sod off is the exact opposite of design. I've never seen a website that started life as a PSD or other image format slopped together with Adobe tools that wasn't an accessibility nightmare flipping the bird at visitors, being little more akin to Patton's opinion of fixed fortification; a monument to the stupidity of mankind.