Webdesign
How to use links?
Don’t underline words if they’re not links.
On the web, something that’s underlined is supposed to be a link. If you underline gratuitously, readers will be annoyed when they try to click those underlined words only to discover that they’re not really links. If you want to emphasize something, use italics instead (or boldface, or another color).
Make links blue or underlined, or both.
Users expect links in body copy to be blue and underlined; because that’s the way they appear on 99% of other websites. If you use a different color then at least the underline is a clue that a link is a link. Likewise, if you remove the underline but keep the link blue, then the color is the clue that a link is a link. So it’s best to use both blue and underlined, but using at least one or the other is acceptable.
What’s wrong is doing neither – having links that aren’t blue and aren’t underlined. How are users supposed to know what’s a link at that point? I ran across one page (no longer up) whose main link is red with no underline. To make matters worse, elsewhere on the page they use blue text, which looks like a link, but which isn’t. So users had no clue that the link was actually a link, and there was other text that looked like a link, but wasn’t. (I tried to bring this to the attention of the site owner but he bragged that nobody else had ever complained.)
Links in menus don’t have to be blue or underlined, as long as they’re clearly menu items. The blue/underlined tip is for links that are in the middle of the page.
Explain what you’re linking to.
When you’re able to provide more information about what a link points to, do so. For example, if your site has a Links page, include a short description of each site you link to, say 1-5 sentences. That way visitors have an idea of what’s on those sites, which will help them make their decision on whether to visit those sites, and help them find what they’re looking for, while avoiding what they’re not looking for.
Nothing is less useful than a whole bunch of links to other sites when those links consist of nothing more than the names of those sites (or worse, the urls). Without any description of what you’re linking to, readers are forced to visit each and every site to get an idea of what’s there. Imagine 100 of your visitors all repeating that same laborious surfing, needlessly. You could have told them what’s on those sites, because you (presumably) visited those sites yourself, so you know what’s on them. Do your readers a favor and share your knowledge with them.
Don’t open internal links in a new window.
The owner of a site I just ran across thinks it’s a good idea to pop up a brand new window when a visitor clicks a link within his site, but that only annoys users when they suddenly have a gazillion windows open on their screen. Opening new windows for external links to other sites is fine, but links within a site should always open in the same window. Visitors can still get around your site just fine when links open in the same window, because you did include a good navigation menu at the top or the left of the page as in tip F1 above, right? Opening new windows means that after five clicks within your site, your visitor’s screen is cluttered with six different windows.
Use descriptive link text.
The text of a link should describe what’s being linked to. You should never, ever use words like “link” or “here” or “click here” as the link text. Readers prefer to scan web pages rather than read every word, and you make that impossible if you use generic, non-descriptive words as the link text.
Ways to Get Unblocked
Web designers, like any creative person, can suffer from writers block. But because of our work, there are many ways you can learn to deal with the blocks and get unstuck. These six suggestions have worked for me to get new design ideas in the past and will work again.
- Be prepared for procrastination to try to block you. When I’m working on a new design or article idea, I find that that’s when ideas for other projects will come up. For example, I might start thinking of ways to paint my office, about the wool I need to wash, or a possible location for a new kitchen garden. I realize that these are just ways of procrastinating, but they are also things I’d like to do. So, if I’m writing or working on a Web design, I write them down and continue brainstorming my current project. I’ve found that if I write down the things I want to procrastinate, they don’t press as much as they would if I try to simply ignore them.
- Start in the middle. For some reason, many Web designers feel an intense need to start at the top of their Web page and design down. Yes, ultimately, you’ll have to think that way about the HTML or CSS, but when you’re working on a design, you should focus on the most important part first – and that’s not usually the navigation, branding, or advertising found at the top. When writing content, the same is true, I’ve found that if I start writing with a title, my articles are usually completely different than what the title says. So I have to write a new title when I’m done anyway.
- Step away from the computer. I’ve found that it can get very easy to get hung up on technical issues like HTML or JavaScript when I try to do an initial design on the computer. While I do most of my rough writing drafts on the computer, I do most of my designs on paper first. For one thing, they’re easier to erase and scratch out. Plus, since I use scratch paper for most rough drafts, so if I decide I hate an idea, I don’t feel bad about throwing it out.
- Take the time you need. Planning is one step in most projects that is both the most important and the least used. Most people, including Web designers, prefer to jump right in and start building things. If you prefer designing a page, you probably get out Dreamweaver or Photoshop immediately after starting a project. If you prefer developing pages, you probably jump right into the PHP or JavaScript to generate behaviors. But most Web design and development projects end up over budget, over time, or not meeting the requirements – and this is usually because the planning phase of the project was glossed over in favor of action. Take time with your planning and when you think you’re done, take a little more time. Planning won’t hurt your designs, but lack of planning will.
- Ask for help. Don’t be afraid to ask for help, but be sure to find people who can provide you with constructive criticism. It doesn’t help if they are too effusive about how wonderful it is, but someone who can’t find anything good is also not a lot of help.
- If you’re really stuck, do something else. The idea is to get your mind off of the problem you’re working on. This can allow your subconscious to think about it unobstructed. I can’t tell you how many times I’ve gone to sleep and woken up in the morning with the ideal solution completely formed in my head.
Tips for Effective Web Design

Listed below are some useful and rather important tips for designing a professional and high quality web site:
- Neat and Easy Navigation: Navigation of links on your site plays a big role in determining the stickiness of your site (how long your visitor stays and explores your site). Ask yourself this, What do visitors do as soon as they open your site? They would probably read the content of the present page and then look around to find any other page that interests them.
- Clean Layout Design: A clean layout that uses a lot of white space enhances a site’s looks. Try to keep the focus on your content, use dreamweaver templates for this. Use fonts that will be available on all computers to prevent your site looking messed up.
- Program using pure CSS: The world is moving away from table based websites to pure CSS websites because it offers accessibility, reusability and considerably reduces file size apart from giving greater control over the look of your website. The single most important skill you can learn today to become a quality web designer is CSS programming! Even if you are not an expert at CSS you can learn to use the following simple CSS Styles Effects to enhance your website:
- Cool Text Effects using CSS Styles: Text Links Rollover, Text Case Setting, Text Spacing, Line-through Effect
- Bullets in HTML or Deamweaver: Using CSS Styles with bullets (shapes, decimal, roman-numerals, images, etc.)
- Links without Underline: Use CSS Styles to display links without the appearance of the underline.
- Optimum Load Time: Make sure your load time is low. For this you must:
Minimize Graphics, Flash and scripts: They hugely increase your file size.
Optimize your HTML & script code: Make sure that your site doesn’t have any unwanted tags or unused scripts.
Use Server Side Include (SSI) files where ever possible. SSI files once called from the web server reside in its cache so on subsequent requests they load faster. - Design for all Screen Resolutions: A site that is easy-to-use always encourages visitors to stay and read your content. For site with long pages of content this is very crucial as the amount of scrolling required is reduced. Suppose your site doesn’t look good for a particular resolution it is very probable that the visitor will close the browser window feeling that the web page is not for their viewing. Designing stretch layouts that fit any screen resolution ensures that you know all your visitors see a visually appealing and professional site.
- Ensure Web site scalability: Make sure your code and design is scalable. As technology advances and configuration of computers & their monitors keep increasing and varying it is impossible to test your site in all screen sizes and platforms.
- Cross Browser Compatible: Make sure you check your site for Internet Explorer 5+, Mozilla Firefox 1+, Opera 7+, Safari 3+ and Netscape Navigator 6+ as they constitute 95% of the worlds browsers.
Website Design Techniques That Make A Difference
website design techniques that make a difference between professional design and amateur one is that the amateur sites often do not get the attention that a professional website would receive.
Here are some techniques that will help:
Some useful information about websites design techniques can be explained by understanding what table-based website is, is it old, primitive way to build using tables, etc.SEO Perhaps if you are creating a table based website it would be best to consider CSS designs. CSS or Cascading Style Sheets are popular and the language is much easier to use and to create quality tables which users can get to much easier.
That is straightforward, but what should be used for a professional website?
A good designer to start with, if you are building a professional website you want to ensure that you achieve the highest quality possible. You will need to consider SEO as well, so ensure that you have a designer that can either handle your SEO needs or point you in the right direction. The tableless CSS websites are great looking websites and the CSS is used to transform conventional forms into tableless solutions. Forms that do not have tables are often lighter and semantically precise.
Professional designs are often affordable, so if you are building a professional website using CSS language be sure to find a company who has a good reputation in web design. Try to avoid the amateur designers since you may well lose more money than you expect. One of the latest designs is the dynamic websites which amazing, most of the sites are crawled by Google.
Ways to Improve Your Website’s Legibility
Websites that make their customers work to read them are not the best way to get business. Miniscule fonts, text in colors that make it hard to see against the background color, and lines that are piled on top of each other are problems, but they’re easy to correct. Let’s jump right in and look at five easy fixes:
1. Format your text using CSS.
Cascading Style Sheets (CSS) are the way to go – use one style sheet and control how text looks on your entire site. Make a change to the style sheet and your whole site is updated. It makes life a lot simpler.
2. Make the font size big enough to read.
Consider your target audience. Even if they are a group of teenage girls looking for new shoes, it’s never a good idea to use tiny type. It doesn’t have to be enormous, but up to a point, larger type is better. 12-pt Verdana is better than 8-pt Verdana.
3. Make the text contrast with its background.
The more contrast, the better. Black-on-white or white-on-black are examples of the highest contrast you can get. Use colors if you like, but if you squint at the page and your text basically vanishes, there’s not enough contrast.
4. Give the lines room to breathe.
Don’t stack lines on top of each other. Use the line-spacing directive in CSS and give it some space; I’ll often set line-spacing to 140% of the height of a typical line.
5. Break text up into chunks.
No matter how good a writer you are, people don’t want to read endless pages of text. Break it up by using headlines that reflect the subject of the paragraph(s) to follow so people can scan down to the parts that really interest them, or use bulleted lists to change the pace of the writing and slow down the scanning.
And finally (not one of the 5 Easy Ways to Improve Legibility but still quite important) check your spelling. Nothing irritates me more on a web page than spelling errors – it simply makes you look like you don’t care enough to get it right. Use that ubiquitous spellcheck tool.
Making your website’s content more legible is easy. It doesn’t take a lot of time, mainly common sense. The payoff will be text that’s more readable, customers that stick around long enough to get your message, and improved credibility with your visitors.
9 Ways To Present A Website To A Client
The Problems
As web-savvy individuals, it’s quite easy to grasp and understand the concept that mock-ups are simply static images that depict what a site would look like. However, what many web designers have found is that this concept is incredibly difficult for clients to wrap their head around.
We, as designers and communicators, try to make it clear to clients that what they are looking at is a static and flat image of their potential site design. Still, many questions and comments come from the clients after you present the design, such as the ones Verne Ho of Creating Briefing and many others, have experienced below:
- Why don’t any of the links work?
- How do I edit the text on this?
- How come I can’t highlight text?
- The website is too small (occurs because the browser has shrunken the image by default)!
- I don’t like the white space that surrounds the site.
- Can we center the site?
Place the image on a web page and send them a link.
People can probably better identify an image when it appears as they normally see it, such as in a web browser however it does create many more questions as I previously outlined above.
If you choose this method try to personalise it by uploading it to your own server… use the directory/clients/clientname/index.htm. Another tip here was to use the free .tk domain provider so that you can send them a link such as http://clientsdomain.tk which also looks quite professional.
Send A JPEG or PNG via Email
Sending a mockup by email is probably the simplest way however it is not always the best… Some users have small screen resolutions which means the picture may shrink which means more questions along with the other ones that I outlined above.
Use some kind of web-based application
Using a web-based application to showcase mock-ups reinforces the idea that it’s something on ‘display’ and it is not a live example which may lead to less questions.
Use the website CodedPreview
CodedPreview allows you to create simple HTML preview pages, showing what a template should look like when coded. Again, try to personalise it as much as you can, tailored to your client.
Create A ‘Client Studio‘
Rather than using an online based application, you can set up your own ’studio’ on your own server where the client can log in and view mock ups (jpg’s on a html page) which they approve… You can put revisions on the same page (new jpg’s) and once approved you can add a link to view the functional site in progress.
Export mock-ups in PDF
Rather than saving in jpeg or png format which is just an image that can be opened in the clients default image viewing software, having it in PDF format means, in most cases, that they must open the website in Adobe Reader. The advantage of this is that there’s less expectations for it to function like a website. The use of layer comps is also useful in PDFs to show variations of a design.
Skip photoshop and design in HTML
There are a few debates on this one and it usually comes down to whatever process best enables your creativity however this one is for you to decide.
Get The Client To Come Into Your Office
Although this is not always possible, it usually is the best way to present a web mock up to a client as it allows you to talk over the whole project together with the client. If you have this opportunity, always take it.
Send Them a JPEG or PNG & Ask Them To Print It
This was just an idea I came up with… if you send them a full scale JPEG mockup of the design and ask them to print it off, then they will not think that the website will function like it normally does which in turn will mean less questions. A disadvantage of this however is that the site will not be to scale.
7 Benefits of Having a Professional Website Design
CEO’s don’t dress like they’re homeless and wine tasting events are generally never held in the back of a liquor store. There’s a good reason behind this. People generally do not follow the “don’t judge a book by it’s cover” motto, so the very first thing they do is, you guessed it, judge your book by it’s cover. The same is true for website designs -people visit your site and immediately make a decision on if it’s a place they’re going to spend time (and money) at, or if they’re going to lump you in with the millions of other sites that look just like yours and move on to something else.
As you can see, the benefits of having a professional design can be great, especially if your website is geared towards building your business. Outlined in this post are 7 different reasons why it’s beneficial to have a professional web design.
1. Added exposure through CSS galleries
One of the benefits of having a professional design created is that you’re able to submit the website to galleries around the web and have it showcased to audiences that you would have otherwise never been in front of. This brings in added traffic, potential clients and also adds to your authority by being talked about across the web and showcased as a professional website.
2. Your first impressions do count
Like I discussed in the beginning of this article, your first impression made is an important one – and a professional website design is definitely going to leave a better first impression that one that looks as if it was put together by your cousins neighbor who is 12 and just got his first PC.
3. Highlight your expertise with ease
With a professional website design, you’re able to showcase the things you do best – if you’re a designer, the design itself showcases your skills and if you’re a writer, you’re able to utilize a great design to highlight areas you excel at – maybe setting up a call to action box integrated into the design that lets people know what you do and how they can hire you. This would be much better than just having a site slopped together with no real direction.
4. Better design + more eyes = More sales
With your killer design, you’re attracting visitors from all over the web – they want to sit & stare at the beautiful website design you’ve got on display and then, out of nowhere, they’re going to get the urge to pull their credit card out of their pockets and buy tons of products from you. Well, it might not happen exactly like that, but a good design that brings in more visitors is definitely going to have some of that trickle into your sales.
5. Less bugs and cross browser compatibility
If you hire someone who is great with IE6 but has yet to hear about the fact that IE7 and IE8 are out, Firefox, Opera, Safari and Chrome are all web browsers and they’re severely behind the times, how do you expect them to make sure that your website is accessible to the visitors of your site? A professional web designer will ensure that your website is clearly viewable on all major browsers, thus giving you the ability to keep your professional appearance up in front of everyone viewing your site, even those who are viewing in the less-than-popular browsers (IE6).
6. Reduce your maintenance time greatly
With a professional website design, the time you actually have to spend cleaning things up and making sure everything is up to day drops drastically, giving you more time to focus on the things that matter most – traffic, sales and increased visibility. The majority of the time, your design will not even have to be touched for a year or two – until you’re ready for an updated look, at which time you can contact your original designer to give you a face lift, keeping your hands free to, again, make more sales and run your business.
7. Increased search engine visibility
Some people may not believe it, but the benefits of a professional web design also trickle into your search engine rankings and visibility. For starters, a professional web designer will ensure the code markup is clean and easy to read – great for spiders who crawl your page. The other increase of search visibility comes from all of those links and the added exposure your website design gets across the web – design blogs regularly feature the awesome designs they find across the web and the new clients you bring in will feature a link back to your site at the bottom of their site, increasing your back links (this is something you’d have to make sure your clients are OK with – I know from my business that 9 times out of 10 they’re fine with it).
Web Design Tips

Here are some essential web design tips that every web site should follow. Design your web site by following these tips and I guarantee that visitors will have a great first impression of your site.
1. Fast Loading web site designs – This is the number 1 tip that every web designer should follow. You might design a web site that looks fantastic but few people are going to see it if it takes a long time to load. Your designs should be optimized for the web and should not take more than 15 seconds to load. Remember, you might have a great design but very few people are going to see it if it takes a long time to load. Click here to for 10 tips to fast-loading web pages.
2. Clear Navigation – Once a visitor has come to your site you need to make them go through your site. To do this you need to have clear navigation. Make sure all your important links are at prominent places. Preferably right on top – that’s usually where a visitor first looks. Make use of menus on the right and the left. Try to link to as many pages of your site. Let your information be accessible from all parts of the site. You never know what a visitor may be interested in. Try to also use the footer for your important links. Click here for navigation tips.
3. All Resolutions – Today, there are computers with all kinds of resolution. They range from 640 x 480 to 1024 x 768 and go even higher. Your job is to design your site for all these resolutions. The best way to do this is to design your site in terms of percentage and not pixels. Click here to learn how to design websites for all screen resolutions.
4. Browser Compatibility – Make sure your site is browser compatible. Your web site should look good in Netscape as well as in Internet Explorer. Don’t stop designing your site as soon as you find that it looks great on IE. Usually Netscape gives some problems, especially when you try doing complicated HTML designs. But don’t give up too soon, usually with patience these problems can be easily fixed.
5. Readable and professional looking fonts – Don’t ask me how many times I’ve clicked out of a site just because the font is in Comic Sans and the color is a bright pink or green. Just by looking at the font you feel that the site is not a professional site. Don’t use Comic Sans and other fancy fonts that may not be available on most computers. If the font you use is not available in a visitors computer the web site will use the default font of your computer which is much worse. So try to keep to common and professional web fonts. The fonts that I always stick to are Arial and Verdana.
6. Minimize the use of images – I believe that sometimes simple designs are the most effective for the web. Keep your site simple but neat. Don’t clutter your page with big, bulky images that take ages to load. Instead use tables creatively and design eye – catching icons that will draw a visitor’s attention to a particular section of your site. Tip – Visitors are usually more interested in content than in design.
7. Use of white space – Try not to clutter up your page with too many images, backgrounds and colorful fonts. Again use the Keep It Simple principle by minimizing the use of graphics and using a lot of white space. White space gives a sense of spaciousness and overall neatness to a site. Notice the white space in our site.
8. Check for broken links – Always check for broken links within a site before uploading it to your web server. In Dreamweaver you can check for broken links by right clicking on any file in the Site Files Window and then clicking on Check links – Entire Site. If you don’t have this facility you need to upload your site and then check it using online tools like Net Mechanic.
Web Design Ideas
Take a look at a variety of ready-made website templates to get some great web design ideas!
Here are some cool web design ideas you can use while designing your next web site. These are some ideas that we’ve used for our clients. Hope you find them useful!
Swap Images Food templateFamily TemplateBusiness TemplateChristian Template
Swap Images
Swap images look fantastic and are also great fun to design, so try and use them if possible. Visitors find this interactive and interesting. Illy Collection Cups and Business Template 3 are example of a site we have designed using swap images. Fireworks makes it very easy to design web sites with swap images. Click here to learn just how easy it is!
Rollover Images
Rollovers are another favorite. We try to use rollovers whenever possible – they are extremely simple and add a bit of class to a web site. If you don’t want to use too many images that will result in a slower load time make sure you use text rollovers (Our menu on the right is an example of simple text rollovers). Examples of rollover images we have designed can be seen in Business Template 1.
DHTML
If you have sub menus or complex navigation systems, use DHTML. They look neat and are again very simple to use. Many sites offer free DHTML scripts for menus, navigation systems, tip boxes and more. They give you detailed instructions on how to use these scripts so it is really very easy to install. A good site is SimplyTheBest. Check out the cool scripts available! Click here to view an example of a sliding menu navigation system. Click on the links in black to view the sliding menus.
Flash
Though we don’t recommend designing an entire site in Flash it may be a good idea to make an interesting Flash intro or insert small Flash animations in important pages of your site. Always take care to optimize your our Flash animations. Take a look at some great looking Flash intro animations.
Eye Catching Graphics
Design eye-catching graphics to make your site stand out from the ordinary web sites. Try out some cool graphic effects – collages, feathering, bevels etc. and design attractive headers for a web site. Check out some innovative graphic headers in our ready-made template section.
More Web Graphic Design Ideas
Check out our article on Using Tables Creatively. Design simple but smart web sites by just using tables in different ways. We recommend using tables because they are plain html and therefore don’t take much time to load. As you know time is of essence on the Internet so it really is no use designing a fantastic graphic intensive web site that will take ages to load. On the other hand with cable and high modem speeds we can afford to design sites that are a combination of all the above ideas
The SaaS Eco-system of the Future with visionapp – Web Hosting
Microsoft Corp. and The Webby Awards today awarded the $50,000 grand prize in the Phizzpop Design Challenge to Station Four from Jacksonville, Florida.
The prize was presented to Station Four for developing the best site strategy and design aimed at helping Boys & Girls Clubs of America, one of the nation’s oldest non-profits, upgrade its website for a growing Web 2.0 audience.
(WEB HOST INDUSTRY REVIEW) — It was fitting that visionapp (www.visionapp.com), a company whose mission is to take the complexity out of cloud services, present on the Software as a Service eco-system of the future.
The journey from infrastructure to the platform layer to the application service library — and finally to the individual user requires an often complex web of partnerships, visionapp chief executive officer Jürgen Gallmann explained.
visionapp envisions a reality where a multitude of services converge into one network. “Our life is changing constantly… our business life and our life at home is connected,” he said, and there need to be solutions that reflect that reality.
This is a reality for more than 10,000 businesses worldwide, ranging from small businesses to very large enterprises with a global presence that use visionapp’s tools and solutions. Through its global partner network, visionapp can provide a unified software and services model.
The key to this model is efficency. “Customers are looking to do more with less,” Gallmann said. Running and licencing visionapp’s cloud, SaaS and automation platform lets customers benefit from private and public cloud services without having to forge relationships with vendors across the industry.
Plus, end users can get their service quickly. This helps in instances where an organization can’t wait several months for an application to be deployed. And this is all done on a pay per use basis, so customers are not faced with upfront costs. “Customers like the ondemand model… and they like it becaue it’s pay only for use,” Gallmann said.
Additional SaaS solutions can be easy to sell customers on, based on an existing relationship, increasing average revenue per user.
visionapp provides three models: a Saas Portal with a standard application portfolio (vivio and Ingram Micro use this option); a white-label Saas Portal with customized portfolio and look (used by t-home) selecting outsourcing and hybrid (used by DHL). And additional capabilities can be added as are needed.
By taking this complexity out of the service model, managed service provider customers gain the business agility needed to react to volatile markets, manage complex compliance requirements, increase productivity, and free up resourses to speed up the development process and drive innovation. And that will be one of the greatest advantages the SaaS eco-system of the future holds.
Recent Comments