Fre_entity's Favorite Links on css from Diigo

A Designer's Guide to HTML Email [HTML & XHTML Tutorials]

Fri, 15 Aug 2008 11:10:31 -0000

We hate to love it and we love to hate it, but HTML email is here to stay. Come along for a down 'n' dirty tour of our HTML newsletter redesign process, and learn how we tackled the monster head-on!

Tags: email templates css html best practice

Posted by: fre_entity

Relative font sizes? - SitePoint Forums

Thu, 14 Aug 2008 08:47:47 -0000

Tags: css font font size scaling em

Posted by: fre_entity

The Lightbox Clones Matrix « planetOzh

Wed, 30 Jul 2008 22:35:26 -0000

The Lightbox Clones Matrix

This tool lists a number of javascript scripts designed to embed various objects in HTML pages, such as images, flash animations, movies and iframes.
Comparison of various scripts that display images
and other objects in somehow cool CSS popups

Tags: javascript lightbox css web webdesign

Posted by: fre_entity

emastic - Google Code

Thu, 17 Jul 2008 11:06:07 -0000

Emastic is a CSS Framework, it's continuing mission: to explore a strange new world, to seek out new life and new web spaces, to boldly go where no CSS Framework has gone before.
* Lightweight (compressed weight less then 4kb)
* Personalized width of the page in (em,px,%)
* Use of fixed and fluid columns in the grid.
* Elastic Layout with "em"s

Tags: css framework em fluid flexible

Posted by: fre_entity

Obsessive CSS Code Formatting: Organization, Comments, and Signatures • Perishable Press

Sun, 06 Jul 2008 09:19:50 -0000

Tags: css commenting

Posted by: fre_entity

More CSS Performance Testing (pt 3) by jpsykes

Mon, 23 Jun 2008 16:02:44 -0000

This is now the 3rd part of my current adventures in looking into CSS performance and how it performs in various states across various browsers.

Tags: css performance research results browsers

Posted by: fre_entity

How to get Cross Browser Compatibility Every Time | Anthony Short | Web Design & Development

Fri, 20 Jun 2008 12:12:31 -0000

Cross-browser compatibility is one of the most time consuming tasks for any web designer. We’ve seen many different articles over the net describing common problems and fixes. I’ve collated all the information I could find to create some coding conventions for ensuring that your site will work first time in every browser. There are some things you should consider for Safari and Firefox also, and IE isn’t always the culprit for your CSS woes.

Highlights and Sticky Notes:

Here is a quick summary for those of you who don't want to read the whole article:

Always use strict doctype and standards-compliant HTML/CSS
Always use a reset at the start of your css
Use opacity:0.99 on text elements to clean up rendering in Safari
Never resize images in the CSS or HTML
Check font rendering in every browser. Don't use Lucida
Size text as a % in the body, and as em's throughout
All layout divs that are floated should include display:inline and overflow:hidden
Containers should have overflow:auto and trigger hasLayout via a width or height
Don't use any fancy CSS3 selectors
Don't use transparent PNG's unless you have loaded the alpha

Tags: css compatibility browser reference best practice

Posted by: fre_entity

SitePoint Blogs » In-browser Development Tools: Firebug Still King

Tue, 17 Jun 2008 14:10:37 -0000

At the start of this year, I sat down to write the “Errors and Debugging” chapter of Simply JavaScript. I cracked my fingers, dove into the landscape of JavaScript debugging tools, and emerged very disappointed several hours later. At the time, Firefox was the only browser with a JavaScript debugging tool worth writing about: Firebug.

Less than a year later, the landscape has changed dramatically. Every major browser has introduced new development tools that make it easier to diagnose problems with your HTML, CSS, and JavaScript code right inside the browser in question. But can any of these tools stack up against the slick and effortlessly powerful tools provided by Firebug? Let’s take a look.

Tags: firebug developer tools javascript css IE

Posted by: fre_entity

A List Apart: Articles: Faux Absolute Positioning

Tue, 17 Jun 2008 13:47:21 -0000

There are two popular approaches to positioning with CSS: float and absolute positioning. Both approaches have their pros and cons. My teammates and I have developed a new positioning approach that gives us the best of both worlds. After quite a bit of experimenting and testing, it’s time to share the technique with the rest of the world and see how we can work together to improve it. I’m calling it “faux absolute positioning” after the faux columns technique that simulates the presence of a column.

Tags: css positioning holy grail columns layout

Posted by: fre_entity

Minify CSS/JS ant revisited using YUI compressor | Henke.ws - Failure is not an option (it comes bundled with Windows)

Mon, 16 Jun 2008 11:00:28 -0000

I have revisited adding Yui compressor into my work's ant build script to minify JS and CSS scripts. The current jar was yuicompressor-2.3.5.jar . It took a lot of playing around but I finally stumbled on how to get it to work. Here is the snippet for the yuicompressor. I had to jump through a couple hoops like overriding the current js/css scripts with the optimized js/css scripts. I'll release a full working copy in a zip, you can run against your webroot. We achieved an average 18% compression rate for all our js/css files.

Tags: css js javascript compressing front-end

Posted by: fre_entity

Five Things We Learned Building our iPhone Site | MindBites the Blog

Fri, 06 Jun 2008 11:09:57 -0000

With our shiny new iPhone site ready for public consumption, we thought we’d share some things we learned while building it.

Tags: iphone mobile web webdesign css html

Posted by: fre_entity

Style Switchers Are Back: Ideas, Examples and a Contest | Design Showcase, Events | Smashing Magazine

Fri, 06 Jun 2008 11:01:50 -0000

examples of css styleswitchers

Tags: css styleswitch javascript usability fontsize

Posted by: fre_entity

How to Code HTML Email Newsletters [HTML & XHTML Tutorials]

Wed, 04 Jun 2008 11:33:00 -0000

HTML email newsletters have come a long way in the five years since this article was first published. HTML email is still a very successful communications medium for both publishers and readers. Publishers can track rates for email opens, forwards, and clickthroughs, and thereby can measure reader interest in products and topics; readers are presented with information that's laid out like a web page, in a way that's more visually appealing, and much easier to scan and navigate, than plain text email.

Tags: css email html template xhtml

Posted by: fre_entity

How to serve the right content to mobile browsers - Opera Developer Community

Fri, 30 May 2008 12:03:33 -0000

The modern web is viewed on many different devices, so it is getting increasingly important for us to think about how to create our web sites so that they will serve the right content to users, no matter what device they are using. We have many technologies at our disposal, including media types, media queries, and browser sniffing, but what's the best way to handle this?

Tags: mobile devices mobile web best practice css device related serve

Posted by: fre_entity

Design Reviver » Promote Yourself Through CSS Galleries

Wed, 28 May 2008 15:01:07 -0000

So you’ve spent the last few years developing your skills as a web designer, and now you want to offer your services to other people. Obviously, you need to create a portfolio site, but how do you get your new site in front of thousands of people? The best and easiest way is to get featured on CSS galleries. They are quickly becoming one of the first places professionals look when trying to find talented web designers.

Here are a few tips that will help you get featured and make the best of it:

Tags: css gallery resources traffic portfolio

Posted by: fre_entity

2008 Email Design Guidelines - Campaign Monitor Blog

Wed, 28 May 2008 14:34:56 -0000

As web designers, we’ve grown pretty good at understanding how to create a modern, semantic, accessible website using XHTML and CSS. We understand what makes a good website, and how to make it happen.

When it comes time to design emails though, do all the same rules apply? Are there things we should be doing specifically for email that don’t make sense on a website? In this article we’ll discuss the technical, design and information elements that make up a successful HTML email.

Tags: email best practice guidelines html css

Posted by: fre_entity

CSS Decorative Gallery

Wed, 28 May 2008 03:40:12 -0000

Did you like my previous CSS tutorial on how to create gradient text effects? I’m using the same trick to show you how to decorate your images and photo galleries without editing the source images. The trick is very simple. All you need is an extra <span> tag and apply a background image to create the overlaying effect. It is very easy and flexible — see my demos with over 20 styles, from a simple image icon to a rounded corner to a masked layer (both decorative and complex).

Tags: image frames image gallery css png frame

Posted by: fre_entity

Fluid elastic design : Boagworld web design podcast

Sun, 25 May 2008 17:22:16 -0000

When it comes to planning the layout of your new website there are just three commonly used website layout structures to choose from: Fixed; Fluid & Elastic width layouts. None of these are perfect; each comes with its own advantages and disadvantages.

Tags: css fluid elastic fixed best practice

Posted by: fre_entity

Delivering the right experience to the right device | Filament Group, Inc.

Fri, 16 May 2008 16:43:51 -0000

Inspired by Jeremy Keith's concept of Hijax, we've adopted the practice of coding with progressive enhancement in mind to ensure optimal accessibility, compatibility with multiple browsers and platforms, and ease of maintenance for each site or web application. But how do you do that when so many browsers only partially support javascript and CSS techniques? We met the challenge by developing a script to test the browser's ability to handle modern coding techniques, and ensure a usable experience for all.

Tags: progressive enhancement javascript ajax css browser

Posted by: fre_entity

Introduction to CSS3 - Part 4: User Interface | Design Shack

Wed, 14 May 2008 08:49:45 -0000

This tutorial will be taking a look at some of the new ways you can manipulate user interface features in CSS3. But what do we mean by “user interface”?

CSS3 brings some great new properties relating to resizing elements, cursors, outlining, box layout and more. We’re focusing on three of the most significant user interface enhancements in this tutorial.

The examples shown below can be seen at our CSS3 examples page. Many, however, can only be appreciated in the latest builds of various browsers:

Tags: css css3 resize box-sizing outline

Posted by: fre_entity