Desperate for different fonts from the usual?

Posted on September 2, 2010 by neal

Google sure makes it easy!
Google Font Directory
That is until CSS3 seems to work better crossbrowser:
CSS3 Embedding @font-face

Posted in Fonts | Leave a comment

Image Replacement Technique – H1

Posted on September 2, 2010 by neal

I have been a IRT applier to my websites for a little while – always concerned as to how the site can be read when css is turned off. Good for both screen readers and search engines. If you don’t overuse these techniques on your page it seemed before Google did not penalize. Well seems like that changed a bit:

Well it’s not clear that placing a background image over the text is bad – clearly text-indent isn’t getting raves.
This post has some insite – although things are never black and white:
A Comment on SEO & CSS Image Replacement Techniques
After looking at some pages I currently am settling on this solution:
Ultimate Image Replacement
basically I used to use text-indent a lot but since Lord Google specifically called it out I like the solution above.
I am still using h1 for the logo – we will see how long that will last…

Posted in Accessibility, Semantics | Leave a comment

HTML5 & Quantum Physics

Posted on September 2, 2010 by neal

If You Think You Know HTML5 You Don’t Know It!
Here are some great links though and graphics
Personally I think simplifying and making tags more semantic and consistent is great!
But the rest remains to be seen for quite some time.
This war between Flash and HTML5 should be rephrased between “Flash and the newer easy to use JS Frameworks”
HTML at this point doesn’t some close to a lot of the interactivity that Flash provides?
The Ultimate Roundup of Indispensable and Helpful HTML5 Tutorials

What Beautiful HTML Looks Like

WTF HTML5

Posted in HTML5 | Leave a comment

Naming Conventions and Semanticity

Posted on September 2, 2010 by neal

In trying to get a better focus on naming conventions and semantics I have tried to put together some info form various sites listed.
This one offers some simple information off the bat:

http://huedesigner.wordpress.com/2010/01/22/structural-naming-convention-in-css/

Great presentation by Joseph Lindsay:

http://www.ermanz.govt.nz/news-events/archives/presentations/semantichtml.html

Some points made:

In (X)HTML tags were created that describe content <p> <Hx> <em> <strong> <table> and these are generally accepted standards.
HTML is for describing the structure and meaning of content – not for describing presentation ( CSS )
So in general tags that surround content should describe what the content is and what it is for.

HTML does not have a tag for everything

<div> and <span>
No semantic meaning, although semantics can be added to class and id attributes
<br>, <b> and <i>
No semantic meaning, but do affect presentation in visual browsers

Bad names
white3pxborder, page2bg, left, newstyle
Good names
warning, important, alert, submenu

* Describes the content, not the appearance
* A warning will always be a warning, even if its presentation changes

Think about what the content is and why you want it to look a certain way

More simple ways to look at this issue:

http://sixrevisions.com/css/css-tips/css-tip-2-structural-naming-convention-in-css/

And that’s the practical reason for choosing a structural naming convention instead of a presentational naming convention – if not for semantics and best practices – then for helping Dave Newbie know what particular classes and ids mean, not what they look like or where they are (which he can already see anyways – granted that he doesn’t suffer from dyslexia or particular forms of color-blindness).

Andy Clarke lists the naming convention used for the structure of these sites:

http://www.stuffandnonsense.co.uk/archives/naming_conventions_table.html

More information a well:

http://articles.techrepublic.com.com/5100-10878_11-5286783.html

Posted in Semantics | Leave a comment

Layout Resources

Posted on September 2, 2010 by neal

Ever since the we all went table-less there have been varied ways to creates layouts. The purpose of this blog will be to point out ways that I have used and highlight some of the common resources online.

I have read a lot of books on CSS (reviews to come) and after I came to same conclusion as most all front-end developers to use floats over absolute positioning, I tried to settle in on a layout that was straight forward and stable. The choice to use source order (the code being linear, header to content to footer etc), was one of convenience to maintain. This implies not placing the content over the header and nav for SEO reasons (or whatever reasons). I feel that table-less involves so little code that source order still provides almost the same benefits (I assume this can be argued for serious SEO purposes).

Below is a example of the source order code that I use:

see here http://constructweb.com/?q=node/11 for better naming conventions

#pagewidth{}
#header{}
#wrapper {}
#leftcol {float:left;}
#twocols {float:right;}
#maincol {float: left;}
#rightcol {float:right;}
#footer {height: 1%;}
<body>
<div id="pagewidth">
<div id="header">
Header
</div>
<div id="wrapper" class="clearfix">
<div id="leftcol">
Left Column
</div>
<div id="twocols" class="clearfix">
<div id="maincol"> Main Content Column </div>
<div id="rightcol"> Right Column </div>
</div>
<div id="footer">
Footer
</div>
</div>
</div>
</body>

Pretty basic and it has worked across browsers very well.

Other Online Layout Resources

Although I have not seen many negative margin layouts used (maybe haven’t looked hard enough), at TJKDesign the benefits of negative margins are as follows:

  • NO CSS hacks
  • NO Structural hacks (for clearing
  • NO IE/Win Conditional Comments
  • NO Cryptic CSS rules
  • NO Lengthy Styles Sheets
  • NO “Best viewed in…” statements

Use whatever works for you. There is no right or wrong. Just get it cross-browser (or close) without tables and a minimum on filters/hacks

Posted in Layouts | Leave a comment

Development Tools

Posted on September 2, 2010 by neal

Here’s what I have been using on FF lately to help in my front-end development:

  • Firebug I have come to love this tool. Its’ ease of use and editing features are a necessity.
  • Web Developer This extension is another must. I use this in conjunction with Firebug as it offers different features.
  • de.icio.us Not a development tool but it makes it easy to save and find pertinent web sites for development.
  • Firefox Accessibility Extension Developers can use the toolbar to check their structural markup to make sure it matches the page content.
  • PageDiff Helps web developers and designers to see HTML-code(text) differences between web pages.
  • ColorZilla Get a color reading from any point in your browser.
  • MeasureIt Draw out a ruler to get the pixel width and height of any elements on a web page.
  • FireShot Creates and edits screen shots of web pages.
  • View Source Chart Draws A Color-Coded Chart of a Web Page’s Source Code.
  • Dust-Me Selectors Shows which selectors are not being used.

CSS Frameworks is a development process of breaking down style sheets into components that could be reused across projects. Blueprintcss is a CSS framework which aims to do this. BlueprintCSS also offers a easy-to-use-grid and there is actually a
Blueprint Grid CSS Generator as well. A cool Grid Bookmarklet is available here which is easily configureable.

The only tool I have for IE at the moment is for IE 6, IE Develper Toolbar, which I find very useful at times when IE 6 is doing its’ psycho thing.

Posted in Tools | Leave a comment

Lists & Columns

Posted on September 2, 2010 by neal

The semantic thing to do for lists is to use unordered list (ul) or ordered list (ol). Afterall we lovers of semantics should think ol or ul whenever there is any kind of list, yet what is a good way (best way) of making a two or three columns of lists using the ol or ul code. Just as divs are floated to create columns we do the same thing with the ul’s (ol’s) and the li’s.

We want to create something like below:

Example of Lists in columns

Here is the code (streamlined a bit) :

<ul id="listWrap">
<li id="listCol1">
<h4>Header One</h4>
<ul>
<li>
<a title="link one" href="#">link one</a>
</li>
<li>
<a title="link two" href="#">link two</a>
</li>
<li>
<a title="link three" href="#">link three</a>
</li>
</ul>
</li>
<li id="listCol2">
<h4>Header Two</h4>
<ul>
<li>
<a title="link one" href="#">link one</a>
</li>
<li>
<a title="link two" href="#">link two</a>
</li>
<li>
<a title="link three" href="#">link three</a>
</li>
</ul>
</li>
<li id="listCol3">
<h4>Header Three</h4>
<ul>
<li>
<a title="link one" href="#">link one</a>
</li>
<li>
<a title="link two" href="#">link two</a>
</li>
<li>
<a title="link three" href="#">link three</a>
</li>
</ul>
</li>
</ul>

And here is how she looks without css applied

Apply the css below:

ul#listWrap {margin: 0; padding: 0; list-style-type: none;}
ul#listWrap h4 {margin: 0; padding: 0;}
ul#listWrap li {float: left; width: 120px; margin-right: 30px; padding-left: 20px;
border-right: 1px dashed #000; list-style-type: none; }
ul#listWrap li ul {margin: 0; padding: 0;}
ul#listWrap li#listCol3 {margin-right: 0;  border: none;}
ul#listWrap li ul li {float: none; font-size: 90%; border: none; margin: 0; padding: 0 0 0 10px;}

..and viola

List styled

Posted in Semantics | Leave a comment

Accessibility and Reality

Posted on August 18, 2010 by neal

It was interesting to read on webcredible the article 10 common errors when implementing accessibility. Not only were some fairly obvious items listed but it’s always best to remember that we read a lot and can be unaware of what actually happens. I read an article (I have to find it) recently about how a lot of what is on the web is fairly accessible at this time, even if the website gets a failing grade on accessibility. People have been using the web for a while now and have come to terms with what’s out there. The case made by this individual is that doesn’t mean we should just stop trying and I think we would all agree. Standards should be in place and observed. The 10 common errors article told us certain things which we really do not have to/and shouldn’t do.
Regarding #2, I am reminded again of what the screen reader does. The announcing of ‘vertical bar’ if you used these in a list of links has to be quite annoying (I suppose a background pipe image is best!!). Anyway great intentions always have to be mixed with reality – how true

Posted in Accessibility | Leave a comment