VISIT OUR BLOG: 5 BILLION MINUTES

Posts Tagged ‘CSS’



iws

12/03/2010

HTML5 – What We Have To Look Forward To
01:08 pm by iws

HTML 5

If you read design blogs, or tech blogs, you have probably heard or seen examples of HTML 5 already. HTML 5 is what we have to look forward to. There are all kinds of new tags to use, some of which allow us to embed audio and video on websites without having to use technologies such as Flash. There are several other things available, and most of it is just the different markup structure that us developers will be using.

I don’t want to get too far into the technical side of it, but I do want to talk about what it means as far as serving clients. Think about several years ago, when the big thing was full blown Flash websites. We thought this was great, because we could provide an interactive experience for the user – unattainable with only HTML. This was great, except the search engines didn’t know how to crawl a flash site. They see the site as a document (.swf file) and can’t read everything in there. While there were a few workarounds that you could use, most of them were just more work and not ideal.

So how do we get all of that great interaction without Flash? Well, currently with the jQuery library we can do a lot of that stuff with few lines of code. HTML 5 takes it a step further by allowing you to do even more. Microsoft recently put together a project that demonstrates the advantages and features HTML 5 has to offer. The site was built to work best with the new Internet Explorer 9, but if you have the latest Safari (5) then you will be able to see all of the elements working. Chrome and Firefox work, but may not be able to show all of the features. Have a look at the site here (http://www.nevermindthebullets.com/?fbid=VMfzY3n7H4K).

This site really demonstrates what we have to look forward to. No, you likely won’t be building comic strips for your client, but it does point out a lot of cool things you can do. From subtle to obvious, there are some great new features we will start to see being used in modern sites.

No Comments

iws

03/03/2010

How To Easily Use Non-Web Safe Fonts In Your Designs With Cufón
01:23 pm by iws

As a frontend developer, I don’t do much design work. I am usually handed a design and asked to build out the HTML and CSS before handing it off to the backend developer. I’m given the design, open it up in Photoshop, and as I go through and make my edits, I will sometimes notice headlines with fonts that are not safe for the web.

If you use an image to replace those headlines, it hurts the site as far as the SEO goes, right?. Wrong. Using CSS there are plenty of ways to keep the markup for the web crawlers, and the viewer will still see the design with the correct font face. To do this, you just us a simple image replacement technique with CSS, probably ten different ways to do it. These techniques work great, but what happens when your client asks you to change that headline to something else? You have to then go back to Photoshop, edit that piece of text, re-save the image, and then update your CSS with the new image name. Sounds like a lot of work to change one line of text right?

Allow me to introduce my new friend, Cufón. Cufón is a JavaScript library that renders a font file into a script that allows you to replace HTML elements on a page with that specific font file. Pretty slick right? Now when your client asks you to change the text in a headline, you only have to change it in the HTML, instead doing all of that other work!

So, whats the browser compatibility? The good news is that it works in IE6. Need I say more? And, yes the standards too (Firefox, Safari, Chrome). You can see a full list here.

One more note worth pointing out is that if the user has JavaScript turned off for some reason, then they wouldn’t see the pretty font face, but they would still see the heading on the page. So for the next project you get, don’t stress because your designer used non-web safe fonts, go ahead and try it out — it’s easy to implement into any site. You can “see” Cufón in action at The Visual Click, or over at Press75.

Do you have any secrets to add or other pieces of advice? I would love to hear your thoughts.

No Comments