Skip to main content

Home/ Tools for web developers/ Group items tagged design

Rss Feed Group items tagged

Filter: All | Bookmarks | Topics Simple Middle
Vernon Fowler

The Ultimate Guide to Golden Ratio Typography - 0 views

www.pearsonified.com/...golden-ratio-typography.php

typography design golden ratio webdesign fonts typefaces webfonts font web tools

shared by Vernon Fowler on 12 Oct 12 - No Cached
  • The mathematical proportions of your typography are vitally important to how readers perceive both your site and your content.
  • Font size and line height are proportionally related.
  • For any font size, the line height must increase as the line width increases.
  • ...1 more annotation...
  • For a font size of 16px, the perfect line height is achieved when h equals the golden ratio. This yields a value of 25.88854px for the optimal line height. Using this value, you can then determine that the associated optimal line width is 670.21670px.
Vernon Fowler

Microdata - Dive Into HTML5 - 0 views

diveintohtml5.info/extensibility.html

HTML5 microdata schema structure metadata content data model

shared by Vernon Fowler on 20 Jan 13 - No Cached
  • a third option developed using lessons learned from microformats and RDFa, and designed to be integrated into HTML5 itself: microdata.
  • “Adding microdata” to your page is a matter of adding a few attributes to the HTML elements you already have.
  • So where is the real information? It’s in the <dd> element, so that’s where we need to put the itemprop attribute. Which property is it? It’s the name property. Where is the property value? It’s the text within the <dd> element. Does that need to be marked up? the HTML5 microdata data model says no, <dd> elements have no special processing, so the property value is just the text within the element.
  • ...7 more annotations...
  • This technique is also useful for microdata. There are two distinct pieces of information here: a title and an affiliation. If you wrap each piece in a dummy <span> element, you can declare that each <span> is a separate microdata property.
  • There are two major classes of applications that consume HTML, and by extension, HTML5 microdata: Web browsers Search engines
  • a handy tool to see how Google “sees” your microdata properties
  • Google supports microdata as part of their Rich Snippets program.
  • Just like associating a URL with a Person, you can associate a URL with an Organization. This could be the company’s home page, a contact page, product page, or anything else. If it’s a URL about, from, or belonging to the Organization, mark it up with an itemprop="url" attribute.
  • To handle edge cases like this, HTML5 provides a way to annotate invisible data. This technique should only be used as a last resort. If there is a way to display or render the data you care about, you should do so. Invisible data that only machines can read tends to “go stale” quickly. That is, someone will come along later and update the visible text but forget to update the invisible data. This happens more often than you think, and it will happen to you too.
  • itemscope says that this element is the enclosing element for a microdata item with its own vocabulary (given in the itemtype attribute). All the properties within this element are properties of http://data-vocabulary.org/Geo, not the surrounding http://data-vocabulary.org/Organization.
Vernon Fowler

Sea Quail SQL Writing Library - Home - 0 views

seaquail.codeplex.com

LIM225 sql database diagram tool chrome HTML5 generator schema design mysql data

shared by Vernon Fowler on 24 Mar 13 - No Cached
  • Vernon Fowler on 24 Mar 13
     
    Check out the database diagram tool written for Chrome and the HTML 5 canvas. It generates scripts for a database schema based on the diagrams you set up. It's only a proof of concept, but it's fun to play with. http://diagrams.seaquail.net/
Vernon Fowler

CSS Lint - 0 views

csslint.net

css tool optimization lint tools webdesign performance syntax design

shared by Vernon Fowler on 01 Jun 13 - No Cached
  • Vernon Fowler on 01 Jun 13
     
    CSS Lint points out problems with your CSS code. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency. The [rules] are all pluggable, so you can easily write your own or omit ones you don't want.
Vernon Fowler

Golden Grid System - 0 views

goldengridsystem.com

grid css webdesign responsive framework web design tools

shared by Vernon Fowler on 11 Oct 12 - No Cached
  • Responsive grids that use gutters proportional to the screen can make the content feel like it's being squeezed together or pulled apart as the screen width changes.
  • With elastic gutters this just doesn't happen, as the gutters always stay in proportion to the content.
  • If you specify all your font-sizes, line-heights, as well as vertical paddings, margins and borders in ems, they'll all scale in proportion as the font-size is changed using media queries, always keeping the baseline grid intact (save for a 1px rounding error or two), which lets the layout keep the same vertical rhythm regardless of screen size.
  • ...1 more annotation...
  • GGS comes with a set of type presets aligned to a baseline grid, which is based on a base line-height of 1.5.
Vernon Fowler

Colour Contrast Check - snook.ca - 0 views

snook.ca/...colour.html

NED12 color contrast accessibility usability webdesign colour design tools

shared by Vernon Fowler on 30 Sep 12 - Cached
  • Vernon Fowler on 30 Sep 12
     
    "specify a foreground and a background colour and determine if they provide enough of a contrast"
Vernon Fowler

Clue - A fun and easy way to test what people remember on your website. - 0 views

clueapp.com/about

Redesign test website design webdesign graphics graphic first impression

shared by Vernon Fowler on 12 Oct 12 - No Cached
  • Knowing people's first impressions can really help you understand what people are walking away with when they leave your site.
Vernon Fowler

Daring Fireball: How to Create Retina-Caliber Favicons - 0 views

daringfireball.net/...retina_favicons

retina Icons tools tool design webdesign

shared by Vernon Fowler on 07 Oct 13 - No Cached
  • I found no other tool that suited my needs.
    • Vernon Fowler
      Vernon Fowler on 07 Oct 13
       
      IcoFX may be an alternative.
    • Vernon Fowler
      Vernon Fowler on 07 Oct 13
  • iConvertIcons doesn’t do multi-resource ICOs. Neither does Image2Icon.
  • Old (non-retina) favicons are 16 × 16 px; a retina favicon is thus 32 × 32 px.
  • ...1 more annotation...
  • X-Icon Editor is a free web app recommended by Thomas Fuchs in his otherwise excellent Retinafy Your Website flowchart, but the problem I found with it (other than the inherent clunkiness of a web app in general) is that it did awful things to colors
mesbah095

Guest Post Online - 0 views

guestpostonline.com

tools webdesign tool webdev css javascript web design development testing

shared by mesbah095 on 03 Apr 14 - No Cached
  • mesbah095 on 03 Apr 14
     
    Article Writing & Guestpost You Can Join this Site for Your Article & guest post, Just Easy way to join this site & total free Article site. This site article post to totally free Way. Guest Post & Article Post live to Life time only for Current & this time new User. http://guestpostonline.com
‹ Previous 21 - 40 of 46 Next ›
Showing 20▼ items per page