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.

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.

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.

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.

Share on Facebook

#2 Never do it yourself, even if you know how to.
The greatest thing about online business is ALL of it can be outsource for cheaper and with better quality than you could ever do by yourself.

Web design, content, product fulfillment; even customer service can be acquired for cheap through outsourcing or even for free by doing creative joint ventures with those in your industry.

#3 Be sustainable.
Don’t try to be the best in everything. It’s better to submit a 200 word blog post only once a day than have 200 different site features that you can’t maintain. Not only will you own your niche, but you won’t water down your brand by spreading yourself to thin.

#4 Launch small.
When starting out, Facebook, Amazon and Google were not the best, biggest or the first in their industry. Instead, the stayed extremely focused on only one aspect of their business, launch it right away and grew it organically. Try to launch perfectly and you’ll miss the boat.

#5 Listen.
If you are always catering to your online audience’s needs, you’ll always be relevant. The greatest thing about doing business online is the market research is intrinsic part of the daily work flow. Visitors and online customers will be the first to tell you what product or services they want, what content they wish to read and where the industry is headed.

Share on Facebook

As we grow and learn as web designers, we all tend to lean to one style in particular, and it helps define us, and our work, as individuals. However, to grow, we need to learn new things.

Sometimes a client wants something else, so we need to abide — though we can (and should) learn to design in new styles for our own personal benefit as well. With that, we can discover and perfect our understanding of alternative design principles, learn how to work with new design elements, and overall broaden our skill set.

When venturing into a new style we’re not familiar with, we can’t just open up Photoshop, expecting our design to come out as spectacularly as the style we’re more familiar with. Just as we grew to know our niche design style, we must, in a sense, re-teach ourselves design for each particular style.

Here is how to define, what to look for, and what to research when venturing into a new style of web design. Many of these features are better defined in our previous article, 5 Ways to Become a Better Designer, Right Now. Be sure to check that out in addition to this.

1. Define the Style

Whether this new style your researching is grunge, sleek, web 2.0, hand-drawn, typography, or whatever else, we can follow the same steps to research it. That first step to take is to actually define the style. Be sure to define the style in detail based from examples, sources, and any historical implications.

Below are a few great examples in blog posts, but the same technique can be used for this stage of discovering a new style.

Grunge Style

“as Web 2.0 style is all about glossy and shiny look, another option would be something rather crude, radical and provoking. Such as the grunge style — dirty look with irregular, nasty, sometimes even ugly and crooked visual elements. Will it establish itself as a trend? Probably not. However, it may be used once some creative and unconventional design approach is needed.” — Smashing Magazine, on grunge web design

Web 2.0 Style

“If I had to sum up “Web 2.0″ design in one word, it would have to be “simplicity”, so that’s where we’ll start.

I’m a great believer in simplicity. I think it’s the way forward for web design.

Today’s simple, bold, elegant page designs deliver more with less:

• They enable designers to shoot straight for the site’s goals, by guiding the site visitor’s eye through the use of fewer, well-chosen visual elements.
• They use fewer words but say more, and carefully selected imagery to create the desired feel.
• They reject the idea that we can’t guess what people want from our sites”

— Web Design from Scratch, on Web 2.0 style web design

Hand-Drawn Style

“The most valuable and innovative ideas had all been handwritten first. That’s no big news, since designers tend to produce first sketches as paper prototypes anyway; still it’s important, because web design is different from “usual” design. Of course, it also has a personal note and it is hand-made, however users can’t see that. As CSS is “boxy but good”, designs tend to have a rather limited appearance — they are too boxy and too right-angled.

…The main purpose of hand-drawn elements lies in their ability to convey a personality and an individual note in times when colorful, sharp and rounded Web 2.0 elements can be found almost everywhere.

…Since hand-drawing is a typical feature of graphic artists, designers and illustrators and is often associated with creativity and inspiration, it is often used in portfolios and showcases.” — Smashing Magazine, on hand-drawn web design

Get out a piece of paper, and actually define the style on paper. This is an essential step in brainstorming, and knowing what and what not to include. Write down when this style is appropriate, what elements should be there, what should not, and notes on colors, typography, texture, and more.

2. Find Examples

After defining the style on paper, the next step is to actually find some inspiration. Doing a quick Google search on “Hand-drawn web design” or “Web 2.0 web design” is a great way to start. Many showcases will pop up and you can choose any to get started.

Going through showcases, pick out your favorite designs in each. You may want to pick up a similar design strategy when venturing into this new style. Despite sharing a design style, different websites can still have a lot of variety. As an example, the two web designs below are both grunge style, but they are also very different.

Further define examples of the style you prefer, again looking at texture, color, shapes, layout, etc.

3. Define Colors

We should have already defined color in a basic sense when defining our style in step #1, and when writing an extended definition in #2. However, let’s get even more specific. To get more inspiration, a Google search on “Grunge style colors”,  or “Web 2.0 colors”. Also check out a website like ColourLovers and do a search with similar keywords.

Of course, some web design styles will be color independent, such as the hand-drawn design style, or a typography-based design style. This is where viewing your favorites when looking for examples comes in. What colors did you like on these examples? Did you like the colorful hand-drawn websites, or the black and white typography designs? There can be a lot of variation in color for these types of designs, and it can leave a lot of room for creativity.

Bookmark some palettes on ColourLovers that match the style your looking into, and that match your personal style.

4. Analyze Textures

Grunge style isn’t the only style known for textures. Each style has it’s own set of textures — whether it be earthy, man-made, glossy, gradients, subtle, or whatever else.

For example, many hand-drawn styles have a paper or watercolor texture to them. The popular blog, Web Designer Wall is a great example of this:

For even something like a website that features simple gradients for texture, check out how heavy the gradient is (difference between the lightest and darkest part of the gradient), and where it is used most. The apple website is a great example of a Web 2.0 and minimalistic web design style mix. Note that the heaviest gradient is on the navigation, where they would like the user’s eye first. This is a very user-centric web design, as defined for the Web 2.0 style above, in point #1.

5. Don’t Forget to Look at the Wireframe

We’ve researched general design elements that make up a web design, but let’s also not forget about the wireframe. Of course, we should always strive for alternative layouts that are still user-friendly, but some design styles work with interesting layouts more than others.

As a general rule, the simpler the design style, the more complex and original a wireframe can be. This can add interest to the design, as long as the designer pays attention to other elements that will help guide the user’s eye around a layout they’re not used to. In contrast, more complex styles, such as hand-drawn and grunge style should stick to more generalized wireframes that are quickly easy to navigate.

Of course, the rules for this can be variable, and one should look into a number of different options when determining a wireframe to go with their new design style. Check out some examples again while paying closer attention to the wireframe, and see if there is much variety. If you come across an interesting wireframe sharing that design style, how did the designer make it work? Would it be better with a more traditional wireframe?

6. Take a Close Look at the Details

As any experienced web designer knows, a web design is not complete until it has a bit of polish. There are tiny details in each web design style that make it appealing in it’s own sense, and when lurking into a new style, the details also have to be researched.

Minimalistic or Web 2.0 styles tend to have icons that do the trick, while hand-drawn or grungy styles tend to keep the detail in the imagery. It can become much more advanced than this though, so be sure to look back to the examples and see where and what the details of your chosen design style are.

Below is a zoomed in example of the Envato website. Rounded corners aid in the “sleek” look, and there is a huge amount of detail in the placement and construction of icons on the website.

7. Check Out Further Resources

It is very likely you’re not the first to try to define and research this design style. Look through other resources that do the same, and see what they have to say on the subject. You may read something you forgot in your own analysis. Below are a few helpful articles on popular web design styles.

Share on Facebook

1. Lines and Borders with Depth

This feature is often used in amazing sleek web designs, but overlooked by beginners trying to create a similar feel. An example of this effect is below. On the left are two lines, that could possibly be used as a line or border in a web design, and on the right is the same, but with a bit more depth.

As anyone can see, the line with depth is a lot more visually appealing.

How to Create a Line with Depth

1. Create a new layer on top of the background color.
2. Instead of a 1-pixel solid color line, create two lines: A 1px black line on top of another 1px white line.
   (For a horizontal line, as one can guess, just put a 1px wide black line next to a 1px wide white line.)
3. Set this new layer to overlay, then merge the new layer on top of any bottom layers as necessary.

Examples Used in Web Design

2. Reflective/Gradient Shine

Anything that looks glossy can just about be considered Web 2.0. The use of a few short techniques to add gradient and gloss can spice things up. The example below is what it looks like in action, just applied to a rectangle of solid color. The same effect can be used on logos, the background for content areas, text, images, and more.

How to Create a Reflective/Gradient Shine

1. Create a new layer over the original image. (In this case, the plain green rectangle.)
2. Using the Elliptical Marquee tool, create a portion of an ellipse on the top part of the rectangle.
3. Create a white to transparent gradient vertically upwards. Make sure the white is on the bottom. (To create a completely vertical gradient, hold down the shift key.)
4. Change the layer’s blending mode to Soft Light.
5. Press “Ctrl [Cmd], Shift, I” to invert the current selection. Then, create another new layer.
6. Create a black to transparent gradient in this selection, with black on the bottom.
7. Change this layer’s blending mode to Overlay.
8. Put the opacity of both gradient layers down by about 50%. Alter the opacity of both until the image looks right.
   

3. Drop Shadows

Drop shadows are used surprisingly often in Web 2.0 design, despite their bad reputation for being old-fashioned and cheesy in the web design world. This is because they are great for adding a sense of realism to a design, like a realistic sense of a flat piece of paper (or other material) setting on another flat surface. That’s the effect we get on the right.

However, on the left, it’s easy to see the effect is cheesy, old-fashioned, and should never be used. On the left, the dropshadow gradient is so large that it seems as though the green block is unnaturally floating above the flat background.

The trick is to use dropshadows to make things realistic. Don’t use dropshadows just for the sake of using them.

4. Rounded Corners

They’re not included in the new CSS3 for nothing. Rounded corners are often times a great way to add a bit more appeal to a design, especially a modern design. Many sleek and modern product designs often feature smooth curves and edges. Blocky feels old and clunky — smooth is new and modern.

Wrapping Up

Not all of these have to be used simultaneously for a great Web 2.0 design, but they are a closer look at some simple tricks one can try to see if the effect will improve a sleek web design. In the end, though, good design comes from experience and a good eye for design.

These are, of course, very basic principles and are meant for beginners in web design. Anyone looking for the next step, or for anyone looking for more advanced techniques, should check out How to Accurately and Effectively Research a Web Design Style. The article goes over how to discover your own techniques when learning Web 2.0, or any other design style for that matter.

Share on Facebook

Here is a diagram to illustrate what web point is and what it has become:

Image Source: O’reillynet.com

Here are some quick and easy modifications and ad-ons you can make to your website to become “Web 2.0” if it isn’t already.

1. RSS Feeds: Feeds have become great assets to websites. The user now has the option to receive all you’re websites updated information without actually having to visit your website. RSS Feeds have greatly improved repeat visitors and readership/subscriptions across the board.
2. Blogs: Blogs have personalized companies/products with consumers. Users want to feel like they buy (either product or information) from a trusted source and someone they know. Blogs have personalized this relationship between the companies and users. Start a blog on your business (service or product) to better inform the customer and that will also keep them coming back, asking questions, etc.
3. Bookmark Submission Buttons: Any site you have that can provide information to a user should have Bookmark submission buttons. If one person is interested in what you are saying, there is a chance another million are as well. These button will facilitate and better expose your information to the masses on pages such as Digg.com, Stumbleupon.com, Netscape.com, and others. They are not only great traffic drivers but link builders as well.
4. User Interaction: To me, this is the most important tool you can implement on your website today (if possible). User’s want to interact with what they are looking at or reading, its human nature. We have opinions, we like to share. Over 80+ million people share their lives over their profile on Myspace, Over 2 million people are now sharing websites they think others will find interesting on Stumbleupon.com, and Over a million people are sharing stories they think others will enjoy on Digg.com, and in all these together, many more millions of people place comments. Make you’re user be hands-on if possible with your website, and interact with your company.

One great example of a website which redesigned it’s look to become “web 2.0” is USAtoday.com. After it’s makeover, the website had a 380% bump in traffic! Their new design not only engages users in all their stories but also has the look and feel of the new Web 2.0 design. Its very clean and simple.

Redesigning you’re website can be a difficult task if you’ve had something in place for a long time, but it’s a must to move forward and keep up with the ever-developing web. Start by making small changes and implementing whatever you think can work best to better engage your visitor.

Share on Facebook

Here are some basic htaccess techniques and tips to get you started. They’re not nearly as frightening as many people expect, and if you study the code for a few minutes, I am sure that you’ll quickly grasp exactly how it works.

Also, check the end of this post for some great resources on .htaccess. This post should be helpful for beginners, Designers, and even Developers of all experience levels!

QUICK TIP – If you have never used an .htaccess file before, and you are using Dreamweaver, you may have to add the .htaccess extention to the ‘file types’ in Dreamweavers Preferences, that way you can open the file and view it in Dreamweaver, It should look just like a plain text file. Also, .htaccess files typically are not very long, only several lines of code, Hopefully the resources at the bottom will help you if you get stuck and don’t know what to do .

1. Creation of a custom error page:

htaccess on a Linux Apache server makes it easy to create your own custom error pages. Just create your custom error page files and then add following code to your .htaccess file:

ErrorDocument 401 /401.php

ErrorDocument 403 /403.php

ErrorDocument 404 /404.php

ErrorDocument 500 /500.php

ErrorDocument 401 /401.php

ErrorDocument 403 /403.php

ErrorDocument 404 /404.php

ErrorDocument 500 /500.php

(Obviously you should replace with your own file path and name.)

2. Prevention of directory browsing:

If you don’t include an index file in a directory, visitors can browse the directory itself. But preventing that is as easy as adding a single line to your .htaccess file:

Options All -Indexes

3. Setting the default page of each directory:

If you don’t want to use an index page in each directory, you can set the default page visited when someone reaches that directory by adding this:

DirectoryIndex news.html

DirectoryIndex news.html

(You will have to replace the “news.html” bit with whatever you want to use as the default.)

4. Setting up a 301 redirect:

If you move around the structure of your site and need to redirect some old URLs to their new locations, the following bit of code will do so for you:

Redirect 301 /original/filename.html http://domain.com/updated/filename.html

5. Compressing file output with GZIP:

You can add the following code to your htaccess file to compress all of your JavaScript, CSS and HTML files using GZIP.

<IfModule mod_gzip.c>

mod_gzip_on         Yes
mod_gzip_dechunk    Yes
mod_gzip_item_include file      \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler   ^cgi-script$
mod_gzip_item_include mime      ^text\.*
mod_gzip_item_include mime      ^application/x-javascript.*
mod_gzip_item_exclude mime      ^image\.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

</IfModule>

<IfModule mod_gzip.c>

mod_gzip_on   Yes

mod_gzip_dechunk Yes

mod_gzip_item_include file   \.(html?|txt|css|js|php|pl)$

mod_gzip_item_include handler  ^cgi-script$

mod_gzip_item_include mime  ^text\.*

mod_gzip_item_include mime  ^application/x-javascript.*

mod_gzip_item_exclude mime  ^image\.*

mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

</IfModule>

6. Redirecting to a secure https connection:

If you want to redirect your entire site to a secure https connection, use the following code.

RewriteEngine On

RewriteCond %{HTTPS} !on

RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI}

7. Blocking script execution:

You can stop scripts in certain languages from running with this code:

Options -ExecCGI

AddHandler cgi-script .pl .py .php .jsp. htm .shtml .sh .asp .cgi

(Options -ExecCGI

AddHandler cgi-script .pl .py .php .jsp. htm .shtml .sh .asp .cgi

Just replace the types of scripts you want to block).

8. Forcing a file to download with a “Save As” prompt:

If you want to force users to download a file instead of opening it in their browser, use this code:

AddType application/octet-stream .doc .mov .avi .pdf .xls .mp4

9. Restricting file upload limits for PHP:

You can restrict the maximum file size for uploading in PHP, as well as the maximum execution time by,

php_value upload_max_filesize 10M       /Max file size for uploading

php_value post_max_size 10M             /Max size for post data

php_value max_execution_time 200        /Max time in sec for running before termination

php_value max_input_time 200            /Max amount of time in sec for parsing input

php_value upload_max_filesize 10M

php_value post_max_size 10M

php_value max_execution_time 200

php_value max_input_time 200

10. Enabling File Caching:

Enabling file caching can greatly improve your site’s performance and speed. Use the following code to set up caching (changing the file types and time values to suit your site’s needs). Time shown for Max age is in Seconds.

#cache html and htm files for one day

<FilesMatch ”.(html|htm)$”>

Header set Cache-Control ”max-age=43200″

</FilesMatch>

#cache css, javascript and text files for one week

<FilesMatch ”.(js|css|txt)$”>

Header set Cache-Control ”max-age=604800″

</FilesMatch>

#cache flash and images for one month

<FilesMatch ”.(flv|swf|ico|gif|jpg|jpeg|png)$”>

Header set Cache-Control ”max-age=2592000″

</FilesMatch>

#disable cache for script files

<FilesMatch ”\.(pl|php|cgi|spl|scgi|fcgi)$”>

Header unset Cache-Control

</FilesMatch>

#cache html and htm files for one day

<FilesMatch “.(html|htm)$”>

Header set Cache-Control “max-age=43200″

</FilesMatch>

#cache css, javascript and text files for one week

<FilesMatch “.(js|css|txt)$”>

Header set Cache-Control “max-age=604800″

</FilesMatch>

#cache flash and images for one month

<FilesMatch “.(flv|swf|ico|gif|jpg|jpeg|png)$”>

Header set Cache-Control “max-age=2592000″

</FilesMatch>

#disable cache for script files

<FilesMatch “\.(pl|php|cgi|spl|scgi|fcgi)$”>

Header unset Cache-Control

</FilesMatch>

11. Protecting your site from hotlinking:

The last thing you want is for those stealing your content to also be able to embed the images hosted on your server in their posts. It takes up your bandwidth and can quickly get expensive. Here’s a way to block hotlinking within htaccess. You will have to replace the domain\.com with your own domain name.

RewriteEngine On

RewriteCond %{HTTP_REFERER} !^$

RewriteCond %{HTTP_REFERER} !^http://([ -a-z0-9]  \.)?domain\.com [NC]

RewriteRule \.(gif|jpe?g|png)$ - [F,NC,L]

RewriteEngine On

RewriteCond %{HTTP_REFERER} !^$

RewriteCond %{HTTP_REFERER} !^http://([ -a-z0-9]  \.)?domain\.com [NC]

RewriteRule \.(gif|jpe?g|png)$ – [F,NC,L]

12. Disguise your file types:

You can disguise your file types by making them appear as PHP files. Just insert this little in:

ForceType application/x-httpd-php

Share on Facebook

Share on Facebook

Many small businesses (or those just getting started) often choose to use the most affordable or inexpensive web hosting they can find. While it’s natural to want to save money up-front, in the end, choosing a web host based solely on price can lead to more problems and lost sales than it’s worth.

Choosing a Web Host: Price is Only One Factor

The cheapest web host isn’t necessary the best choice for your business. Neither is the most expensive. For that matter, price offers no conclusive evidence on how well a web host will perform.

In my 5+ years online, I’ve gone through many hosts, using both shared hosting (where many domains from different customers are hosted on the same server) and dedicated servers (where you have an entire server all to yourself, to host as many or as few domains as you like).

I’ve paid as little as $5/year, to as much as $250/month.

My worst experience by far was with the most expensive shared hosting account I used. This inept web host messed up big time and all of our sites went down for 4 days. That’s four days! Coupled with poor communication, rude support staff, and incompetent techies, it was an experience I don’t care to repeat – at any price.

Reliable web hosting is paramount. Downtime costs you in lost sales and lost productivity.

When Is It Appropriate to Use Inexpensive Web Hosting?

Every business naturally wants affordable web hosting, however your business defines “affordable”. Budget hosting solutions can be appropriate for:

* Testing – if your site is in development and not quite ‘ready’ for the public, you can save some money by going “cheap” until the site is developed. Potential downside: when you move to your ‘permanent’ web host, you may have to re-install or re-test any software to ensure it runs the same on your new server.

* Non-critical websites – hobby sites, for instance, or websites that don’t sell anything.

* Businesses that are seriously strapped for cash. If you truly are operating on a shoestring budget, and you think your funds may be put to better use elsewhere (marketing, for example), then inexpensive web hosting may be a good option for you. Potential downside: what happens if you send out a big marketing campaign… and then your website goes down?

Once again: just because a web host is inexpensive, does not indicate that it has poor reliability or support! Price is but one factor to consider when choosing a web host.

Share on Facebook