StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><strong>Fonts and Text</strong></p> <ul> <li>You are limited to a small subset of fonts</li> <li>Fonts are viewed at different sizes</li> <li>There is a readability limit for how wide paragraphs should stretch (in a fluid layout)</li> <li>Write for readers of all types - Some will skim, others will read in detail</li> </ul> <p><strong>Images</strong></p> <ul> <li>Sites are viewed at different resolutions and screen sizes - Design accordingly</li> <li>To achieve transparent backgrounds in IE6, use PNG8 with alpha (IE6 doesn't support varying levels of transparency, it's either 100% transparent or it's opaque)</li> <li>Use CSS sprites</li> <li>Images should not be used in place most of text</li> <li>The img tag should be used for images with semantic value and all layout images should be CSS images</li> <li>Every img tag needs to have the alt attribute to validate</li> </ul> <p><strong>(X)HTML and CSS</strong></p> <ul> <li>Browser rendering varies greatly</li> <li>Validate CSS and (X)HTML for a greater probability that the design will be cross-browser friendly</li> <li>Don't use CSS hacks</li> <li>Use the proper semantic markup</li> <li>Pages should be able to work without JavaScript enabled</li> <li>Read Yahoo's <a href="http://developer.yahoo.com/performance/" rel="nofollow noreferrer">guide for performance</a> and use <a href="http://developer.yahoo.com/yslow/" rel="nofollow noreferrer">YSlow</a></li> <li>Dreamweaver's design mode doesn't reflect how a page will appear in real browsers</li> </ul> <p><strong>General Design</strong></p> <ul> <li>Simpler is often better in terms of usability, accessibility, design, and download size</li> <li>Lists of greater than five or six items should be broken up visually</li> <li>Consistency is important - Don't change your navigation, etc without an extremely good reason</li> <li>When choosing colors, keep those with color-blindness in mind. This will affect how you choose to convey meaning by color.</li> <li>Place the most important information above the fold (the part of the screen that shows without scrolling)</li> <li>The web is interactive. This drastically affects how you consume and display information. You can hide and subsequently display information using tabs, accordion, and similar methods.</li> <li>Think in terms of primary and secondary calls of action. What do you want the user to do? Where do you want them to go next?</li> </ul>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload