Aug 13 2011

CSS Pseudo Elements for Fun and Profit | WordCamp SF

Published by under WordPress

14.13

CSS pseudo elements ::before and ::after presented by Chris Coyier #wcsf CSS Pseudo Elements for Fun and Profit

14.16

Live Blog http://www.tonicarr.com/blog/css-pseudo-elements-for-fun-and-profit-wordcamp-sf/ #wcsf CSS Pseudo Elements

14.17

CSS is the grand canyon then pseudo elements are the rocks at the bottom #wcsf

14.20

pseudo class selectors is what you use to change the color of a link #wcsf all start with a colon

we are going to talk about :before and :after
div:before {}  puts stuff on the page

14.23

pseudo elements putting new stuff on the page #wcsf inserts new stuff on the page

Always use single colon don’t use double colon

 

14.31

pseudo elements can’t go on “no content” elements such as images #wcsf

A blockquote add a pseudo element
Can create a multi line quote with out having two quote marks

Design elements are good for pseudo elements not for content such as empty h1 tags, accessibility issues

 

 

 

 

14.38

Chris Coyier is really funny great presentation I am entertained. #wcsf

14.40

feature-comments good plugin that gives people gold star for comment #wcsf features a comment Chris added the gold star in CSS

 

14.48

Nicolas Gallagher three canvas look pseudo elements Don’t need a background. #wcsf

pseudo elements are css 2.1

IE 7 is bad support above is good.

They let you write better mark up

Slides are here: http://bit.ly/pseudos Without the personality, great presentation

No responses yet

Aug 13 2011

CSS3 Features Without Java Script Making Snow in the Summer | WordCamp SF

Published by under WordPress

Link to her slide deck: http://iestelle.com/wordcampsf/#slide1

Estelle Weyl Advanced Features of CSS @estellevw

09.40

Structural selectors in CSS3 #wcsf showing how to use with table rows. nth selectors

Show how you can use CSS instead of JavaScript

Attribute Selectors: slide deck press #2 it has the explanations
You can actually do different things based on the state. Find the information that is hidden on the page of her slide deck.

 

09.45

CSS3 gradients very cool #wcsf don’t need to use Photoshop. One shade to a different shade

She has created a gradient tool in her slide deck

All open source at her gradient library

09.49

CSS3 Next Slides Opacity vs. Alpha Transparency, HSLA Colors instead of RGB

Hue – first value
Saturation – how much color
Light
Alpha

10.02

She ran out of time but see her slide deck it is very cool and works look at it on Chrome. CSS3 #wcsf

border-radius making circles with CSS3 elliptical is ugly don’t use it. #wcsf

Transforms scaling start at one and go down not one and up because it will pixelate it
Transform – origin is a separate property

Transitions – from one color to another.

Animation: first step to declare keyframes, don’t forget 0% / 100%
you can have granular control
multiple properties
Want to learn more about animations you need to name and attach to a property

She ran out of time but see her slide deck it is very cool and works look at it on Chrome.

 

 

No responses yet

Aug 05 2011

SEO Value of Headers, Headlines and Heading Tags

Published by under SEO

Adding text and content to a website should be broken up with headlines and sub-headlines just like you may see in the newspaper. These headlines not only break up the content into logical chunks of information and act as teasers but they also pull the reader into different sections of the story. They also serve as great sources of SEO or search engine optimization.

Header Tags and Search Engine Optimization

The html code used for headlines are “header tags” and they wrap around specific text like this, <H1>Header Tags</H1>.  When headers, headlines and header tags are used they alert the search engines, like Google, that this is important information and have something to do with what the page is about and how it should be indexed. Not only should your most important content be at the top of the page but also the most important headers. These phrases (headlines) should include your most important keywords.

You always want to write for the user not for the search engines. Make your content readable and if it works for the user it will work well for search optimization and the search engines.

Use of HTML Header Tags

There are roughly 6 header tags, the most important tags are:

<H1>First Level – Highest Priority</H1>

<H2>Second Level – Below First Priority </H2>

<H3>Third Level – Below Second Priority </H3>

Each of these tags are preformatted and are read differently by each browser but  may be modified using a style sheet (CSS). The H1 tag is usually at the top of the page or the main title and has the most important keywords. Then break down the next levels of header tags in the  content or text on the page.

Here is an example of how the headlines and header tags,  in a perfect world, may be implemented on this blog post. (For clarification this blog template is not set up this way and I don’t want to take the time to change it.) :

<H1>SEO Value of Headers, Headlines and Heading Tags</H1> –
Note: On this site the title is an H2 tag with formatting. The blog title at the top of the page “Website Design and Search Engine Optimization” is an H1 tag. Most WordPress sites are set up this way.

<H2>Header Tags and Search Engine Optimization</H2>

<H3>Use of HTML Header Tags</H3>

Google’s Search Ranking Factors and Time Spent on Site

Adding the headers and taking the time to customize the header tags takes additional energy and thought but in the end may well be worth it. Another SEO  issue is “time spent on site” this has become  a major factor for Google rankings and I have heard that if people don’t stay on a site for roughly 60 seconds (which is said to be the national average), your site could be penalized. Of course a lot depends on the type of website that you have. Therefore the overall user experience is important along with the aesthetics of your page. The intent is not to drive people away but the stickiness of your information. This will help your readers spend more quality time on the website and in  turn take the extra time to read the content you have so expertly provided. The end goal is site conversions of new and returning customers.

Additional information:
This may be the best Google search for writing headlines: How to write headines

 

No responses yet

Mar 10 2008

Website Design – Colors on the Web

Published by under Website Design

I just discovered this great website ColorsOnTheWeb.com .  They have a tool for picking colors that was developed over eight years ago. It has definitely stood the test of time. You pick the colors, the tool will determine matching colors for your selection.  I tried it and it appears to come up with a wonderful array of colors, not only for hue, but also saturation and tint and shade variations. This is can be a great time saver to determine the colors quickly in your style sheets (CSS) for heading tags,  links;  hover and active.

I can spend a lot of time tweaking colors in PhotoShop, it is almost amazing that photoshop does not do this for you automatically. Below is a screen shot of this FREE tool, note the make a donation box in the right hand corner? It is a good idea to donate something if you like or use the tool. Who knows the more you donate the better the tool.

Website Design Image tool

One response so far