I’ve been learning web design for about 3 weeks now. I followed a tut where I laid out a design in GIMP, sliced it up a little and then coded the site. So my line of thinking was that this is web design. However, I’ve been perusing this forum for about a week now and I keep seeing here (as well as in the book I’m reading) that one shouldn’t use images for backgrounds, type, and navigation, because it makes the site heavy, causing slower loading times. But then when I look at sites that show cutting edge web design, they are full of images for backgrounds, type, navigation. So I’m a little confused at this point. Could someone help me understand? Thank you in advance.
Welcome to SitePoint!
There’s nothing wrong with using decorative elements (images) for styling. However, it should be done in moderation and whatever images you use, they should be a) in the appropriate format, b) optimized, and c) not essential, meaning your design must work with images turned off.
Another point is that modern web design begins on paper or a digital equivalent, meaning, you should have your content and content sections laid out, organized and structured first. Next I’d use Gimp just for two things: 1) Designing a logo, and 2) experimenting with colors to eventually have a nice color scheme ready (no mockup of the entire design). When you have those two things done, then I’d open up your favorite text editor, create the HTML markup and add in your content. Add a stylesheet and establish the layout, typography, and color scheme.
When all that is done, then you could scrutinize your design and see where you could enhance your layout with some graphics. And when you do that, I’d advise to just “crop” whatever parts you need from your PSD. Don’t slice it, don’t use any of the inbuilt HTML/CSS conversion functions as they’re pretty much a nightmare.
Hey, kohoutek! Thank you for replying. I think I misunderstood what it means to “slice”. I pretty much did what you said, just cut out pieces of the layout to use for backgrounds, logo, buttons, etc. I didn’t know GIMP had built-in HTML/CSS conversion functions, but I like coding better anyway (I love Notepad++).
Notepad++ is truly a fantastic tool 
I hope that I can input my personal understanding and view of the situation.
Images were commonly used (notice ‘were’) as a substitute for the lack of universal fonts. This problem has been 90% solved with the dominance of Microsoft Office and the @font-face CSS property. There, now, should be little to no use of images as text. When you can, use actual markup and text and style it with CSS to achieve your final outcome. If you don’t need images, don’t use them!
Images should be used for backgrounds. I’d say that the large majority of beautiful sites use images for backgrounds. There are different methods of using images for sites which decrease file sizes and make it easier to use background-images. Also, with the new CSS3 specs, backgrounds get really nice.
Hope I helped.
~TehYoyo
Thank you for replying, TehYoyo. I had never heard of the @font-face property in CSS until you mentioned it. I will definitely be spending time learning about it this week. That helps out a lot!!
Welcome to the forums CRTolbert.
One thing you might like to do is browse those cutting edge sites with loads of images etc and view the page source.
See how they’re put together, what makes them tick, what technology is being used.
If you have firefox, you can use and extension called Firebug to view each element and how it works in the design. You can also use an extension like httpfox where you can watch how the site downloads to your browser, with each element having size and time to download information.
You could also post your initial design you did in Gimp here and we can advise you what should be images and what you could do straight in the code to speed things up.
Thanks, bo5ton. I’ll have to check out httpfox. I’ve recently played with Firebug and Chromes “inspect element” feature. I’ll take your advice and look at some of these sites with these tools.
As for my first layout, the only images I have are for backgrounds (because I used gradients), the logo and pictures pertinent to the product the site is advertising. My problem is that I don’t really find any of the common web-safe fonts exciting, but i didn’t want to use images for type as I have read this is not a good practice due mainly to the inability to scale well, among other factors.
This leads me to another question in regards to best practices. For the purpose of learning, I have chosen a real life website that, in my opinions, has poor design and usability. My goal is to redesign that site with all the components it currently has (shopping cart, email form, videos, etc) so that I can learn how each component is implemented according to best practices. My hope is that when I’m done, I will have learned much of what I need to learn (as far as the basics - I know I’ll always have more to learn) to get started, and then maybe I could even pitch the finished redesign to the company and see if they like it. Is that an acceptable thing (ethically speaking) to do?
Thank everyone for the replies. This forum is very helpful!
Biggest mistake in design is drawing some goofy picture in a paint program before you even have semantic markup of the content. It leads you down the path to ‘but I can do it in photoshop’ design elements that are quite often impractical for deployment on the Internet if you care at ALL about accessibility. Fixed widths or even worse, fixed heights being just the tip of the iceberg on that.
No, that’s called drawing pretty pictures then deluding ones-self into thinking you can design for the web.
It’s not that you shouldn’t use them so much as – as everyone else has said so far – they should be used in moderation. There are also techniques like image-recombination (using one image for many) and the incorrectly named CSS Sprites that can minimize the speed penalties.
But as several others already said in this thread, you should design without images first so that people who browse with them disabled won’t have a broken page. (and their numbers have been growing not shrinking thanks to things like metered connection plans being on the RISE, right Canada?)
You have to DEFINE ‘cutting edge’ – do you mean very pretty but ultimately useless pages that Photoshop artist sit around circle-jerking over, or do you mean the themes of major successful websites? Take a look at the big successes – Amazon, E-Bay, Slashdot, Facebook, Woot, Wikipedia, Craigslist, Freecycle – we’re not exactly talking a visual tour-de-force exhibiting an artists skills. They are simple themes delivering content of value with little if any ‘fat’ around it.
Which is why the type of ‘design’ you see on sites like “The Best Design” or “Template Monster” are only found on small personal pages of artists, small businesses who were led down the garden path in their ignorance, or major corporate sites for whom their web presence is an afterthought… the latter two making such pages an EXPENSE for the businesses in question instead of an investment!
Because while such sites may be very pretty – their bounce rates are through the roof, the hosting costs are insane compared to their traffic levels and they’re accessibility train wrecks; if the resulting page is USELESS to visitors, it doesn’t matter HOW pretty it is; in those cases it typically becomes the equivalent of dumping a can of shellac on a pile – no matter how shiny it ends up it’s still a pile of dung. It’s always the bottom line – if the page is painfully slow to load, doesn’t work if some magical bit of tech is missing, and on the whole doesn’t deliver what a user actually visits the page for, WHAT GOOD IS IT?
It’s a bitter pill to swallow at the start, but the simple fact is people visit websites for the CONTENT, not the goophy graphics you hang around the content. Said graphics might impress the suits who don’t know any better, but at the end of the day it typically ends up all flash and no substance, or WORSE, lighting the substance on fire and taking a wee on it’s ashes.
It’s why I advocate a ‘content first’ approach to building a site – your goofy paint program should be the LAST tool in your box, NOT the first. Take and gather up your content, or at the very least a reasonable facsimile of it – build your semantic markup of the content using a logical document structure FIRST, before you even THINK about layout. Then you use CSS and a few extra containing DIV to build your various layouts – yes, I said layouts – PLURAL… semi fluid for desktop, narrow for small screen devices, hide stuff and strip colors for print so your not wasting people’s ink, etc, etc… Then and only then do you start up your favorite paint program to make graphics to hang on the layout… THEN if you really want use javascript to enhance the page without replacing any functionality.
It’s called “progressive enhancement” and building a page in this manner means that should those bits of fancy tech – scripting, CSS, images, etc – be unavailable, the end user still gets a useable, useful and navigable website thanks to it “gracefully degrading”.
Which is also the POINT of HTML in the first place, as laid out by TBL all those years ago – taking content and marking it up in a manner that can be delivered to a myriad of devices of differing capabilities… which is why “drawing a pretty picture just for desktop resolution systems” is pretty much COMPLETELY MISSING THE POINT OF THE INTERNET AND HTML!
Seriously, I meet whoever started this “draw a goofy picture in photoshop first” idiocy in a dark alleyway, bad things will happen.
Death, could you now tell me how you “really” feel?? J/K
Actually, your reply causes me to breath a sigh of relief. I’m not a very “artsy” person. I’d rather spend my time coding and making a web site that is functional and accessible than playing with pictures.
What do you think about the idea of, for the sake of learning, redesigning an existing website without asking the company it belongs to. The reason I ask is that I would like to post a screen shot of the homepage I’ve come up with, but I don’t want to violate any copyrights or do anything unethical.
Thanks for shooting straight.
Funny thing is, I am… but about 8 years ago I kept banging my head against the wall with artsy ideas that resulted in painfully bad websites – until my technical side (which I also have) sucker punched that little devil on my shoulder and buried him out back o’ the woodshed.
… and it’s not like you can’t have a pretty artistic page that’s ALSO accessible - it’s just that starting out from a pretty picture is a horribly flawed approach that usually results in concepts that have no business on a website in the first place. How’s the old saying go? “If it seems like something is getting too complex for it’s own good, it was too complex a week ago”
Good! We need more people like you in the field.
My advice would be to remove any logos, names or original content for placeholders (Title here, lorem ipsum, etc). That way you can show it to us without those worries.
Here is the top part of the home page:
The “Home”, “Order”, and “Contact” buttons “glow” green on hover (imaged is replaced with another image).
Here is the bottom part:
Be gentle; it’s my first time.
There is nothing wrong with having a pretty website or using some (but not too many or too large) images to create a design. My biggest problem with website usability isn’t from downloading images, but from the overuse of Javascript. Forcing the visitor’s browser to download and execute over 100kb of Javascript just to do some stupid menu transition is horribly inefficient. jQuery is the biggest pain the butt I’ve ever encountered on the web. Doing AJAX is very simple and there are plenty of tutorials on the web. There is no need to download a big bloated jQuery library to do it.
I want sites that are functional, look OK (not too frilly), and most importantly, load fast. I don’t want to sit there for 15 seconds or longer while a half dozen CSS files are downloaded and while a dozen javascript files are downloaded and processed. Sites created using Wordpress are especially bad in this regard.
Is there anyone who is going to say that Craigslist is a good-looking website? I think some design could not only make it look nicer, but would help with overall functionality. Keep that in mind: design can help usability or if you go overboard be detrimental to it. Content drives your design, not vice versa.
I don’t have any artistic ability whatsoever. I never thought I would need any. But, if you are making websites, having an eye for design does help. I love writing PHP, I like writing HTML and CSS, I don’t mind simple Javascript that I create, but I absolutely hate jQuery and I dread having to design something for the simple fact it takes me so long and takes so many iterations to create something that only looks OK.
Right now, what I’m doing in my spare time is taking existing pretty websites, and then trying to recreate mockups of them in an old version of Photoshop I have. My hope is that perhaps with enough practice I can gain a little bit of an eye for design.
As for overall best practices, I would say:
- Use HTML 4.01 Strict as your doctype and always place this doctype at the very top of your webpages.
- Layout your sites using CSS (even with its shortcomings), not tables, and when you float your columns, clear your floats by using an overflow: hidden CSS statement on the parent column container.
- Use UTF-8 as your charset.
There’s plenty more.
Hey Chris,
It sounds like after 3 weeks of learning you’re already moving on to the right path!
Taking an existing Website that is already online and redesigning it for the purposes of a learning / educational exercise is fine. I’ve done it myself many of times. I don’t think there’s anything unethical about doing this and then contacting the Website owner to show them your redesign to see if they would like to purchase the new site from you for a fixed fee, or to come to some other arrangement. You could just keep it in a folder somewhere for future reference and redesign more Websites to keep practicing. Doing this, I think, is a great way of practicing Website design and development.
If you’re serious about this Website redesign you’ve done, and you’re thinking about contacting the Website owner about it when you’re happy with it, then I’d recommend you post a new thread in the Website Design & Content - Reviews & Critiques forum to get the design and code you’ve done so far reviewed properly (but don’t forget to read the forum guidelines first!). This way you can get some feedback and constructive criticism to improve both the design and functionality of the Website before you finish it and decide whether to show it to the Website owner.
I think the design you have so far looks good, but could do with some improvements. I’ll look out for that thread in the forums asking for a review of the new redesign you’ve done 
AMEN!!!
… and it points out the real laugh of jquery – touted as ‘solving cross browser scripting issues’ when that’s not what 90% or more of it’s code is for; the majority of it seems to be there just to make it easy to add goofy animations to things. Your ‘cross-browser’ workarounds take more than 4k of uncompressed script, you don’t know enough javascript to be adding it to pages in the first place.
Again, that’s what people actually visit websites for – “designers” often seem to lose sight of that with it becoming more important being flashy, than offering anything of substance… .It’s like the “rage of the flashtards” from a few years ago where everyone and their brother seemed to be putting stupid flash animations on their pages as banners, or worse using flash to make menus, or even WORSE using flash to build the entire site and navigation. THANKFULLY that nonsense seems to be slowly going the way of the dodo, with the only holdouts being the ultimately useless video game title websites that usually are so useless, you just go to gamespot, ign, some fan run forums, etc… with the only other useless flash sites being a few brick and mortars for whom their web presence is an afterthought.
After all, there’s a reason it’s called Flash and not substance.
Though as you said, all the fancy stuff can either enhance the 'experience, or be detrimental to it. It’s based on how much you use.
It’s why I actually set ‘target limits’ on my code. Too many files ends up delaying the page regardless of said files sizes – excessively large amounts of scripting slow down pageloads – scripts that don’t work until onload often make the page useless until they work, or WORSE just start the whole process of waiting for more crap to load start over again…
Simple limits… For the past eight years I’ve said “72k in 16 files ideal, 144k in 32 files maximum” as the ‘limits’ for templates I make – without counting content images or objects (which if you’re going to go over, that’s where to do it!). That’s for HTML+CSS+IMAGES+SCRIPTS total! If you can’t make your template and text content fit those limits, there’s probably something flawed with what you are trying to do.
There’s a formula I also use for figuring out if a page’s code ‘sucks or not’. HTML on the whole SHOULD be predictable in it’s file sizes; you only need so many tags for x amount of content, if you practice separation of presentation from content those tags average a certain size; the size of a well formed <HEAD> area should be relatively uniform and within certain limits, as well as the ‘stock bits’ of most sites in relation to the text content, number of content images, objects, etc…
I’ve been tweaking the formula for a while, making adjustments, and have slowly been putting together a PHP tool to try and automatically rank the markup of a website… Basically though it all comes down to the ‘content to code’ ratio.
A simplified version of which is simply:
2.5k + content plaintext*1.5 + 128 bytes per form element (INPUT, TEXTAREA, BUTTON) + 256 bytes per content image or object/video/whatever.
So for example, if you took JUST the text (without the tags) from a page that ends up 8k, and it has say… three actual content images (as opposed to presentational images, which have no business in the markup), and no videos or other objects… 2.5+12+1.5 == 16k. So such a page should only use 16k of HTML, give or take… which is why if it uses 50k of markup, something is WRONG.
For example, take the forum index here at sitepoint – it’s a vBulletin 4 skin so we KNOW the markup is rubbish… but really, how bad could it be?
Well, currently it’s 143k… for plaintext I just load the page in Opera, hit CTRL-A, CTRL-C, open up notepad 2 and paste… and it says there’s 15.7k of plaintext… counting through it I see 10 images I would consider content, ONE input (search), and no videos or objects (though my adblock might be omitting those)… by our formula:
2.5 + 15.7*1.5 + 2.5 + 0.25 = 28.8k – so if it were coded with semantic markup and proper separation of presentation from content, there is little legitimate excuse for it to be more than that… Even if there’s stuff we’re not seeing, there is NO reason for it to be lowing an ungodly FIVE TIMES that!!!
Until you view source and see list abuse on tabular data, unneccesary wrappers, ENDLESS classes for nothing, and the whole host of other things that basically boil down to some back end coder thinking they knew anything about writing HTML/CSS. Even if I couldn’t come close to my ‘target’ numbers above, I doubt I’d need more than 40k of code to deliver the exact same page with the same or better functionality.
Probably better since the menu dropdowns are broken. (though that could just be a problem with my user.css).
Now, if I ran my hokey little EWI USB website through the same formula… it’s homepage isn’t quite as complex, but it’s not exactly simple either given all the tricks used to pull off it’s main header – based on a [url=http://www.ewiusb.com/images/EWIUSBpromo.jpg]picture of the musical instrument the site is about.
It has 4.3k of plaintext, and six content images. No form elements, objects or videos… So:
2.5 + 4.3*1.5 + 1.5 == 10.45k… so that’s our ideal target. How big is the actual markup for that page?
10.7k – only a hair over the estimate… and that hair over is from my using a dummy DIV to use opacity to create the shadow instead of just using box-shadow, because when I wrote that theme some… three years ago, I didn’t consider CSS3 real world deployable yet.
A position I’ve since changed my opinion on.
In any case, it’s why I laugh at the people who have the massively bloated markup, and then do idiotic nonsense like whitespace stripping/minification to it instead of fixing the rubbish markup; I’d ballpark that 90%+ of the time you see people wasting time and adding headaches to maintaining the page with methods like stripping out all the spaces, tabs, carriage returns and comments (something my formula generally allows for to), it’s just to hide how bad their code really is – rather than getting off their collective backsides and fixing it.
Jason,
I’m going to redesign the site you demolished for me (haha). So best practice is to mark the site up first (HTML 4.01 Strict) so that I have a naturally flowing page (from h1 down). Then start adding some layout features with CSS (mainly for positioning elements). Then start adding colors and maybe a few more graphics to make it look better. Then if necessary, add any scripting (but very sparingly). Is that the right line of thinking?
I’d say it varies between each person. I like to have a general idea in my head what I’d like the site to look like.
I then code section by section. Header first (if the desgin has that) and code the associated CSS. Work my way down the page. Modify anything you think should be modified as you go along, or at the end.
Okay, the more I read, the more confused I get. I’m reading that using an XHTML DTD and then passing it as “text/html” is not really using XHTML, which IE doesn’t support anyway. So I decided to use HTML 4.01, but I want to use XHTML syntax so that my code will be clean. So here is another question I’m having a hard time finding the answer to. If I use HTML 4.01, can I (and should I) close empty elements like you have to in XHTML ( /> )?
One thing I’m definitely learning is that it’s easy to learn (X)HTML/CSS, but much more difficult to learn how to use it “correctly” (for me at least).
So currently I’m focusing on progressive ehancement using HTML -> CSS -> JavaScript so that structure -> presentation -> behavior. Actually, right now I’m really focusing on HTML/CSS. I’m not even concerned with JavaScript yet. My plan is after getting to JavaScript I want to delve into PHP/MySQL. Of course at this rate, that will probably be sometime next year.
You can enforce your own coding requirements (such as using optional closing tags on </p>, </li> etc, and lower case tags only) in plain ol’ HTML, even though the spec itself doesn’t require them.
In HTML, you must not close spot tags such as <br>, <hr>, <meta> or <link>. (To me, that makes perfect sense. Why would I need to close a tag that can’t have any content? It’s just a waste of time and bytes), but that’s the only aspect of fauXHTML that you can’t use.
@CRTolbert; let me first applaud you for this diligent quest to learn and improve yourself.:tup:
Remember that all HTML is a descendent of XML. And in XML it is mandatory to properly close tags. That is the way I have been writing HTML since 1998.
I am irritated when I see WYSIWYG editors construct a ‘break’ or a ‘horizontal rule’ like this:
<br>
<hr>
That is simply wrong.
Thanks Stevie D and ParkinT for replying.
Unfortunately, this is a perfect example of the obstacles involved in learning this confounding, yet addicting thing called web design. Two highly respected and qualified (as far as I can tell) people are giving completely opposite answers to a seemingly simple question. And I don’t mean anything personal against you guys.