Skip to main content

Home/ Tools for web developers/ Group items tagged content

Rss Feed Group items tagged

Filter: All | Bookmarks | Topics Simple Middle
Vernon Fowler

What is cornerstone content? * Yoast - 0 views

yoast.com/what-is-cornerstone-content

WEB300 content seo

shared by Vernon Fowler on 14 Apr 17 - No Cached
  • tell Google which one is the most important
  • If you provide the proper internal linking structure between your posts, you can show Google which article is the most important.
  • You have to tell Google that your new cornerstone article is the most important one on your site. Don’t forget to link from all the long tail articles to your cornerstone article!
  • ...2 more annotations...
  • Cornerstone content should always be content pages. It could be a blog post, but you could also make a page out of it. The content should be updated very regularly. Cornerstone articles should be explainers, so these should definitely be informative articles. In your cornerstone article, you should aim to rank for the most competing keywords.
  • Cornerstone articles are usually rather long. Everything that’s important about a certain topic should be covered in your cornerstone article. That’ll ask quite a bit of your writing skills. Lengthy articles are usually hard to read, especially from a screen. Make sure to use sufficient headings. An index at the beginning of a long cornerstone article is also a great idea.
Vernon Fowler

Twitter Cards | Twitter Developers - 0 views

dev.twitter.com/cards

metadata twitter developers html socialmedia social content sharing documentation validator

shared by Vernon Fowler on 04 Apr 13 - No Cached
  • Twitter cards make it possible for you to attach media experiences to Tweets that link to your content. Simply add a few lines of HTML to your webpages, and users who Tweet links to your content will have a "card" added to the Tweet that’s visible to all of their followers.
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

Pearsonified's Golden Ratio Typography Calculator - 0 views

www.pearsonified.com/typography

typography webdesign tools calculator usability

shared by Vernon Fowler on 06 Sep 12 - No Cached
  • Vernon Fowler on 06 Sep 12
     
    "Discover the perfect typography for your website by entering your current font size and content width"
de Villamil Frédéric

Designing Typography for the Modern Web | Tips - 1 views

webdesignledger.com/...-typography-for-the-modern-web

typography webdev webdesign design

shared by de Villamil Frédéric on 31 Oct 10 - No Cached
  • de Villamil Frédéric on 31 Oct 10
     
    As web designers, it is our job to grow with the trends of the Internet. As new technology emerges, it's our position to jump on board and see where it can take us. This includes trends all over the web, typography being a major player. Many designers don't consider type as a field of interest or focus. Ironically, typography is possibly one of the most important parts of our dynamic web. It helps deliver a website's content to users from all over the world and it truly is an art to study. I'll be getting into a few concepts about typography for the modern web. Things haven't changed too much since the previous years of web design, however many new techniques are being utilized and shared amongst the design community.
de Villamil Frédéric

accessible Rich Text Editor v1.0 for SharePoint - 0 views

www.hisoftware.com/...09-03-17_HiSoftwareaRTEv1.html

accessibility microsoft rte sharepoint

shared by de Villamil Frédéric on 22 Mar 09 - Cached
  • de Villamil Frédéric on 22 Mar 09
     
    iSoftware aRTE (aRTE) is a lightweight text editor for MOSS / WSS designed to help the user create more accessible Web content.
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
  • Google supports microdata as part of their Rich Snippets program.
  • a handy tool to see how Google “sees” your microdata properties
  • 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

WebPagetest - Website Performance and Optimization Test - 0 views

www.webpagetest.org

performance optimization speed tools web testing test webdev php

shared by Vernon Fowler on 23 Feb 13 - Cached
  • Run a free website speed test from multiple locations around the globe using real browsers (IE and Chrome) and at real consumer connection speeds. You can run simple tests or perform advanced testing including multi-step transactions, video capture, content blocking and much more. Your results will provide rich diagnostic information including resource loading waterfall charts, Page Speed optimization checks and suggestions for improvements.
Vernon Fowler

Grumpicon. A Web app for the Grunticon workflow. - 0 views

www.grumpicon.com

svg generator png tools image icons css icon font vector webdesign tool

shared by Vernon Fowler on 17 Jan 14 - No Cached
  • To start, export SVG files for each of your images, drop those files onto the grumpy animal above, then click the 'Downlode it!" button to grab the files.
  • Once downloaded, check out preview.html to see a preview of your icons and their class names. To integrate in your site, you can drop the exported files into a folder on your site and paste the contents of grunticon.loader.txt into the head section of your HTML templates. Note: Be sure to replace the 4 [YOUR PATH HERE] parts of that text with the path to your own grunticon files (a root-relative path often works best across a whole site).
  • Vernon Fowler on 17 Jan 14
     
    Grunticon makes it easy to use HD-ready (retina) vector illustrations, icons, and background images in your web project without the hassles of spotty browser compatibility. The tool processes a set of SVG files, generates PNG fallback images for legacy browsers, and exports a demo page showing how to use the final icons.
  • Vernon Fowler on 17 Jan 14
     
    Grunticon makes it easy to use HD-ready (retina) vector illustrations, icons, and background images in your web project without the hassles of spotty browser compatibility. The tool processes a set of SVG files, generates PNG fallback images for legacy browsers, and exports a demo page showing how to use the final icons.
Sarah HL

JS charts - Free download - 0 views

www.jscharts.com/free-download

javascript tools graphics

shared by Sarah HL on 13 Feb 09 - Cached
  • JS Charts is available free for both non-commercial and commercial purposes. This license does NOT allow you to distribute, resell or embed/enclose JS Charts into another distribution pack/application which outputs similar content that can be used by third parties. To get the source codes, special customizations licenses please contact our sales department at sales [at] jumpeyecomponents.com
Vernon Fowler

Grunt for People Who Think Things Like Grunt are Weird and Hard ◆ 24 ways - 0 views

24ways.org/...grunt-is-not-weird-and-hard

grunt tutorial javascript css tools webdesign frontend front-end workflow webdev tool

shared by Vernon Fowler on 28 Mar 14 - No Cached
  • You install Grunt on a per-project basis. Go to your project’s folder. It needs a file there named package.json at the root level. You can just create one and put it there.
  • The contents of that file should be this: { "name": "example-project", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.1" } }
  • Once that package.json file is in place, go to the terminal and navigate to your folder.
  • ...3 more annotations...
  • This is a one-liner again. Just run this command in the terminal: npm install -g grunt-cli
  • Then run the command: npm install
  • You should close and reopen the terminal as well. That’s a generic good practice to make sure things are working right.
1 - 14 of 14
Showing 20▼ items per page