jump to navigation

Keeping Up With CSS 21 April 2010

Posted by ssglazer in Design, Development, Resources.
Tags: , , , , , , ,
trackback

CSS has been a great change for website developers all over.  It was like a giant crowd jumping up for joy when the existence of tables no longer made up the code for websites. Many websites today still use the clunky tables to form the website layouts but they are easily recognizable as outdated.  Not to mention that they are slow in loading and not very good when it comes to SEO.

Table WebsiteEXAMPLE OF TABLE DESIGN

This is your basic example of a website using tables for their layout.  Although, it is easy to design a website with a tables, probably much easier than a CSS designed website, but you are limiting your website and its web 2.0 functionality.

So, we have all discovered the usefulness of CSS and the importance of making websites fast, interactive and above all a good source of SEO.  But why are the browser capabilities not keeping up with the advances of CSS?  Well, CSS is like a giant beauracracy where everyone wants their style of code to function the way they believe it to function and no one can agree on one way.  It is terribly annoying for web developers trying to make their code work seamlessly across all browsers, not even including mobile browsers.

As people are learning CSS and its quirks, I have compiled my favorite quirks of CSS that are extremely important to design, functionality, and most importantly trends.  Those little quirks that browsers can’t seem to keep up with as Web 3.0 is next in line to proceed.  Ways and alternate ideas to design out of the box websites to keep up with the trends.

TYPOGRAPHY

Fonts are one of the most complicated part to incorporate into your website.  Stemming from print design myself, I found it very frustrating to not have an easy way to build a website with more font choices.  Most browsers only read a few standard or “safe” fonts such as Helvetica, Times, Arial, Geneva, Verdana, and maybe a few extras.  I want more than just those options.  Web 2.0 was already expiramenting with larger headers, magazine style fonts that just don’t comply with browsers.

“Fonts are meant to be explored, twisted, and molded to fit your purposes.”
– smashing magazine

CSS TypographySo, how does CSS fit into this scenario?  Well, the problem that arises is that in order to incorporate these stylish fonts as headers, quotes, logos, etc… then we must use images instead of static text to display this typography.  This can get clunky and not very easy to update.  Each time a header needs to be changed, then a new image must be created.  Very annoying.  For both the client, and web developer.  In addition, image text does not make a dynamic site, nor does the images come across the same over every browser.  Pixel degration can happen, which just gives the once beautiful typography look very messy.

There are a few options, although not all web browsers can keep up with them so you might have to sacrifice some older browser versions.  But then, people using older browsers probably are not your target audience.

sIFR

This is a combination of flash and javascript that can also be used in wordpress themes.  With this download, you can make sure that your texts headers show up crisp and beautifully in their natural state.  The problem that arises here is that visitors must have flash installed.  This also gives complications to any possibility of text showing up on iphones.  This to me doesn’t always work out so well.  Even though I love to incorporate flash into elements of websites, I don’t really recommend using text that needs assistance of flash because text is so very very important.  Their download process is relatively easy.

“Thousands of typefaces exist simply because they are demanded and supplied, supplied and consumed.”  – I love typography

FLIR (Facelift Image Replacement)

Another download and pretty easy solution to implement into websites.  It only uses php and javascript, which makes visitors with all types of browsers have the capability to view this dynamic text.  It can render a little differently for very textured fonts, but for the most part have found no problem in using this application.  The easiest download explanation is the link below…

http://net.tutsplus.com/javascript-ajax/how-to-use-any-font-you-wish-with-flir/

OUT OF THE BOX BORDERS

Rounded corners, rough edges, shadows, transparent corners and much more that gives boxes a fresh look in websites.  Not just your standard square boxes that float your content in websites.  Web designers have begun to think outside of the box, and CSS is trying to keep up with those demands. Unfortunately, browsers haven’t kept up with the new CSS styles to incorporate those box changes but there are some tricks that can make this change happen somewhat smoothly.

Corners in CSSSince there are too many to really delve into, I thought I would give this link that has about 25 corner techniques to make your website more design savvy.  Not all the CSS code works with all browsers.  Shocker!  As a developer, you will have to decide what technique will work best for you.

http://www.devwebpro.com/25-rounded-corners-techniques-with-css/

For now, I guess we will just have to keep stretching the endless limits of CSS.  This is what made the technique so innovative; its fathomless possibilities.  In the end of the day, web developers will have to take what they can with browsers trying to keep up with CSS. Someday soon there will be a crossing of paths between the CSS code and what browsers would like to determine what that code looks like.  I still have hope.

About these ads

Comments»

No comments yet — be the first.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: