When you’ve analyzed as many pages or different views as you’d like, you’ll start to see some interesting patterns emerge in the data. In the right-hand column, you’ll see examples of how each kind of typography we found has been used in a real context on your site. It is organized by color and then by size so you can easily see how you are using typography.
Contents contributed and discussions participated by Vernon Fowler
960 Grid System - 0 views
Bootstrap - 0 views
Extending HTML5 - Microformats | HTML5 Doctor - 0 views
-
"While HTML5 has a bunch of semantic elements, including new ones like and , sometimes there just isn't an element with the right meaning. What we want are ways to extend what we've got, to add extra semantics that are machine-readable - data that a browser, script, or robot can use."
Untangling Web Typography ◆ 24 ways - 0 views
-
-
The next thing you’ll want to take a look at is in the first column, called “Count”. We’ve counted how many times you’ve used each combination of typographical styles. This can be incredibly helpful when deciding which styles were intentional, versus one-off color pick errors or experiments that never got removed from the code base. If you’ve used one color blue 1,400 times, and another just 23, it’s pretty obvious which is more in line with broader site-wide styles.
Semantic code: What? Why? How? | Boagworld - Web & Digital Advice - 0 views
-
semantic code aids accessibility
-
Semantic code tends to improve your placement on search engines
-
semantic code is shorter and so downloads faster
- ...3 more annotations...
GoodUI - 0 views
What You May Not Know About the Z-Index Property - Tuts+ Web Design Article - 0 views
-
"The z-index property in CSS seems simple enough, but there's a lot to discover beneath the surface if you really want to understand how it works. In this tutorial we'll clarify the inner workings of z-index, by looking at stacking contexts and a few practical examples."
TYPOGRAPHY: Line length - 0 views
TYPOGRAPHY: Alignment - 0 views
-
Centered and right-justified text blocks are difficult to read.
-
We read from left to right, anchoring our tracking across the page at the vertical line of the left margin.
-
The ragged left margins produced by centering or right-justifying text make that scanning much harder, because your eye needs to search for the beginning of each new line.
- ...1 more annotation...
How and why to create a pattern library - 0 views
-
Once a website reaches a certain size and complexity (especially if a number of sub-sites are involved) the argument for a pattern library are overwhelming. These benefits are three fold:
-
In this era of web applications accessibility is often forgotten. That is why I always include accessibility considerations in my pattern libraries. There will always be a section in a pattern definition where I make notes that a pattern should be keyboard accessible or can be interpreted by a screen reader.
-
"Whether working for a large corporation like Nestle, a higher education institution like the University of Strathclyde or a big charity such as the Environmental Defence Fund, I increasingly find myself turning to pattern libraries as the solution to the particular problems faced by these bigger websites. But what is a pattern library, why do you need one and how do you go about creating them?"
Heading Tags (H1, H2, H3, P) in HTML | AccessAbility - 0 views
-
Some screen readers are able to jump from P to P but not BR to BR.
-
"Many tags in HTML were developed not to assist formatting but to provide information on the structural hierarchy of a document. In order to facilitate accessibility as well as standards, it is best to use the tags for the intended purpose in the information hierarchy rather than for pure formatting purposes. In many cases, this will make your document easier to edit as well."
Styleguide | Yelp - 0 views
Working With LESS and the Chrome DevTools - Tuts+ Code Tutorial - 0 views
Cached
-
While holding Command (Control on Windows), click any property, value or selector to jump to the line of code in the corresponding LESS source file within the Sources panel.
-
In a world without Source Maps, DevTools would display styles originating from the compiled CSS. Line numbering would not be useful due to a mismatch between compiled CSS and the source CSS. With Source Maps, when inspecting a DOM node on the page, DevTools will automatically show the styles originating from the LESS source file.
-
the Sources panel contains a live editor
- ...2 more annotations...
-
This is a complete tutorial to using LESS with Chrome's DevTools. If you've used Sass with Chrome's DevTools, you'll most likely already be familiar with the concepts introduced here.
-
This is a complete tutorial to using LESS with Chrome's DevTools. If you've used Sass with Chrome's DevTools, you'll most likely already be familiar with the concepts introduced here.
-
"This is a complete tutorial to using LESS with Chrome's DevTools. If you've used Sass with Chrome's DevTools, you'll most likely already be familiar with the concepts introduced here. "
SVG Files: From Illustrator to the Web - Tuts+ Design & Illustration Tutorial - 0 views
-
"Scalable Vector Graphics (SVG) is a vector image format which began life back in 1998. It was always developed with the web in mind, but only now has the web actually started to catch up. There's no denying its relevance today, so let's have a look at the basics of taking SVG from Illustrator to the web browser."
Tutorial: Scripting for Illustrator CS6 | Creative droplets - 0 views
Exporting SVG for the web with Adobe Illustrator CC | Adobe Inspire Magazine - 0 views
-
Notice the Use Artboards options in the Save As dialog box (see Figure 1). If you have designed 10 symbols in your Illustrator file, you can use this option to easily create one artboard per symbol and output 10 SVG files (one per symbol) in a single operation.
svg-edit - A complete vector graphics editor in the browser (in JavaScript) - Google Pr... - 0 views
-
"SVG-edit is an online vector graphics editor that uses only JavaScript, HTML5, CSS and SVG (i.e. no server-side functionality)."
An examination of home page design in New Zealand tertiary libraries | Lianza - 0 views
‹ Previous
21 - 40 of 79
Next ›
Last »
Showing 20▼ items per page
Vernon Fowler
Digital Library User Experience #UX Specialist - helping @deakinlibrary design inclusive digital services.