Tips & tools to improve your conceptual web design
As a developer/designer I’m regularly shown designs that have non-standard web fonts, unrealistic font rendering, poor usability, and insanely large spanning background images. While most of the time we cannot come up with ways to work around these design concepts, there are a handful of ways you can cheat the system and make your web designs work a little bit more like a print design.
Here are a few tools I use to pull off some design concepts that you may have thought weren’t possible:
SIFR – Scalable Inman Font Replacement
SIFR stands for Scalable Inman Font Replacment, and has a life savor for me for almost two years now. It’s primary use is to use non-standard web fonts in your dynamic headlines of your site to give it a unique look/feel while still retaining the SEO content of the headlines. I use it extensively on Assault Shirts to retain my SEO headlines, as well as use some cool fonts that I’ve used on product headers and page header descriptions. It’s a bit tricky to setup, but it degrades nicely for users without Flash and/or Javascript enabled.
FLIR – Facelift Image Replacement
Like SIFR, Facelift Image Replacement this will help you get non-standard web fonts in your design by replacing your text with images that have rendered fonts in them. I’m in the process of seeing if I can use this to change over from SIFR because I’ve had some issues with SIFR not working properly when users have Flash disabled.
Gradual Transparency (even with IE6)
There was a day and age where PNG transparency was impossible for older browsers like IE6, but thankfully those days are over. There are numerous transparent PNG hacks around the net that involve some sort of Javascript hack to get transparent PNGs to work. At Assault, we happen to be using the Unit Png Fix. It’s very compact and easy to get working.
You can use transparent GIFs, but as we covered in our web graphic transparency article you’ll find that they’re not nearly as flexible, and they don’t support gradual transparency. The only real drawback that you have to watch out for with transparent PNG files is that they have a tendency to get very large in file size, very quickly.
CSS Text Wrap
One thing I used to hear about quite often at my day job was rags. My background at the time was web only, and rags was not a term I was familiar with. After finding out it had to do with the way words break at the end of a line, I realized that most of my designers had no idea that there was no good way to control line breaking when you’re dealing with web. After explaining to them the reasons not to manually line break, (different browser font rendering, resolution, etc. etc.) most of the time we ended up just blocking off the text in a grid rather than trying to do anything to fancy.
At the time I thought there was no way to easily make text break in various places without doing hard returns or <br />’s. In the case that you want to wrap text around an image you were SOL. Thankfully, this is no longer the case: CSS Text Wrapper is a handy online tool that takes care of wrapping text where you want to and even allows you to wrap it around your own image. Take a look: CSS Text Wrap. The best part is it even writes the HTML/CSS code for you.
CSS Typography
I remember when I was 17 and I only used arial and helvetica. Thankfully, that’s not the case anymore. Here are a couple of delicious bookmarks that I constantly refer to that push the limits of CSS and Typography:
- 8 fonts you probably don’t use in CSS, but should
- CSS Type, Browse Web Type, Grab CSS Code
- Type Tester Compare Fonts for the Screen
- CSS Typeset
CSS Resizeable Background Image
This hasn’t yet come up in any of my design concepts because sometimes a gigantic background image can be circumvented with some skillful clone tool stamping and tile-able background image placement with CSS, but in case you need it there is a way to make your background image be scalable for small and large sized browser windows.
CSS Resizeable Background Image
Some Thoughts
My theory is that while print designers are good at what they do, they more than likely were not schooled at things like usability and cross browser display issues while in graphic design school. I know that I personally used to spend at least one weekend every semester helping a senior graphic design student because they had no idea how different of a medium web design was and couldn’t get their designs to look the way they wanted.
I think Paul Boag, of The Boagworld Podcast, summed it up very nicely:
Print designers just don’t have a grasp of the technological constraints on the web. The limited number of fonts, the layout restrictions of content management systems, the quirks of different browsers (in rendering HTML & CSS), the list could go on. Understanding your medium is vital to creating a successful design.
As someone who is both a developer and a designer, I like to be able to push my designs to the limits of what you can do with the current tools we have available. When I have design concepts brought to me in my day job I like to be able to say, “Yes we can use a tile-able background to give our site some texture,” or, “Yea we can have some transparent floral shapes on top of our gradients,” or “Sure we can use Benton Sans as our header font.”
Did I miss something?
If you have something I may have missed, please post it in the comments, or contact me via email or twitter. I can always use a few more bookmarks (Currently, I have 1600!)
Like this post? Bookmark it!
Email to a friend
Your message has been sent!
Please enter a valid email.
Your email failed. Try again later.
Most Commented Posts
Most Popular3
About the Author
Tim is the co-owner of Assault, and tends to think he can party twice as hard as anyone. Follow him on twitter @assault Email this Author | All posts by tim
[...] Tips amp; tools to improve your conceptual web design » Assault Blog [...]
thank you for helpful tips..
[...] Tips & tools to improve your conceptual web design » Assault Blog [...]
[...] Tips & tools to improve your conceptual web design » Assault Blog [...]
had been looking for a post like this. thank you
The resizable background is a good idea? I’m still trying to work out if a different looking site is a good thing…
Tips & tools to improve your conceptual web design…
Tips & tools to improve your conceptual web design…
FLIR doesn’t really work though unless you have the latest browsers