960 Grid System 10 Tips to Create a More Usable Web Whether it’s your portfolio, a blog, a marketing web site, or a collection of games, we all want to attract visitors to our website and to ensure that they have a pleasant experience. Usability measures the level of a user’s experience and can be characterized by how easily a given task can be completed; whether it’s done with prior knowledge, or by having the user learn a new way to interact. I think Jakob Nielson probably explained it best when he said: “Usability is a quality attribute that assesses how easy user interfaces are to use. The word “usability” also refers to methods for improving ease–of–use during the design process.” In this article I hope to give you some form of a usability checklist, covering topics from form design to simple navigation tips that you can apply to any Web project. 1. Letting the user know what section of the site they’re in, or what category they’re navigating through can be give a huge usability boost to any site. 2. 3. 4. 5. 6. 7. 8. 9. 10.
Less Framework 4 I called Less Framework "a CSS grid system for designing adaptive websites". It was basically a fixed-width grid that adapted to a couple of then popular screen widths by shedding some of its columns. It also had matching typographic presets to go with it, built with a modular scale based on the golden ratio. The resources it was originally published with are still available on GitHub. Contrary to how most CSS frameworks work, Less Framework simply provided a set of code comments and visual templates, instead of having predefined classes to control the layout with. This is how I still work today and definitely a method I advocate. /* Default Layout: 992px. Less Framework was popular in the early days of responsive design. Eventually, I moved on from fixed-width grid systems and worked on a fully fluid-width one, in the form of Golden Grid System. Less Framework's popularity was helped by the following contributions and the lovely people behind them (dead links crossed off):
CSS Grid Builder - ZURB Playground - ZURB.com CSS Code Product Design Training from the Experts at ZURB This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS. This is just a simple modal with the default styles, but any type of content can live in here. Your ZURB ID explained You’ll use your ZURB ID to log in to all of ZURB’s properties — University, Products and Foundation. University Product design resources, courses and training. Design Apps Prototype, iterate and collect feedback on your products. Foundation The most advanced front-end framework in the world.
Top 10 Programming Fonts Sunday, 17 May 2009 • Permalink Update: This post was written back in 2009, and much has changed since then. I’ve also written a few subsequent posts about alternative programming fonts, like this one about Anonymous Pro. I’m a typeface geek, and when it comes to selecting a font I’ll stare at all day, I tend to be pretty picky. What follows is a round-up of the top 10 readily-available monospace fonts. A note about anti-aliasing In the past, we’ve had to decide between tiny monospace fonts or jagged edges. If you have any doubt that anti-aliased fonts are apropos for code, note that even the venerable BBEdit — which for years has shipped with un-aliased Monaco 9 set as the default — has made the jump. Unless otherwise noted, I’ve used a larger size font, 15-point in fact, for the examples here to illustrate their legibility at larger sizes and with anti-aliasing turned on. 10. Figure 1 Courier New 9. Figure 2 Andale Mono 8. Figure 3 Monaco Figure 4 Monaco 9-point, without anti-aliasing 7. 6.
Golden Grid System GGS was my next step after Less Framework. Instead of a fixed-width grid, it used a fully fluid-width one, without even a maximum width. The resources it was published with are still available on GitHub. The idea was to take a 18-column grid, use the outermost columns as margins, and use the remaining 16 to lay elements out. On smaller screens the 16 columns could be folded into 8, 4 and 2. While the grid's columns were fluid — proportional to the screen's width — the gutters (spaces between the columns) were proportional to the font-size being used. GGS also contained a set of typographic presets, strictly to a baseline grid. Correctly setting all of these measurements is difficult, of course. When published, GGS gained a lot of attention, as the web design community was searching ways to work with fluid-width grids, which have always been troublesome, running counter to many graphic design principles. Later on I developed Frameless, the last entry in my early CSS grid system saga.
Fight Div-itis and Class-itis With the 960 Grid System Years ago, HTML tables were the standard for laying out web pages. CSS and semantic thinking changed that, and today CSS frameworks make designing relatively easy. But they can also generate a surprising number of superfluous elements. The 960 Grid System encourages the addition of <div> elements and class attributes, especially on complicated pages. Is this really an improvement over nested tables? Creating cleaner code means going beyond the framework and thinking about what it really represents. CSS frameworks provide a workflow solution, namely a rapid deployment of grid-based web layouts. Before CSS saw widespread use, tables provided all the layout a web designer needed. As designers learned to use CSS, div elements replaced tables. The Spread of Class-itis and Div-itis Clear, lean code offers many advantages. Other than the semantics, the great advantage of using <div>…</div> over <table><tr><td>…</td></tr></table> is that we end up with less code to do the same job. Solutions
Coding Clean and Semantic Templates If you are the guy who uses <div> tag for everything, this post is for you. It focuses on how you can write clean HTML code by using semantic markups and minimize the use of <div> tag. Have you ever edited someone's templates, don't those messy tags drive you crazy? 1. I've seen a lot of people wrap a <div> tag around the <form> or <ul> menu list. Example 1: The example below shows how you can drop the <div> tag and declare the styling to the form selector. Example 2: Sometimes we wrap the content with an extra <div> tag strictly for spacing purposes. 2. You should always use semantic markups to code HTML documents (ie. Example: The image below compares the rendering differences between <div> markups and semantic markups with no css supported. 3. Have you seen the messy templates where <div> tags are everywhere and they drive you crazy? Instead of using <div> tag for breadcrumb navigation, it makes more sense to use <p> tag. 4. 5. When coding for platform templates (ie. Conclusion
Grid Designer 2 If you're familiar with the grid, a bit of design and basic typography, using this script should be pretty easy - most of the functions are pretty self-explanatory. If you're unfamiliar with grids in general, you could start by reading an excellent series of articles by web designer Mark Boulton. For those who want a real understanding of the theory of grids in relation to design and typography, I strongly recommend this book. On the Columns tab, you can start your design in two ways: Fill in the number of columns, total width, gutters and margin widths, all specified in pixels - then press the design button. The grid preview on the Columns tab will display the widths of each area, in pixels. Use the Typography tab to adjust and calculate basic typographic settings for your design. Finally, on the Export tab, you can generate copy-and-paste ready CSS, and a sample XHTML template.
HTML Entity Character Lookup › Left Logic Created by Left Logic Using HTML entities is the right way to ensure all the characters on your page are validated. However, often finding the right entity code requires scanning through 250 rows of characters. This lookup allows you to quickly find the entity based on how it looks, e.g. like an < or the letter c. Features Search for entity characters based on how they look (taken from the W3C list of entities) Switch between standard and compressed views Copy the HTML entity to the clipboard Add your own keyword terms and characters to entities Settings stored in a browser cookie Available as a Firefox plugin - thanks to Yining To reset the keywords, clear your cookies for this page and the default keyword dictionary. How it works The lookup searches the html entities for matches to the searched character based on how your character looks. There's no clever logic behind this, only the most powerful computer known to man - man's own brain.