• Shortcuts : 'n' next unread feed - 'p' previous unread feed • Styles : 1 2

» Publishers, Monetize your RSS feeds with FeedShow:  More infos  (Show/Hide Ads)


Date: Tuesday, 28 Jul 2009 19:28

Those of you who have explored rich typography solutions for web development should be very familiar with the different techniques floating around the Internet. Until majority of the population uses browsers that support CSS3, and until commercial font licensing issues allow use of the @font-face rule to become a norm, many resort to these font embedding techniques.

The thing with non-standard font embedding techniques is that they mostly rely on JavaScript and sometimes Flash or PHP to render text in whatever custom font is specified. Thus, choosing the right solution for a web project can become tricky. This article aims to compare them by listing the pros and cons of each technique.

Scalable Inman Flash Replacement (sIFR) / sIFR 3

Probably one of the first full-blown text replacement solutions, SIFR uses a combination of JavaScript, CSS, and Flash to render custom fonts.

Pros:

  • Fully accessible to screen readers and assistive technology
  • Partially selectable text (cannot select surrounding elements)
  • jQuery integration
  • Anti-aliasing results in crisp font rendering
  • Flash-based font embedding is generally an allowable practice by most font foundries
  • Easy to add text effects such as shadows in Flash

Cons:

  • Requires Flash
  • CPU and memory intensive
  • Font license restrictions can be difficult to set up (e.g. Flash loading needs to be locked to your domain)
  • Can be tricky to set up
  • Embedded fonts cannot be printed

Cufon

Cufón aims to become a worthy alternative to sIFR, which despite its merits still remains painfully tricky to set up and use.
Pros:

  • Easy to set up
  • Does not require Flash
  • Fastest loading and processing time (according to this presentation)

Cons:

  • Inability to highlight and copy/paste text
  • License issues prevent many fonts from being legally embedded
  • Does not support justified text alignment
  • Hover state for elements other than links might result to unpredictable results
  • Requires extra JavaScript to prevent FOUC on IE7

Typeface.js

Typeface.js is similar to Cufon, using a JavaScript engine to render fonts on a browser using canvas or VML.

Pros:

  • Easy to set up
  • Does not require Flash
  • Fast loading and processing time

Cons:

  • Fonts are only selectable in browsers that support <canvas>
  • Hover state is not supported, but a workaround that requires extra code is available
  • License issues prevent many fonts from being legally embedded
  • Long loading times in IE
  • Only supports TTF (does not support .otf, PFB, and postscript fonts)
  • Requires extra JavaScript to prevent FOUC on IE7
  • Has spacing issues, according to some people

Facelift Image Replacement (FLIR)

Facelift Image Replacement (or FLIR, pronounced fleer) is an image replacement script that uses JavaScript, PHP and the GD library to dynamically generates image representations of text that use custom fonts.
Pros:

  • Does not require Flash or JavaScript
  • Fonts are rendered as an image and does not violate font licensing terms
  • Many text effects available thanks to Imagemagick

Cons:

  • Inability to highlight and copy/paste text
  • Can be painful to set up
  • Requires a web server with PHP and the GD library enabled
  • Finer details of fonts are not rendered very well by the GD library
  • Takes up additional server resources to process (bandwidth and CPU)

The good thing about these techniques is that they all take into account things like accessibility, SEO readiness, and browser support. These are all huge factors in web development today. For Internet Explorer users, IE6 is supported at least, and for non-supported browsers, thankfully every one of them degrades gracefully into your standard HTML rendered text.

In conclusion, every one of these techniques has its own set of advantages and disadvantages. sIFR is the oldest and most “proven method”, however it relies on both Flash and JavaScript thus taking a hit on performance. FLIR uses the old school technique of replacing text with images and even offers text effects. However, it is hardest to set up and requires a web server with PHP and the GD library enabled.

Typeface and Cufon are the most promising beign the easiest to setup. On the other hand they are both plagued with licensing issues and lack of ability to select text, which for many can be a deal breaker. This appears to be changing though, as Type Select builds on top of typface.js and promises text selection functionality. Still, it is a relatively new player and is also plagued by limitations such as lack of support in IE and no support for :hover and line breaks.

Share

Author: "Dennison Uy" Tags: "AJAX, Accessibility, CSS, Flash, Font, F..."
Comments Send by mail Print  Save  Delicious 
Date: Tuesday, 21 Jul 2009 08:11

CSS or Cascading Style Sheets is normally used to separate the style and layout of your HTML files from the actual content. However, few are aware of the added value that CSS can give to your website. Aside from the obvious ones like style standardization, CSS can be utilized to provide other useful stuff not possible with table-based layouts.

Among these benefits are things like:

Much information about these techniques can be found on the web. Below are some example implementations.

Server bandwidth reduction

CSS Optimization can translate to huge savings in server bandwidth, resulting in lower operational costs.

This article compares some of the best CSS optimizers available on the web by using heavy traffic websites like Digg and Slashdot as an example.

Media type formatting

By utilizing the CSS media attribute, you can easily control display for different media types. This is best used when formatting websites for mobile display and creating printer-friendly pages.

Here is a good tutorial that covers CSS development for mobile browsers. For techniques related to print styling, refer to this tutorial, another tutorial, and this article by Eric Meyer.

Menu overlapping

The CSS z-index property specifies the order an element is stacked, similar to how layers are arranged in Adobe Photoshop. It is also relatively easy to understand, and can be quite powerful when used correctly. It can also come in handy when creating overlapping menus. Here is a very good tutorial on how this can be done.

Styling of form elements

In a previous article we linked to Jeff Howden’s CSS-Only, tableless forms article which gives an example of what can be accomplished with CSS form styling.

Then, there’s also The Form Assembly, a CSS Zen Garden clone for showcasing form designs.

E-mail address obfuscation

When displaying an e-mail address on a website you obviously want to obfuscate it to avoid it getting harvested by spammers. There are many ways to accomplish this, and one such method can easily be implemented in CSS. Silvan Mühlemann tested nine methods and published a test page for spambots to harvest. 1.5 years later the results are out and surprisingly, only the CSS methods resulted in absolutely zero spam.

Share

Author: "Dennison Uy" Tags: "Accessibility, CSS, Design, Forms, Mobil..."
Comments Send by mail Print  Save  Delicious 
Date: Friday, 10 Jul 2009 14:43

Bored with the same old uninspiring, list-based sitemaps? If you’re like me, most likely you will find that creating better looking sitemaps can be quite time consuming. Thus, we end up having to settle for text-based unordered lists that look nothing like a map.

Well well well, worry not my friends, for now you can have a very beautiful and visual site map with nothing more than your standard unordered list and some CSS magic. Thanks to the efforts of Matt Everson of Astuteo, LLC, who released for public consumption what they call SlickMap CSS.

SlickMap CSS is “a simple stylesheet for displaying finished sitemaps directly from HTML unordered list navigation. It’s suitable for most web sites – accommodating up to three levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences.”

The first thing that really impressed me with SlickMap was the way data is visualized. The arrangment, grouping, and color coding of data makes it very easy to identify and find relevant data. The “Home link” is color blue and found at the top left most corner, immediately followed by the “Main links”, also colored blue. Level 2 and level 3 links can be found below them, each level having its own color, with a connector leading to each link. “Utility links” are grouped at the top right corner, separate from the main map.

What’s even more amazing about SlickMap is that everything is implemented in pure CSS. There is not a single line of JavaScript to be found anywhere. It’s also very easy to implement. Simply create an HTML file with an unordered set of links and import the slickmap.css file. Couple this up with an online site map tool like WriteMaps and you should be all set to rock and roll.

It supports most standards-compliant browsers, which means Safari, Firefox, and Opera. Sorry, IE but no love for you.

In the README file:

SlickMap CSS was created for web designers, and such was tested and developed for use with Safari, Firefox, Opera, and other standards-compliant browsers. Because of that, current versions of Internet Explorer (and probably IE versions long into the future) might look like sh*t.

The only downside I could think of right now is actually a strength in itself. While those large boxes would work for small to medium websites with a fairly standard site map layout like the one Astuteo has, it might do very well for larger websites with hundreds of links on their site maps. But then again there are methods to optimize and trim down those gigantic things.

It is a very well thought out and solid demonstration of the power of CSS, and for this reason I raise my glass and give my kudos to Matt Everson and the folks at Astuteo. Well done guys!

Share

Author: "Dennison Uy" Tags: "Accessibility, Automation, CSS, Cool, Fr..."
Comments Send by mail Print  Save  Delicious 
Date: Tuesday, 30 Jun 2009 15:24

“How do you scale CSS for millions of visitors or thousands of pages?” This is the question that Nicole Sullivan tried to answer in her presentation at Web Directions North in Denver. Entitled Object Oriented CSS (OOCSS), the concept has since then garnered overwhelming response from the community.

OOCSS is more than just a tool, it is a way of thinking. There are many advantages to adapting this concept. Primarily:

  • It allows you to write fast, maintainable, standards-based front end code.
  • It adds much needed predictability to CSS so that even beginners can participate in writing beautiful websites.

OOCSS is governed by two main principles:

  1. Separate structure and skin
  2. Separate container and content

Take time to check out the Object Oriented CSS presentation. There are 64 slides, but it is definitely worth going through. If the text is hard to read, try viewing in Full Screen mode.

Share

Author: "Dennison Uy" Tags: "CSS, Coding, Framework, Reference, Tips,..."
Comments Send by mail Print  Save  Delicious 
Date: Wednesday, 24 Jun 2009 12:11

Here is an article that you may find useful.

Designers would find it surprising that to know that you can now take your HTML and CSS skills and use it to create desktop applications. This now very much possible for anyone who is willing to explore the power of Adobe AIR. Andrew Tetlaw has a nice little article over at SitePoint entitled Take Your CSS to the Desktop with Adobe AIR!. It provides a good, short introduction to Adobe AIR and how easy it is to use your web development skills to create rich cross-platform desktop applications.

Take Your CSS to the Desktop with Adobe AIR!

For further reading, you may wish to check out Akash Mehta’s winning article, Walk on AIR: Create a To-do List in Five Minutes.

Share

Author: "Dennison Uy" Tags: "AJAX, Development, Howto, Software, Tuto..."
Comments Send by mail Print  Save  Delicious 
Date: Tuesday, 16 Jun 2009 09:54

Those familiar with fluid / elastic layouts know that they can be a little more challenging to implement compared to fixed-width layouts. With the advent of wide-screen monitors, one of the biggest advantages of fluid-width layouts is the ability to maximize available space.

It was only a year ago when 1024×768 was still the dominant screen size. However, as of January 2009, 57% of the population are on desktops higher than 1024×768. The number of users still on 1024×768 has declined sharply from 48% of the previous year to a mere 36%. On the other than, the users on widescreen desktop are rapidly growing, thanks in part to marketing by HDTV makers.

Kayla Knight has written a very good article on the topic of building good websites with fluid layout.

She comes up with 6 techniques to do this, which can be summed up as follows:

  1. Fluid Layout Using A Grid
  2. Adaptive Content
  3. Images In A Fluid Layout
  4. jQuery Masonry
  5. Smart Columns with jQuery & CSS
  6. Text Zooming

She also provides helpful examples and links to all the necessary tools needed to achieve the perfect fluid / elastic layout. With this, designers are armed and ready for the next evolution in layout design.

Read the full article

Share

Author: "Dennison Uy" Tags: "Accessibility, CSS, Coding, Design, Deve..."
Comments Send by mail Print  Save  Delicious 
Date: Friday, 05 Jun 2009 13:53

Adobe BrowserLab is an online service that allows web professionals to test their websites on popular browsers and operating systems. Screenshots of actual browser renderings are generated in real time, with multiple viewing options to help pinpoint issues. Adobe provides integration with Dreamweaver CS4, and the free preview is currently available only to a limited number of users.

Currently, BrowserLab supports the following web browsers and operating systems:

  • Firefox 2.0 - Windows XP
  • Firefox 3.0 - Windows XP
  • Internet Explorer 6.0 - Windows XP
  • Internet Explorer 7.0 - Windows XP
  • Safari 3.0 - Macintosh OS X
  • Firefox 2.0 - Macintosh OS X
  • Firefox 3.0 - Macintosh OS X

The sad thing about BrowserLab is that it will eventually be released as a paid service. In the meanwhile, there are alternatives like Browsershots which remain free for low-priority usage.

Share

Author: "Dennison Uy" Tags: "Beta, Browser, Compatibility, Software, ..."
Comments Send by mail Print  Save  Delicious 
Date: Friday, 22 May 2009 10:30

The Better Web Readability Project aims to promote screen-friendly and more readable fonts. The result is a CSS library that redefines, among others, the standard font size as well as leading (the amount of space between text). Other features of this library are:

  • 16px default main text size
  • Partial 26px baseline grid
  • Serif for Heading, sans-serif for the paragraphs
  • Lower color text contrast
  • Intensified paragraph division (new line + indent)
  • Bigger leading (line-height) 1.625

The original idea came from Vladimir Carrer, who also came up with the library. In his post entitled How we read on web and how can we improve that he reveals that most of us who use computers to read news, blogs, and various sites end up scanning rather than reading. He then compares reading a book to reading on the monitor, and provides three reasons why it is harder to read on a computer screen:

  1. We maintain the book standards (12pt) for font size on the web (12px). But the distance from the monitor is triple. Just put your newspaper to your monitor and try to read. Hell! Is hard!
  2. Additionally the paper reflects the light and monitor emits the light. If you have old “cathode” monitor it’s like looking directly in a light bulb.
  3. You also have distraction noise: strong colors, links, flash animation, banners , not defined site architecture, click here, digg me, follow me on twitter, by my products… it’s fucking jungle out there.

He then comes up with a set of standards and rules that would allow for better and easier on-screen reading, and packages it as a CSS library. The resulting text is beautiful and pleasing to the eyes. One such example can be seen in the screen shot below. You should notice how your eyes would easily glide through the text:

Better Web Readability Project example screenshot

You can head over to the project homepage, or click on the links below to view the library in action:

You can also head over and download the full library here.

Share

Author: "Dennison Uy" Tags: "Accessibility, CSS, Font"
Comments Send by mail Print  Save  Delicious 
Date: Monday, 11 May 2009 13:38

The Peeling Page is an effect is normally used by advertisers to show advertisements that would otherwise occupy space that is larger than what is available on a page. It is very slick, and is normally implemented in Flash. This script on Flashden costs $4, though there is a free tutorial available. The thing about the Flash version is that it uses both JavaScript and Flash, which may not be everyone’s cup of tea.

This is where Soh Tanaka’s jQuery + CSS idea comes in. It uses simple CSS and jQuery to mimic the Flash version, which can possibly translate to faster development and maybe even faster loading pages. The tradeoff is the absence of any extensive banner animation — something that can only be done in Flash. However, I believe this solution is worthy of a look, at least for those in need of a quick peeling page component for their project.

Simple Page Peel Effect with jQuery & CSS

Share

Author: "Dennison Uy" Tags: "AJAX, Animation, Effects, Flash, Howto"
Comments Send by mail Print  Save  Delicious 
Date: Wednesday, 29 Apr 2009 11:48

As self-proclaimed CSS experts, we must live, eat and breathe CSS - 25 hours a day. What better way to do this than by using a CSS + HTML calendar! Lovingly hand-crafted(tm) by Vladimir Carrer, the Grid Calendar is inspired by the Best of Calendar Design, and can be downloaded for free (can you believe it?)

This reminds me a lot of the designs posted on the 2007 elzr Infodesign challenge, as well as Adam Sporka’s Thumb Calendar which I am personally very fond of.

Perhaps there’s a designer out there with uber talent a lot of spare time who could take the Grid Calendar to the next level. It certainly could use a little more color, and those white spaces between the grids are making the nerve endings of my eyes do the polka dance. While we’re at it, let’s throw in a bunch of AJAX to turn our simple calendar into a leet app. Or maybe not.

Read the full article.

Share

Author: "Dennison Uy" Tags: "Accessibility, CSS, Free, Software, Visu..."
Comments Send by mail Print  Save  Delicious 
Date: Friday, 24 Apr 2009 09:57

If you are looking for a good pure CSS footer solution, look no further. CSS Sticky Footer works for over 50 Windows, Linux, and Mac-based browsers. Included in this list are the latest releases of Google Chrome, Mozilla Firefox, Opera, Safari, and Internet Explorer.

CSS Sticky Footer is developed by Steve Hatcher, and is based on the Exploring Footers article from A List Apart, and takes suggestions from Cameron Adams’ footerStickAlt, and The Pure CSS Footer example from lwis.net. It applies a clear fix hack to keep the footer in place in Google Chrome and other browsers where the footer would float up when you resized the window. The clearfix also fixes problems that might occur if you are using floats to create two or three column layouts.

Far from being perfect, it does have its share of issues. The first one deals with margins, which can easily be solved by changing margins to padding instead. The second one deals with the use of relative font sizes such as % or em, something which many of the more advanced CSS gurus like me are very much fond of. The author suggests using px instead, which many find unacceptable.

To get started, check out the HowTo page for details on how to implement the CSS Sticky Footer.

Share

Author: "Dennison Uy" Tags: "Browser, CSS, Code, Compatibility, Devel..."
Comments Send by mail Print  Save  Delicious 
Date: Sunday, 12 Apr 2009 10:06

Back in 2007, the staff of A List Apart and An Event Apart conducted a survey and presented 37 questions to 33,000 web professionals, providing “the first data ever collected on the business of web design and development as practiced in the U.S. and worldwide” (ALA 2007 results). The results were compiled into a downloadable PDF file.

In 2008 they did it again, the results of the 2008 Survey For People Who Make Websites are now out for public consumption. The survey had less respondents compared to the one held in 2007 down to 30,055. Data analysis is provided by Alan Brickman and Larry Yu. The results speak can be overwhelming for some. Thankfully the findings are presented in a friendly, easy to read article with clear and beautiful CSS Charts.

ALA has generously shared the raw data with the community, which is available as tabbed text, CSV, and Excel spreadsheet. RAW data is a powerful thing, and I just have a couple of suggestions how it can be used:

  • AJAX application that allows visitors to enter their own responses, and generates a graph that shows where the respondent is in relation to others
  • Quick summary that shows the highest and lowest result per question
  • AJAX application that allows visitors to filter, sort, and sift through the data
  • Side-by-side comparison of 2008 and 2007 data

All in all, big props to the ALA team for the tremendous effort spent on this endeavor. It is a great contribution to the web community. Looking forward to the 2009 survey!

Share

Author: "Dennison Uy" Tags: "Reference, Social"
Comments Send by mail Print  Save  Delicious 
   New window
Date: Monday, 06 Apr 2009 11:13

Styleneat logo

I previously blogged about CSS optimization and mentioned that one way to achieve optimization through the use of CSS optimizers.

Styleneat is a similar tool that focuses on reformatting CSS Stylesheets, simply making it more readable. This tool can pretty much take care situations wherein CSS code was developed by different people, re-organizing everything to take on a unified, organized code structure.

Styleneat screenshot

The author claims to have tested the tool on “several websites with huge and complex stylesheets” and it has not broken layout. Does it live up to its claim? Give it a spin and share your thoughts.

Share

Author: "Dennison Uy" Tags: "Accessibility, CSS, Code, Coding, Optimi..."
Comments Send by mail Print  Save  Delicious 
Date: Wednesday, 25 Mar 2009 12:53

Safari 4 cover flow

A beta version of Apple’s Safari 4 web browser is now available for public consumption by Macintosh and PC users alike. It boasts 150 features, 30 (yes, I counted) of which are marked as “NEW”.

Among these new features, the most interesting ones are:

Speculative Loading

Safari loads the documents, scripts, and style information required to view a web page ahead of time, so they’re ready when you need them.

I wonder how Safari will “guess” which files to pre-load. Hopefully this is something that can be turned off, for those among us who would like to conserve bandwidth.

CSS Effects

Pioneered by Safari, CSS effects help developers add polish to websites by stylizing images and photos with eye-catching gradients, precise masks, and stunning reflections that require only a few lines of code.

Does anyone recall IE’s ActiveX filters? They pretty much all died with the exception of the alpha filter, and even that was just used to fix its lack of support for PNG transparency.

Acid 3 Compliance

Safari is the first — and only — web browser to pass Acid 3. Acid 3 tests a browser’s ability to fully render pages using the web standards used to build dynamic, next-generation websites, including CSS, JavaScript, XML, and SVG.

Safari 4 Passes Acid 3 test

I thought Opera 10 was the first browser to pass the Acid3 test? Still, kudos to the Safari team!

HTML 5 Offline Support

Web developers can now create applications that you can use even when you don’t have access to the Internet. Thanks to HTML 5 offline support, designers can build web applications that store themselves on your computer, where you have immediate access to them. Along with the application, web developers can also choose to store the application’s data on your system, so you always have the information you need. Applications and data can be stored in a traditional SQL-like database serving as an application cache or as a “super cookie,” which stores data in the familiar cookie format.

What!?! HTML 5 support even though we are 4664 days away from HTML 5? Woo hoo Safari!

Cover Flow

Using Cover Flow, you can flip through websites as easily as you flip through album art in iTunes. Cover Flow displays your bookmarks and history as large graphical previews, so you can pick out a website instantly.

I just hope IE8 doesn’t try to copy this “feature” by adding a Flip3D mode.

History View

Take a closer look at your browsing history in the History view. Search for previously visited sites, drag web pages to your bookmarks, and clear individual items. Safari displays your history using Cover Flow, so you can flip through your search results as easily as you flip through iTunes album art.

This is definitely useful for quickly locating a page in one’s history.

So what are you waiting for? Download Safari 4 for a test drive now.

Share

Author: "Dennison Uy" Tags: "Animation, Browser, Cool, Free, Safari, ..."
Comments Send by mail Print  Save  Delicious 
Date: Tuesday, 17 Mar 2009 19:35

Having to go through tons of sumbmissions for the CSS Vault Gallery over the past few years, I have noticed a definite increase in the amount of sites that use AJAX or some form of JavaScript. There seems to be a trend where even simple 5-page websites use JavaScript to some extent, in an attempt to generate additional interest on the viewer. Sometimes they are entirely unnecessary, and there are cases when the presence of AJAX only serves to annoy or encumber the user.

AJAX technology must then be used only when necessary. I have come up with a list of reasons for this purpose.

DO NOT USE AJAX when …

  1. You plan to bombard the user with fancy effects. It will cause the viewer to suffer from migraines.
  2. Your website can live without it
  3. Your target audience consists of elderly or disabled people.
  4. You are working on a login page. AJAX will essentially renders password managers useless.
  5. You need specific pages or content to be bookmarkable.
  6. Your users need to use the browser’s back button or history feature.

DO USE AJAX when …

  1. You plan to use it on a web based application.
  2. You plan to add support for non JavaScript-enabled browsers.
  3. Your target audience consists of tech savvy users.
  4. You are creating a tool or a widget that will be used on another site.
  5. You need to conserve bandwidth - AJAX allows you to refresh specific content without having to load the entire page.
  6. Certain tasks will be finished much faster with AJAX.

Share

Author: "Dennison Uy" Tags: "AJAX, Accessibility, Animation, Code, Ef..."
Comments Send by mail Print  Save  Delicious 
Date: Sunday, 08 Mar 2009 15:56

Below is a collection of the best videos on CSS available on the web, hand-picked personally by me.

Short Introductory Videos

Using CSS by Joseph Lowery

Using CSS by Joseph Lowery (03:43)

This video explains what cascading style sheets (CSS) are. You learn the basics of CSS and the primary interfaces in Dreamweaver to work with CSS. You learn how to apply basic CSS to a web page that contains text using Dreamweaver; specifically, you create and embed a new CSS rule for a heading and paragraph

Introduction To CSS Editing Using Firebug by Jim Plush

Introduction To CSS Editing Using Firebug by Jim Plush (3:17)

The firebug firefox extension allows you to edit in real time your CSS code. Instead of having to make a change, reload, make a change, reload you can just edit it live to see the results.

Basics With Sample Code

Introduction to CSS by Heather James

Introduction to CSS by Heather James (15:26)

Good basic introduction to CSS. In the first half of the video, she explains what CSS is and its basic concepts. In the second half of the video she shows us some examples. At one point she even uses Firebug. Cool!

Creating Beautiful Interfaces with CSS by Douglas Bowman

Creating Beautiful Interfaces with CSS by Douglas Bowman (01:02:51)

Drop-down menus and sophisticated interface elements have traditionally been implemented using JavaScript and kludgy coding workarounds that often don’t work. It’s increasingly practical to deliver rich, beautiful, functional interfaces using semantic markup and CSS. Learn how modern markup can deliver great Web interfaces that are fast and reliable.

Basic HTML and CSS Tutorial. How To Make Website From Scratch by Jimmy Ruska

Basic HTML and CSS Tutorial. How To Make Website From Scratch by Jimmy Ruska (39:20)

A good basic tutorial on HTML and CSS. The first 10 minutes covers mostly basic HTML. Skip to the 9-minute mark to go straight to the CSS portion of the video.

Introduction to CSS by Stefan Mischook

Introduction to CSS by Stefan Mischook

A good, free video tutorial by Stefan Mischook of Killersites.com

Full Website Conversion Videos

100% CSS Web Design Series by Psmeg

100% CSS Web Design Series by Psmeg

A series of videos which details how to create a pure CSS based website using Adobe Dreamweaver. The series is composed of 9 parts nonetheless it is quite good and very easy to follow.

Converting a Photoshop Mockup Series by Chris Coyier

Converting a Photoshop Mockup Series by Chris Coyier

How to convert a website designed in Adobe Photoshop to HTML/CSS. Following the success of the first video series, Chris Coyier has come up with another video using a minimal version of the CSS-Tricks website.

Share

Author: "Dennison Uy" Tags: "CSS, Coding, Development, Free, Howto, T..."
Comments Send by mail Print  Save  Delicious 
Date: Thursday, 26 Feb 2009 16:00

Recently I have been working on a social networking site that was experiencing downtime due to the amount of stress its users were putting on the server. I spent a good amount of time looking for ways to improve the speed of the site, and one of this was through CSS optimization.

Structure your CSS and HTML elegantly
“CSS” Stands for Cascading Style Sheets. Notice the first word, “Cascading”? The power of this language is readily available, and it is up to you, the designer, to maximize its use. It is an interesting concept that is not too difficult to grasp. Try to find instances wherein this can be applied.

For example, the code below:

<p class="someClass">First</p>
<p class="someClass">Second</p>
<p class="someClass">Third</p>
<p class="someClass">Forth</p>
<p class="someClass">Fifth</p>

Can be rewritten this way:

<div class="someClass">
<p>First</p>
<p>Second</p>
<p>Third</p>
<p>Forth</p>
<p>Fifth</p>
</div>

But what if our code looks like this:

<p class="firstClass">First</p>
<p class="someClass">Second</p>
<p class="someClass">Third</p>
<p class="someClass">Forth</p>
<p class="someClass">Fifth</p>

We can take advantage of CSS by rewriting HTML this way:

<div class="someClass">
<p class="firstClass">First</p>
<p>Second</p>
<p>Third</p>
<p>Forth</p>
<p>Fifth</p>
</div>

Then, cascade rules defined in “firstClass” to overwrite styling principles in “someClass”.

This is just one simple example, and I hope you understand what I’m trying to get at. Just keep in mind the concept of cascading rules and it won’t be long before things like this become second nature and automatic.

Re-structure your CSS
I am a huge fan of single line CSS style. Not only does it save up space, it is also more readable. The readability bit is debatable, though. Simply put, I find it easier to locate relevant tags if the tag names are all on the same left-hand side and I do not have to scroll so much to find what I need to change. After all, designers are only concerned with CSS selectors, not the rules that are applied to it.

Optimize Your CSS
Some time ago, I wrote an article about improving website performance using CSS optimizers. I still use CSS Optimiser up to this day. For very large CSS files it is a quick and easy way to rewrite things that may otherwise prove too time-consuming to optimize manuallyt.

Use CSS Shorthand Rules
When I was still learning CSS, I found shorthand rules to be quite daunting and confusing at times. But I strived to learn the shorthand syntax for every rule simply because I am lazy and do not want to bother typing the same thing over and over not to mention having to memorize all the rule names.

Compare the example longhand its equivalent shorthand below.

Original longhand:

#someid {
background-attachment: fixed;
background-color: #000000;
background-image: url(images/image.png);
background-repeat: no-repeat;
background-position: left bottom;
}

Shorthand version:

#someid { background: #000 url(images/image.png) no-repeat fixed left bottom; }

The folks over at SitePoint has a good introduction to the art of CSS Shorthand that I can recommend to anyone who’s willing to learn.

Server-side Compression
Server-side compression techniques have long been put to use by large scale applications for two main reasons. First, bandwidth is precious and expensive. Second, it does not require having to modify code for it to work. What it does require, however, is supported server software (or hardware). Hence the term “server-side”.

One such solution can easily be deployed on Apache servers. Once again SitePoint has written an introduction to server-side compression using Apache and mod_gzip.

The drawback to this is increased CPU load. Indeed, server-side compression is a double-edged sword, but usually the pros far outweigh the cons.

Share

Author: "Dennison Uy" Tags: "CSS, Code, Optimization"
Comments Send by mail Print  Save  Delicious 
   New window
Date: Friday, 20 Feb 2009 08:50

Dave Shea recently blogged about the industry’s practice of using sprites to optimize high traffic websites.  He shows us how websites like Amazon, Yahoo, and Google benefit from this very simple CSS technique, and if you would like to learn how to do this, you can check out Andy King’s CSS Sprites tutorial. One important point that Dave brings out in this article is the use of CSS sprites on UI interfaces. If you have ever worked with one of the older versions of FCKeditor or TinyMCE, you probably know what I’m talking about. These two are prime examples of good CSS sprites implementation.

It is hard to imagine that there was a time when all those interface icons each resided on its own, separate file. Not only did this increase the amount of storage spare required, it is also sometimes confusing to see so many similar files. Can you imagine having to sort through double the number of files each file having a “mouseover” and a “mouseout” version?

In summary, we can conclude from Dave’s article that sprites are an absolute must for:

1. Websites that use menu images
2. Web application interfaces
3. High traffic websites where speed of content delivery and bandwidth is essential

Sprite Optimization

Share

Author: "Dennison Uy" Tags: "Blog, CSS, Interface, Optimization, Them..."
Comments Send by mail Print  Save  Delicious 
Date: Wednesday, 11 Feb 2009 07:42

So there I was skimming through my usual list of websites on another boring day when this headline caught my eye:

Best CSS zen garden file ever?

My head spun furiously. Could it be possible? You be the judge! Let me warn you though, that a sense of humor is required to appreciate the screenshot below.

Geocities 1996 CSS Zen Garden Submission

Hungry for more? View the site in its full, animated glory!

Of course, there had to be an explanation for this madness, right? Apparently the design, entitled “Geocities 1996″, is by Bruce Lawson. He did it back in 2004 out of nostalgia. He writes:

The CSS Zen Garden has been highly useful to me in demonstrating the value of standards when attempting to convince my reluctant colleagues to abandon tables. Thanks Mr. Shea!

However, it’s also been a major pain in the arse, as Nongyaw, friends and family now expect every site I make for them to look as good as the zen garden submissions. As a design-challenged individual, I’ve found myself almost nostalgic for the multi-coloured, multi-typefaced gif-ridden designs I used to see in 1996 when I moved to Thailand and first used the web, back in the days when Netscape 3.0 was the coolest browser out.

View the full article.

I hope that made your day. It surely did for me!

Share

Author: "Dennison Uy" Tags: "CSS, Funny"
Comments Send by mail Print  Save  Delicious 
Date: Friday, 30 Jan 2009 06:40

Fans of the swiss army knife of web development Firebug will be happy to hear that this wonderful Firefox add-on has added another blade to its arsenal. With the help of the Firescope add-on, it can now provide CSS and HTML reference in a snap. Just right-click on any tag and click on the context menu to perform a lookup. The tool appears to have been developed by the web gurus over at SitePoint, so tool has links to further information on the SitePoint Reference web site.

The tool is also searchable. You can:

… search for HTML elements, HTML attributes, or CSS properties (or any combination). The search happens live as you type, so usually you’ll only have to type one or two letters to get the results you want.

Check out the screenshots:

Share

Author: "Dennison Uy" Tags: "Browser, CSS, CSS3, Design, Reference, R..."
Comments Send by mail Print  Save  Delicious 
Next page
» You can also retrieve older items : Read
» © All content and copyrights belong to their respective authors.«
» © FeedShow - Online RSS Feeds Reader