Coding a Web Design for Speed and Quality

The beauty of being a web designer is creating a detailed, creative, and original web design in Photoshop, without having to (for the most part) think about how it will be coded.

During the design phase, it’s all about the look, and either the coding can be taken care of later, or be outsourced to a developer.

Either way, not thinking about the development usability or functionality is a great way for a designer to not feel limited in the design process.

This is a great way of thinking, and can lead to the best designs. However, once it does need to be coded, we as designers are in a tricky spot.

In this article, you’ll find a few simple tips that can help designers learn basic XHTML/CSS conversion efficiently for a quick-loading website that is accurate to the original PSD.

We either must slice and code the designs ourselves, or turn away part of our profits to an outsourcing PSD to XHTML/CSS company or developer. As primarily designers, the second option is usually the best choice for the client, because it will provide the best results.

Sometimes though, as with smaller projects or otherwise, we need to code a website ourselves. Whatever the reason, it shouldn’t be a fall-back, or something that takes up too much time.


Doing it Yourself vs. Outsourcing

This article is more targeted towards web designers, although hopefully those who are developers can take something away from it too. Focusing back onto the designers, though, it is common for many web designers not to like to code websites. We like to design. There are a few exceptions, but for the most part this is the attitude towards it.

Many designers have discovered the benefit of outsourcing: pay an outside company to slice and code your design, get it back in a few days, and save yourself the time and effort of doing it yourself.

If one is not experienced with coding a website efficiently enough, spending too much time on it may not be worth what you’ll be getting paid for on a project.

For example, if an inexperienced coder were to spend several hours trying to figure out how to code a design they just created, their time spent can easily be worth more than what it costs to just simply outsource the job.

Also, charging the client for the outsourcing work instead of your own labor can be cost effective for them, as well as time effective for yourself. (Oh, and you’ll be helping out the development community by giving them a bit of business too!)

There comes a time in every designer’s career, though, where it is just not practical to outsource a job. A few examples would be:

  • You’re just not at a strong financial point.
    Especially for freelancers, strong financial months come and go. If you’re a bit low in the bank, it may not be the best option to spend $150 or so on outsourcing, when you could be paid the bit of extra for doing the work yourself. While the client would make up for the payment to the outsourcer as part of the project payment, that’s just making your finances break even for the development portion of the website. By doing it yourself, it’s that much more work, but it’s also that much more money in your pocket.
  • It’s a small project.
    Is the project under $1000? Is having over 1/10 of the project’s budget not go directly to you worth it? If outsourcing the coding portion too large of a percentage of the project, it is probably more practical to just have it done yourself. Also, smaller projects are likely simpler, so it doesn’t necessarily have to take a lot of time.
  • When it needs special customer service or customization.
    Some projects just need a bit more customer care, from you, the designer. Depending on both the client and the project, it may be best to break down the slicing and coding portion into more manageable pieces, with some pieces being variable upon the client’s opinion throughout the process. In any situation where you, the designer, would have to keep altering the code to fit the client’s needs after the initial website is coded, it is probably best to do the entire thing yourself.

So it is up to you based on each project, each client, and each set of circumstances to decide whether to outsource the coding portion or not.

As a benefit to outsourcing, experienced coders can create an identical coded version to your PSD design, while maintaining loading speed and usability.

If you are in the situation where you are having/wanting to slice and code a website yourself, here are some general tips to 1) save you time so you don’t have to work for $2/hr and 2) provide better results for your client, as an experienced developer would, while still saving the outsourcing costs.


1. Slice Effectively

Photoshop and Fireworks come with a built-in slicing tool that allows a designer to code a website directly into HTML. However, even modern versions of these pieces of software create table-based markup. This is not very useful for the modern web designer, of course.

That is why development and website coding is a separate practice that takes its own talent and experience. All web designs need some hand coding and a thought process behind it. No software can do it all for you.

Still, the slice tool in Photoshop and Fireworks can be put to good use for the development portion of the web design. The point is to know how to use the slice tool effectively.

Instead of delving into an entire slicing and coding tutorial here, a great tutorial over on nettuts+ can help many out: “Slice and Dice that PSD.” It goes over the basic thought processes, as well as the technical how-to, for slicing a web design the modern and correct way — while using the traditional slice tool.

It is in a chronological order, with different screencasts for each phase of the development process, as well as useful links to similar and additional screencasts.

Slice Effectively

The first step is to view these tutorials, and to take the most important points from them: know what images to slice, how to optimize those images for the balance of quality and speed, and what elements of your PSD should be plain XHTML and CSS.

Just watching a more experienced developer’s process and explanation can help a designer with little slicing and coding experience witness a process that is more efficient.


2. Simplify CSS

Sometimes, the first way one figures out how to use CSS to achieve a certain effect is not the best way to do it. If you find yourself creating too many custom classes, or complicated tactics otherwise, to achieve one effect, think of an alternative way to do it more efficiently.

For the most part, this comes with experience. The more you code a website and discover new techniques, the easier using CSS effectively will get.

For beginner’s ways on simplifying CSS, check out Woork’s article on “Top-Down approach to simplify your CSS code“.

The article shares tips on the balance of using CSS to create the basic wireframe and specific styling, how to reuse preset HTML elements effectively, and when it is appropriate to create your own classes or ID’s.

Simple CSS


3. Use CSS Shorthand and Minimize HTML Markup

The smaller a file size is, the quicker it is to load, and it’s as simple as that. Using CSS shorthand and minimizing the length of XHTML markup by reusing elements is a great way to do this.

Coding an entire website has to be a balance of markup and styling that markup with CSS. Markup should be used for structure and CSS should be used for styling, so a great way to find that balance is to keep this in mind.

Other than this, the practice requires just understanding the technicalities of CSS shorthand, as well as gaining experience.

Check out a few of the tutorials below for mastering CSS shorthand:

CSS Shorthand

Also removing unnecessary whitespace can help the loading speed of markup and CSS files. Just like with a minimized JavaScript file (such as jquery.min.js), smaller files will make loading time more efficient, allowing the processor to read them more quickly.

As with CSS and markup, though, it’s not practical to remove all whitespace for editing and management purposes.

Instead, get into a practice of indenting and using line breaks only when necessary. Also remove any comments within the markup and stylesheet that are not necessary to the maintenance of the website.


4. Smush.it

Use a tool like Yahoo’s Smush.it to crunch any images even further. A tool like this uses a compression algorithm that reduces the file size significantly, without sacrificing image quality. An average of around 40% reduction of all images can make for a huge difference in the loading time of a website.

Just simply load any images for the website, after they’ve been optimized originally in Photoshop, into the Smush.it application. It will give you a new list of images for download, explaining how much space was saved, and how.

Smush.it


5. Pay Attention to CSS & Markup Order

Having the structural elements before the content elements, or the blockquote style before the paragraph style will not make a stylesheet load any quicker. However, a stylesheet does load in the order it is presented in the stylesheet, so one can use that to make a website ‘appear’ as though it is loading faster.

For example, if in a stylesheet, all of the content, images, and text styling were first defined, these elements would load before any backgrounds, structural elements, or design imagery were loaded.

Because of this, it appears as though the web design is loading slightly slower than if we saw the background and structure first.

With structure and main imagery first, the viewer has something to focus on for those seconds where content is still loading.


6. Know When to Use Client-Side or Server-Side Scripting

For basic projects, web designers probably won’t be getting into too much programming. However, some scripting may be required for a simple contact form or for special navigation effects.

Whatever it is for, two types of scripting languages can be used: client-side (where the scripting language runs on the user’s browser), or server-side (the scripting language runs on the server).

Scripting

JavaScript, and any library under it, is the most common client-side scripting language. Because it runs locally on the user’s browser, it does not have to run all the way to the server to do its processing, therefore making it faster. Server-side scripting is slightly slower, but runs just fine in small doses and when used appropriately.

Use server-side scripting for anything that requires a database, or anything that is necessary to the website’s purpose. Since a user can disable JavaScript, but can’t disable a server-side language, server-side scripting is safe to use for any website necessities.

For example, a contact form, although it’s light and may not require a database, is best used with a server-side language because it is still accessible for someone with JavaScript disabled.

Overall, most websites that require any additional scripting should have a balance of both. Some smaller websites may only need one or the other, but it is important not to just use one for the sake of it. Know when, and why, to use each.


7. Last but Not Least, Validate

This is obvious to most of us, but as with any article like this, it must be said: throughout the process of coding, and when everything is said and done, validate CSS and XHTML code.

We all know the benefits of validation, in that it can make various browsers render similarly, make web pages load faster, and is a general error checker for semantic code.

Validate

An additional benefit to going through this process, though, is to explore new techniques for handling CSS code and markup.

If you’ve implemented a certain effect into a web design that doesn’t validate or gives a warning, chances are W3 has a reason for this. These are great moments for researching other options to create the same effect, but in a better, more validated way.


Wrapping Up

Some designers fear that they must sacrifice quality in the imagery of the design when coding to XHTML/CSS in order to make a fast-loading website — but that’s just not true.

There are many ways to code intelligently that can create for a user-friendly, fast-loading website that meets a designer’s quality. Using these tips can help, but there are many more things to learn.

Remember, if you are an inexperienced slicer and coder, it may be slow-going at first, especially when still in the learning process. We may know XHTML and CSS, but it is an entirely different skill to learn how to do it effectively. Just as we had to when learning design, we must learn how to code beautifully as well.


Written exclusively for WDD by Kayla Knight.

These are generalized tips, so be sure to share any additional tips for the practice of slicing a design and coding it, especially from a designer’s perspective.


0 shares
  • http://designinformer.com Design Informer

    Nice article. I am pretty slow at coding and this article will definitely help.

    • http://designinformer.com Design Informer

      LOL. I meant to say that the sites that I code get really slow sometimes due to lots of images, and this article should really help. Smush.it is cool, but I liked it better before it was part of Yslow.

    • http://www.tvcriticas.com cah_bagoes

      yupz.. this is so nicely read.

  • http://www.mgitsolutions.com/blog/ Mike

    Walter, great summary from a designer’s perspective. I’d like to add and emphasize though, that Design phase is not only ‘about look’, it’s about designing the app functionally first, visually second (form follows function) – but sure enough the ideal would be that they go hand in hand :D

  • http://www.vectornpixel.com Asim Craft

    Love the article. I like outsourcing my programming sometimes when i have various of projects going on. And even designing the wireframe and giving it to a close designer helps out with a lot of time for various of things.

  • http://webitect.net Kayla

    Mike — of course, the design phase is not literally just about the look. I just meant to emphasize that one should not be thinking of how the code will work during the design phase, as to not limit the designer from their own creativity. Very great and well mentioned point.

  • http://www.webgrafismo.com Pedro

    Well, i just wan’t to say that even with 3 years of XHTML/CSS coding, i always discover at least one new technique in CSS when i start a new work. Experience really makes the perfection in this area… Pretty sad is that W3C and Microsoft continues to avoid CSS3, which makes all the articles in the internet about this, somewhat useless. Excellence article. Read it all

    • http://twitter.com/gilbeRt_fox Gilberto Ramos

      I agree! You’re right dude!

  • http://www.nixadmins.net Mats Hellman

    Really nice article. I just found webdesignerdepot and I must say you really have high quality posts. Thanks again, interesting reading.

  • http://floodlightdesign.com Joe

    While this may be good for the simplest of websites, 95% of present day sites are built on content management systems. As a designer, you should be charging your clients for what you’re best at (conceptual) and let your developer handle the technical work. You can even mark up the developer’s rates for finding them. The best websites are created when a super conceptual designer works with a tech-savy developer.

  • http://tr.im/mewC Rahul – Web Guru

    Really well written article and very good points pointed out. Really good for any professional developer or a newbie too.

  • jimkakain

    Thank you, very good article.

  • http://www.nopun.com Noel Wiggins

    short hand code is stil a mystery to me, its very difficult for me to grasp, how to control a lot of these things.

    like padding left

    padding top

    etc

    padding: ??,??,???

    but other than that I think I am on the right path

    Thanks and Regards

    Noel

    • http://twitter.com/me_arno Arno

      Noel,

      padding: top right bottom left;

      • Violet

        Works with margin as well. Place a sticky note somewhere just T R B L and give it a few weeks and you’ll have memorized it.

        Also, when you only see 2 numbers, it’s for top/bottom, left/right. SO let’s say you had

        Padding: 10px 5px 10px 5px;
        it could be written:

        Padding: 10px 5px;

        font is: style weight size/line-height family;

        so font: italic bold 0.9em/1.3em Arial;

        would be an italic and bold 0.9em sized font with a 1.3em line-height and Arial font.

    • http://www.datamouse.biz DataMouse

      Padding (and Margin) can be defined as Arno has said:

      padding: 5px 10px 5px 10px;

      gives 5px top and bottom, and 10px left and right.

      However, you can shorten further if your top and bottom, and left and right are equal (as in the above example):

      padding: 5px 10px;

      would do this.

      If there are only two arguments (numbers), then the first is the top AND the bottom. The second iis left AND right.

      padding: 10px;

      would make all edges 10px padding (T, R, B, L)

      Hope this helps.

      DM

    • http://lenss.nl Lana

      Hello Noel,

      Then I recommend you this website http://www.positioniseverything.net/
      and couple of Erik Meyer on CSS books (and/or Zen Garden CSS). Very helpfull books.

      Kind regards,
      Lana

    • Rebecca

      By far the easiest thing you can do is think cardinal points… North, East, South, West.

      When you declare just two, you are calling each pair: North-South, East-West

      CSS Tricks has this AMAZING video where Chris Coiyer tests all things and tells you what to avoid. Go watch that screencast :D

  • http://tutsarena.com/ TutsArena

    Re: client-side vs server-side.

    Don’t forget about security. If your application needs to process anything even semi-sensitive — such as logins, submissions and so on — it has to be done on the server. You can’t manage anything sensitive on the client, period. Also, you cannot trust anything that comes from the client side, it has to be validated on the server.

    If you do, sooner or later you will have issues with bad guys abusing your app one way or another.

  • http://www,studiodm.net Dave Morgan

    Excellent Article. I like the fact that you list ASP as a server side language alternative. I’m a classic ASPer and love it.

    Per NOEL’s comment:

    CSS shorthand….easy way to remember:
    padding:2px 3px 4px 5px try remembering it this way

    top is 2 px
    right is 3 px
    bottom is 4 px
    left is 5 px

    Padding:top right bottom left
    padding:12oclock 3oclock 6oclock 9oclock

    Like a CLOCK going clockwise!!

    • http://www.studiodm.net Dave Morgan

      Just remember:

      Padding:top right bottom left

      Remember to clockwise when writing your padding style.
      Same for margin

      margin::top right bottom left

      Didn’t mean to complicate it on previous comment.

  • http://twistedclip.com/ Tony

    Loved this article! This is very helpful.

  • http://www.studiodm.net Dave Morgan

    Just remember:

    Padding:top right bottom left

    Remember to clockwise when writing your padding style.
    Same for margin

    margin:top right bottom left

    Didn’t mean to complicate it on previous comment.

    • http://www.creativeindividual.co.uk Laura

      LOL yeah I knew what you were talking about and even I was confused! ;)
      But it all came good in the end =D

    • Russ

      Haha I’m pretty sure anyone will remember now Dave ;)

  • http://tech.gtaero.net/ Navarr

    Good helpful article, but slicing is outdated and really should go die in a corner.

    It’s easier for both the developer and the coder most of the time to create LAYERED websites instead of sliced websites. Why cut something up when you can layer a piece on top of another?

    • http://www.creativeindividual.co.uk Laura

      I agree. Lots of small images to load instead of a few big ones. All part of the web optimisation. Very good point Navarr.

    • Russ

      I still slice my images today. It’s a good way to cut out multiple images all in one go without worrying about dimensions and whether it all comes together.

      Of course, this all goes into my own markup – I don’t agree that it is outdated if used this way.

    • http://www.mindwarpentertainment.com Octavio Corral

      All of you are completely out of date. its not about slicing or lots of small images or layered images, its about the CSS Sprites technique. Actively arranging all of your images into one large optimized images to minimize the number of server requests. Only then do you achieve highest speed.

  • http://fwebde.com/ Eric B.

    Excellent post!

    Except I think that server-side scripting might be faster than client-side scripting, because the entire client-side script has to be sent over to the user, while a server-side script is processed by the server’s CPU, and then only the output is sent to the user.

  • http://www.webdesignexpert.me WebDesignExpert.Me

    Great post, I linked to it from my blog, for the ‘validation’ purpose you could use totalvalidator.com, a service that validates xhtml,css etc. in one go.

  • http://creativeaddict.co.za Lisa

    I just read the intro to this article and already disagreed… maybe it’s just me, but I *always* design with coding (and SEO) in mind. I think it would be dumb to do otherwise… I understand there are designers who don’t build and that’s different.

  • http://magentoua.wordpress.com Magentoua

    Great post!
    Thanks for good stuff! WDD Rocks!

  • http://www.redesignyourbiz.com/ Web Designer

    am a web designer from mumbai and i do the coding myself. i really enjoy learning new things and also saving money by doing the coding.

    and i tell you sincerely, coding is not that tough. now i have become good at CSS as well. would love to learn PHP now :)

  • http://www.jannis-gerlinger.de Jannis Gerlinger

    Great, it helps really for faster coding.

  • http://www.skix.pl SkiX

    Great post! THX for Yahoo’s Smush.it tool

  • http://www.creativeindividual.co.uk Laura

    I must be one of the few designers who love coding up the site after the design has been finalised. In fact I much prefer it over outsourcing (not that I have much experience with this really) because I can ensure that the coded site is EXACTLY like my visual files, or even better if I spot something that I can improve upon when coding.

    Plus I have more control over cross-browser compatibility too. And checking in different versions of our evil standard-resisting friend, bloody IE!

    Rather that finding the coding aspect a restraint in the design process, I find it helps me a lot with functionality, because I have a much better understanding of what can be done, and what is… a little more difficult to do.

    Plus you miss out on other areas too if your not willing to dabble in code, like .htaccess files and prettifying URLs, and customising error pages.

    The list really could go on!

    Nice article too Kayla, thank you for this :)

  • http://www.carlstratton.co.uk carl stratton

    Decent post, didn;t know about smush.it, definitely interested so what difference it can make afer save for web in ps. nice one.

  • http://www.pickelwebdesign.com Jordy Pickel

    This is a good article for getting into the mindset of a graphic designer, and using the limitless options Photoshop brings to the internet. However, it really is imperitive to design with usability and functionality in mind. Some of the nicest looking websites could are built in a confusing manner and fail to market what they’re trying to sell.

    Web sites really need to have an equal focus on design, usability, and content. Just like a print artist would analyze their graphic layout so that the right attention is drawn to the right items, web designers need to consider what layout and text tactics they need to use in order to achieve the website’s overall goals.

  • http://flexdiary.blogspot.com amy

    One reason that you didn’t mention for learning to code the piece yourself is so that you can learn to provide designs that CAN be coded efficiently.

    I am both a designer and a developer, but I have been called on to implement the designs of someone who had no clue how to design areas that, for example, could be made to stretch vertically as the shape of the content changed. So the constant rounds of “make it larger, now make it smaller, now make it larger…” were excruciatingly painful for everyone concerned.

    There are some visual designs that have no place in a website, and a designer who has _never_ coded probably has no idea what those are.

  • http://www.aledesign.it aledesign.it

    An use of css and especially a good basic knowledge of HTML, can help a lot. Lately I have noticed as Photoshop and Fireworks can interact together. The validation with the W3C, however, leaves me somewhat perplexed. Our study to certain customers do not care much, and therefore also the cost. However a nice post.

  • Brian Jones

    Nice read – thanks for the resources

  • http://www.smashingshare.com/ Waheed Akhtar

    Excellent article. Love to do XHTML/CSS myself :)

  • http://www.twitter.com/_mark _mark

    It’s crucial that designers who code themselves take care of it so they don’t leave a mess for a future developer to clean up or more often have to completely redo it. Semi Compressed External CSS Sheets are very important as well as absolute and relative xhtml div nesting placements.

  • http://www.mvestormedia.com/ Mvestor Media

    Thank you for the tips and tricks. I especially like the slice tools in PS. It makes things completely easier especially in header sections w/ logos.

  • http://avanzaweb.net avanzaweb

    I dont knowed anything about smush it. I must probe it

  • http://www.jaaprood.nl Jaap Rood

    Cool article about some principles every webdesigner should follow. Many topics have more hooks and strings attached to it though. Like client side being faster then server side. This ofcourse totally depends on what your doing, and a big factor is security concerns as well. With the new Android phone, loads of stuff happens server side because the servers are way more powerfull, so server side is way faster. It’s cool to read into stuff like this

  • http://www.orphicpixel.com Mars

    again, its a perfect article for all of us, thanks for this

  • http://premiumthemeclub.com/ Premium Theme Club

    perfect way to slice the design,Great post and basic reminder

  • http://themeforest.net?ref=bonocl NinjaCrunch

    Nice post. Will be trying out Smush.it

    Thanks a lot.

    cheers!

  • http://www.thewebsitedesigncompany.co.za Herman

    Hi Walter, Love the Smush it tool.. its really reduced my sites loading time.. Thanks!

  • http://www.charlotteswebstudios.com Web Design Company

    If you don’t know how to code something in addition to creating a great design and layout, you aren’t a web designer. You are simply trying to design something you know nothing about – and that is a very bad thing. A website is a complete package & each part must work efficiently and effectively together.

  • http://twitter.com/rmetzler Richard Metzler

    if you want to load your page really quickly you should use CSS Sprites. Compare the pictures on any Google search result with this http://www.google.com/images/nav_logo7.png and you will know what CSS Sprites is about. Instead of doing 1 http-request for every little picture, you request all in 1 png and display accordingly.

    It is hard to do that by hand, but there is a tool for doing it for you: http://spriteme.org/

  • http://www.underworldmagazines.com Julio A Rivera

    Thanks for posting this because try to learn alittle more coding now mostly html tables but every thing is moving to css now so im going to take a class on it. So great post!

  • http://www.pixmac.com Vitezslav Valka

    Well, this is something we’re thinking of at Pixmac. We’re doing a new code and we’re optimising it as much as we can.

  • http://zinecreative.com Zine Creative

    awesome and detailed post! thank you!

  • http://www.sonnydesign.com web designer philippines

    Outsourcing is the best way to speed up the process lots of companies in the US do it. They look for outsourcing company in the Philippines or India and they can save time and money

  • http://www.honeytechblog.com Honey Singh

    Very well written but i would highly recommend to include a point describing how to optimise loading time with the help of less images, css sprites , compressed css and compressed javascripts.

    I would also recommend to use this analysis for better results http://www.websiteoptimization.com/services/analyze/

  • http://www.think365.co.uk Web Design Worthing

    Thank you for your post Kayla.
    Everyday is a learning opportunity: picking up new tips of information to improve working and coding practice. Will be trying out Smush.it and CSS structural stylesheet loading order for sure.
    Regards.

  • RoaldA

    Have to learn coding! :(

  • http://www.imagingdesk.com Imagingdesk

    You catched my dream!

  • http://www.spencersy.com/ spencer sy

    Great article! √ery organized and concise, easy to grasp for web designers, graphic designers, developers. I like all parts from photoshop designing, html and css coding up to the W3C topic. Hope to read more learning articles like this at WDD! Thank you.

  • http://www.chotrul.com/ Mark Carter

    I was just reading through some of the comments above … and one of them made me laugh. My colleagues at work think I’ve gone completely mad as I’m always muttering “top, right, bottom, left” to myself! Almost like a mantra!

  • http://www.atozsolution.com website design New York City

    nice collection

  • Ben

    i find http://www.gracepointafterfive.com/punypng to be better than Smush

  • http://designintheraw.com Roy Ho

    Nice article, however in terms of CSS validation, I know tons of websites that will not validate on CSS including my own simply because many of us are experimenting with CSS3 elements and properties. Even if you were to set the validation to CSS3, it still would fail because we’re using vendor specific prefixes “-moz-“..etc. I guess with time, eventually all browsers with support CSS3 and stylesheets would get validated…

  • http://edmund.haselwanter.com Edmund Haselwanter

    nice writeup

  • pesho

    Useful topic
    thanks

  • http://www.2expertsdesign.com 2expertsDesign

    Really good for any professional developer or a newbie too.

  • http://truehealthcare.info/ reezluv

    really nice article about web design. I like it so much.I am new in web design.Still learning..this is valuable info for me.

    thanks

  • http://www.webdesignpune.net Web Design Pune

    Really informative, if we do proper html coding then site can open fast.
    thanks

  • http://angelobeltran.com/blog Angelo Beltran

    Thank you for reminding us to validate. Not too many designers bother doing it but there are many benefits as you have already mentioned that isn’t realized.

    I love Yahoo’s SMUSH.IT. I tried it on a background image on one of my client’s sites and it reduced the file size by 20%!

  • Peter

    Useful writeup! Thanks!

  • http://benex.com.ar Bene

    Most of the most famous web-design blogs throws invalid Xhtml on the Validator. This is something to be worried about?.

    Anyway, good tut, I am frankly most a coder than a designer, but I am improving my design skills. Tyvm for the post.

  • http://www.studentbrands.co.za Student Brands

    Thanks for the great info, hope to use it soon

  • http://pceasies.com pceasies

    I find it veru helpful to make multiple style sheets, especially navigation where you’ll have a lot of coding. Also very accurate selectors make it a lot easier to identify and will only control very specific aspects instead of changing a lot.

    div ul li .nav { is a lot better than just .nav

    it also helps you look at the structure and see exactly what it is targeting. Also, newer versions of Dreamweaver are very helpful with live view. It basically is like a browser view inside Dreamweaver.

    http://punypng.com

    Works a lot better than smush.it. Smushit is a lot harder to use since they integrated it with Yahoo. PunyPNG has slightly better results and is easier to upload images too.

  • http://www.inkatechnology.co.uk/web-design-development-london.php Web Design London

    Great summary of the fundamentals Henry. Really well written and a great starting point for any design.

  • http://www.squiders.com Web Design Maidstone

    A well written and informative post

  • http://www.rossmcnaughton.com Rosti The Snowman

    Great Post!

  • http://www.adslviettel.com viettel vt

    If you’re using wordpress you can try html tidy to remove all of the waste space from the html output

  • http://jordankoschei.com Jordan Koschei

    Clean coding is a must. Getting rid of comments and whitespace is great for optimizing a site, but remember that it makes them much more difficult to maintain.

  • http://www.thedindigulonline.com Elijah

    Great idea ! Thanks Lot

  • http://www.mentescirakoglu.com web developer

    good infotmation

  • http://www.mushroomdigital.co.uk website designers

    Didn’t know about smush.it. Really good article. Brilliant!

  • http://www.jeffwoodruff.net Jeff Woodruff

    I’ve been trying to find some articles about the best way to improve the speed of my design loading. Great article.

  • Don

    Thanks,fabulous!

  • http://www.webtechwise.com/ Omer

    Useful tips!

    Deciding between server side vs client side scripting is especially important because many developers tend to go with client side (javascript) when they are unsure.
    This may have a huge effect on website performance.

    Also worth mentioning the position of css (should be at the top of HTML) and javascript should be in the footer.

  • http://www.thewebhostingdir.com/vps-hosting-plans/ Poonit Patel

    Very good article…….I m more on designing and less on coding bt i think this article will help me a lot for coding side.
    Thanks for posting.

  • http://www.yusigames.com yusi

    very helpfull post. i’ve just found webdesignerdepot and will be back again to read more. thanks :)

  • Reece Sayer

    Brilliant article, I’m learning web design/development at university and quite frankly I think that the posts on here are teaching me so much more than my lecturers.
    Thanks again for an awesome article.

    Reece

  • http://www.lead411.com/Jim_Austin_2086171.html Jim Austin

    I feel that quality should always be up to a certain standard. Perhaps less money/time gets you less bells and whistles, but it shouldn’t affect the quality of the product. There’s no point selling something that doesn’t work properly. I guess it may affect the design process though, when you can’t really give it time to simmer

  • http://awesome.hu/ adikahorvath

    I think it’s useful for beginner’s

  • Michael

    Perhaps it’s just me, but I generally follow the practice of designing in Fireworks from scratch, knowing exactly what I can and can’t do, then start from scratch in Dreamweaver and reach the same result, but as a page, not an image. That way, throughout the entire process, I have the ability to optimize every little bit of code, and I know the code better because I made it and not a program. Every time I try to slice, it ends up terrible compared to my hand-coding. I also found that it has taught me what I can do in design and what just won’t work practically.