enavu webdevmania tutsvalley psdestination
visit the enavu network
4 Comments Article Title Overlay

Coding/Slicing Websites using Images vs. CSS3 & HTML5

With the upcoming uses of CSS3 allowing you to forgo the usual image slicing for a much nicer cleaner way of accomplishing the same thing once wonders what to use CSS for and what to do with images.
I have said this before and i feel i should keep repeating it, you should always spend time [...]

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

With the upcoming uses of CSS3 allowing you to forgo the usual image slicing for a much nicer cleaner way of accomplishing the same thing once wonders what to use CSS for and what to do with images.

I have said this before and i feel i should keep repeating it, you should always spend time to learn more about your visitors. This means what browser they use, what is their resolution, and even what operating system they are using. Well there are quite a few more things to be known of your visitors behavior but for today’s article we will try and go over the things that matter when evaluating whether to use CSS or a sliced image.

For this blog i have used various CSS3 techniques instead of spending loads of time on slicing my initial photoshop design, why was I able to do this? Well simply because a web development blog has 60% Firefox (95% of those use the newest 3.6.x version) then another 20% goes to chrome, and the rest is distributed to IE, Safari, and of course Opera. What this means is that 90% of our users will see the website exactly as intended, and the rest will see a very slightly different version which looks great. The other great benefit to this is much faster load times, less graphics is always a benefit to a high traffic web development blog, or to really any website with 100k+ page views. Here is the difference between IE and Firefox:

comparing ie to ff

The tricky part comes when you have to be careful and distinguish functionality with appearance. You should never ignore functionality when using advanced CSS techniques to accomplish certain effects. As a web developer you already know to test your websites in most modern browsers, personally i test on IE7/IE8, Firefox, Chrome, and Opera. But never let functionality struggle because you wanted to save time slicing your design. Things like Rounded Corners, Drop Shadows, and other styling techniques are usually a safe bet of things being only different visually. Text-Shadow can cause text to appear harder to read when the browser does not support text-shadows.

Using HTML5 is awesome, it allows you to create websites with a lot of bells and whistles with little to no effort. However things like HTML5 validation do not work in all browsers so you need to make sure you have a back-up. I have created an HTML5 CSS3 framework that has a lot of cool features that are okay to use with all browsers. Check it out 52framework.

In conclusion I strongly suggest and support web developers to try using the new technologies that make our lives easier as long as you have made sure that it does not cripple your websites.

Checkout the following websites to help you use these amazing technologies:

52framework.com
css3generator.com
modernizr.com

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

Related posts:

  1. First ever HTML5 CSS3 framework – 52framework
  2. Web Development in the Year 2010
  3. Why you must have Creative Suite 5.5
  4. Mobile Devices and Websites in the year 2009
  5. Mock Design Slice HTML CSS JavaScript – Modern Approach to Creating Websites

Did you absolutely LOVE this article... share it!

Comments

  • Nice point, html5 is awesome! And CSS 3 bring the style to another level with cool features!

    Thanks for share your knowledgment!

    Your framework is very usefull!!!! Thanks for that too.

  • Thanks Carlos, glad you liked it!

Leave your own!

Sponsors

freedcamp free project management

Popular Articles

fzilla file hosting