Custom Web Design V/S Website Templates

As an entrepreneur you are continually looking how to save cash and make your business profitable. Regarding the matter of making an online vicinity for your business, much the same as your promoting materials and office’s appearance, your website needs to venture a professional picture. The more professional looking your business shows up, the more respectable it looks.

Numerous entrepreneurs don’t generally comprehend the distinction between having a custom web design done and utilizing website formats. In this article we’ll take a gander at both methods for having your website assembled and the expenses included.

Custom Web Design

Numerous think having a custom web design is excessively costly yet we should take a gander at the upsides of procuring a web designer over utilizing a free website layout or buying one.

Advantages of custom web design:

  • Unique design: With a custom web design it is made only for your business. Your website will be not the same as anybody else’s.
  • By employing the right web designer, it will be built so it is search engine friendly. – How the foundation coding of your website is done will impact your accomplishment in the web indexes.
  • The website will be more versatile to your organization’s requirements. In the event that you have done your website arranging, you will have a rundown of elements you wish to have. By organizing this rundown of website components, you will give the web designer a thought of what to suit for later on if your current budget doesn’t permit all the features to be actualized from the begin.
  • Scalability Just like versatility, in the event that you have arranged what you need later on for your website, a great web designer will think seriously about this as they select the advances to utilize while constructing the website.

Different focuses to contemplate when choosing if custom web design is for you are:

  • Are you wanting to keep up the website yourself?
  • If you don’t plan to figure out how to code a website (or have somebody on staff that can do this well) then you are going to need to demand that a content management system be consolidated into the web design.
  • Are you allowed to utilize the design made for the website for different purposes? The website design ought to consolidate your organization’s marking. On the off chance that you have effectively settled your organization marking, then that marking ought to be consolidated into the website. For a business that hasn’t built up a marking or is experiencing a patching up, then you are going to need to know whether you can utilize the design on the website somewhere else, similar to your letterhead, leaflets and signage to specify a couple. This will build the cost of the custom web design, yet then you will have everything match.

Another thought if considering a custom web design is, simply have a template made consolidating the website theme. You can then, on the off chance that you have the right stuff, reuse the layout topic to make the web pages for your website.

Website Templates based Design

There is a misguided judgment on how advantageous and practical utilizing free website layouts or obtained website formats is. We should take a gander at a few focuses about website formats:

Website formats are useful for:

  • Getting motivation on hues, designs and elements. You can’t have your web designer duplicate these, however they do give the web designer a thought of the look you would like.
  • Very low budget where you have to get up and running at the earliest opportunity. On the off chance that financial plan is keeping you away from getting your business up on the Internet, then perhaps a website format may be the best approach.
  • Shorter improvement time. Doubtlessly utilizing a website layout would incorporate a shorter advancement time needed for your website. Not so much, read on.

Presently onto different contemplations when picking a website format.

Utilizing website formats do have a few ruins:

  • There will be a huge amount of other individuals utilizing the same format. Unless you pay the “Select” cost for the format, the layout website is going to continue offering that same layout to anybody that goes along. Remember, regardless of the possibility that you pay the selective cost, there are other people who have purchased the layout preceding you despite everything they have the privilege to utilize it. On the off chance that it’s a truly engaging format, there may be loads of other individuals who have as of now purchased that very layout.
  • You will be restricted on the customization of the website layout. Without web page coding abilities, you are as yet going to need to either invest the energy and cash to figure out how to code a web page or contract somebody to help you.
  • Some layouts are laid out certain. Significance in the event that you fuse your own particular illustrations or have broad content, the format could break.
  • Some website formats are not assembled to be web crawler inviting. As clarified above, it is vital how the foundation coding of your website is finished. If not done accurately, it could hurt your showcasing endeavors on the web.
  • Antiquated coding. On the off chance that the website format uses antiquated coding, it may not work in all browsers. Browsers particular elements are another indication of antiquated coding.

Custom Web Design or Website Template?

At the point when choosing if a custom web design is the best approach or if a website format is a superior decision remember that you need your business to emerge from the group and be paramount.

To keep up or assemble the website yourself you are going to need to contribute some time (and cash perhaps) into realizing everything to building a web page.

Presently, take a seat and make sense of precisely how much every technique for building the website is really going to cost. Incorporate the time it is going to take you realize whatever you have to figure out how to utilize a website layout and contrast that with the expense of a custom web design where you will have time to market or manufacture your item in the same time span.

There is an old saying: “Time is Money“. Remember that when picking betweencustom web design and website layouts.

Characteristics of Proficient Web Designers

Of the many technology-related careers and professions today, one of the most exciting (and most lucrative) fields, is web design. Well, take a look around you, and you’ll see everyone logging online to do research, shop for groceries, pay bills, book airline or concert tickets, apply for jobs, run advertising campaigns, etc. This explains why small, medium and large companies are always on the lookout for web designers who’ll design, and maintain their online portals. Here’s a look at a few of the key characteristics of proficient web designers.

1. A Good Web Designer Has Above-Average Design Skills

One of the key characteristics of Website design Egypt experts is that they have in-depth HTML skills. Web designers who know how to write the HTML code by hand are sought-after because writing the HTML code by hand eliminates “code bloat”, which is notoriously created by programs like Dreamweaver and WordPress.

An expert web designer also knows CSS, or Cascading Sheet Styles, which controls font sizes, colors and does away with code bloat too. They’re also proficient at SEO, graphic design, social media marketing and networking, as well as setting-up mobile websites.

2. Expert Web Designers Create Clean-Cut Websites

Another key characteristic of seasoned web development Egypt experts is that they always churn out professional-looking and clean-cut websites. If the designer knows nothing but fill the site with obnoxiously flashing affiliate banner ads and other links at the top of the home page, then they’re just trying to earn a living through advertising, and not their web design skills.

3. They Reach Out To Clients, And Always Find Solutions

Apart from being technically proficient, a good web designer Egypt always reaches out to his or her customers too. The web designer makes it a point to schedule daily or weekly meetings with customers, so they could both review the processes, and they can directly get feedback from clients too. Good web designers also know how to look for solutions, and not just settle for shortcuts.

4. They Are Proficient In SEO

Apart from building or designing websites, the web designer Abu Dhabi should also be armed with SEO, or search engine optimization skills. It’s because if he or she doesn’t know an inch about SEO, how are they going to make the website more visible, and search engine friendly? With SEO, a truly good-looking website will gain better online traffic, and will enjoy wider visibility too.

5. They Are Innovative, And Know Their Client’s Market

A skilled web designer always approaches a project with a fresh and innovative mindset. He or she also has a critical view of aspects like user interface and graphic design, and has a habit of pushing things forward, and exploring new boundaries. The designer also has ample knowledge of the industry or niche that he or she’s working for.

6. They Are Proactive and Collaborative

Even the most seasoned web designers will experience a couple of road blocks and hurdles along the way. But for seasoned web designers, there’s always a solution for any problem, and the best way for finding solutions is to ask fellow designers for advice and help.

A seasoned web design expert also keeps his or her co-workers and clients in the loop always. This means that they keep everyone updated and consulted, from day one to the final stages of web design and development. When hiring one, make sure you carefully check the designer’s credentials, so that you’ll get the best and brightest web design Egypt experts.

Proficient web designers are also ethical individuals. They use their special skills to maximize the website’s utility for its users, as well as to make sure that site visitors are offered the greatest ease of navigation. They also fully comply with local and international codes of conduct and standards, and do not use illegal methods or non-compliant software.

What is Invisible Design ?

Design is not always an in-your-face art. It is subtle, usable and often undefinable. Quite simply, good design is often invisible.

And just to be clear – invisible design is not about adding layers or transparencies or hidden meanings to projects. It is about creating great user-oriented projects that work functionally and visually.

It’s something I heard over and over again when I was starting out as a young designer. If you have to “decorate” the canvas, you are over-designing it. The best design – the design that really makes a project work – is invisible.

But how to you achieve that invisible design? Especially when web design is a quite visual tool. (As a bonus, a few websites that exemplify the idea of invisible design are featured throughout this post.)

So before we get too far along, design is visible. There’s no argument about that at all. But the techniques and tools you use, should not be glaringly obvious to the common user.

Much of design is about “feeling right.” Users want to engage and interact with something. They don’t necessarily understand why. That’s invisible design.

Though the concept had been pounded into my brain long before I heard him say it, Oliver Reichenstein, founder and director of Information Architects, is quite famously known for emphasizing this invisible design concept. Here’s a brief bit from an interview with The Verge.

“Good design is invisible. Good screen design happens in the subatomic level of microtypography (the exact definition of a typeface), the invisible grid of macrotypography (how the typeface is used), and the invisible world of interaction design and information architecture. Minimum input, maximum output, with minimal conscious thought is what screen designers focus on. And just as type designers and engineers we do not try to find the perfect solution but the best compromise.”

Invisible Communication

Day trip

When you create a webpage or mobile app or even interactions for a smartwatch, you are designing some type of communication. The design needs to support the message and not get in the way of it.

You will create an experience with all the design tools at your disposal. The end design is not for you, and not even for other designers, it’s for a wider audience that does not understand (or care to think about) color theory or spacing or typography. They only know if these things come together in a way that feels cohesive, usable and interesting.

That’s why it is important to think about design as an invisible tool.

Different Types of Invisibility

Bill Bbyron Wines
Thank Bot

When we talk about invisible design, a few different things come to mind. Each type of invisible design is important and likely impacts your work in a variety of ways.

  • Invisible products and placements, such as brands or advertising that you might not even notice. (This is important for app and game designers that often have to think about where placements appear in their design.)
  • Invisible interactions and notifications that happen so seamlessly that you perform an action or task without thinking about it. (Such as alarm or alert on your phone.)
  • Invisible aesthetics that create an emotional connection and bond with users, making people desire engagement. (That’s what we will focus on.)

Design Techniques


Invisible aesthetics are rooted in the basics of design theory. It’s not a trend or application of a cool new UX feature. It’s using text, color, typography, images, icons and techniques to share a message. So let’s go back to some of the basics and how they can work for you.

  • Text and language: The words you use convey a tone and emotional response from users. Use language that communicates the way you want people to feel when they interact with the design. Is it formal, lighthearted, comical? Should it make you feel passion or want to act in some way? Also think about the rhythm of the words; how do they sound when you read them out loud?
  • Color: Every color or color combination has a feel to it. With emotional and cultural considerations to think about, color choice can take a lot of time. Take care with the color palette to select colors that help users perform specific actions as well as create the right feel, harmony and balance.
  • Typography: Typefaces can have meanings of their own as well. From clean sans serifs that take on the meanings of their surroundings (Helvetica) to complex blackletter styles (Baroque Text) with a feeling of formality, the type of letterform you select will convey a specific feel. When in doubt, stick to sans serifs or simple serifs with uniform stroke widths in a regular weight.
  • Images: What is happening in the images you use? This includes photos, animations and videos. Are the people happy and smiling? (Are there people at all?) Are the colors warm or cool? Is the action fast or slow? Proper pacing and flow — think of it as a walking speed – can create a certain comfort level for users. Action that is too fast or slow, can start to bring attention to that fact and users will focus on it more than the image itself.
  • Icons and UI elements: A consistent set of icons and user interface elements works wonders on the path to invisibility. A set tells users how a site works and how to interact with it with a standard display even though the action or specific look in each icon might be different. The invisibility happens when the user does not have to think about how it works. Think of the shopping cart icon that almost every retailer uses as an identifier to check out or view items. Users don’t have to think about how to navigate to the final step or make a purchase; this element directs them to the appropriate action.
  • Other techniques: There’s a whole toolkit of design techniques out there than can work with or against your design — drop shadows, text effects such as bevels, strokes and frames, spacing, underlines and the list goes on. They key with any of these techniques is use. If you are opening the tool in editing software and clicking “apply” while using the default settings, you are probably doing it wrong and will end up with a garish effect. These effects should be used in such a way that the user does not look at an image and comment that it includes a great shadow (although a trained design eye might notice it). The design effects should only contribute to the overall message and goal of visuals.


Now think back to what Oliver Reichenstein said for a moment. He emphasized both “micro” and “macro” elements. This is key. To be completely invisible, the design needs to be perfected down to each detail.

Design simply and with purpose. Don’t over embellish or add in trendy elements just because you want to use a technique. Design the little pieces so that they work seamlessly and design the big picture so that it paints a complete image of what your project is supposed to portray. Don’t overthink it: Sometimes a simple solution is the correct solution. (Maybe this whole idea of invisible design is what helped flat design take off, and why it has remained so popular.)

Have you stumbled across website designs that you think work beautifully and invisibly? Share them with us in the comments.

How to Create a Linked Cascading Style Sheet (CSS)

Over the years, web design and development standards have changed. One of these changes is in the use of Cascading Style Sheets (CSS) to control the overall appearance of a website. Utilizing CSS in your website design enables the you as the developer to make sweeping changes to the entire site while only modifying one line of code.

Begin by opening a simple text editor such as Notepad (in the Accessories folder of the Windows programs menu).

The first style modifications you will make are going to affect the entire web page so you will begin by adjusting the background color and text color of the entire page. First type body {

Now try changing the background color by typing background-color:immediately followed by the color code and ending the line with a semicolon (each line within a style tag must be ended by a semicolon). The color code can be entered in several ways.

  • Hexadecimal notation – a six-digit alpha-numeric code that lists the red, green and blue values, in that order, for that color. (i.e. #000000 is black, #FFFFFF is white, #FFFF00 is yellow).

Red, Green, Blue percentage – uses a percentage value to denote how much of each color is represented (i.e. rgb(100%, 100%, 0%) is yellow and rgb(100%, 50%, 0%) is orange).

Red, Green Blue values – this technique is similar to the percentage but the value used is from 0 to 128 (i.e. rgb(128,128,128) is white and rgb(64,64,64) is grey).

Color name – certain colors can be entered as a text value like black, white, red, blue, green.

To affect the text color type color: followed by the desired color. Use any of the techniques listed above for changing the background-color.

Close the body tag by typing an ending }

In this example, we will make similar changes to the <h1> tag (Header 1) by next typing h1 {

Modify the font that will be used by the browser to render any text contained in this tag. Here we will be using the verdana font which is one of the default fonts installed with most Windows operating systems. A good rule of thumb is to list two desired font-types and then a font class. You would implement this by typing font-family: verdana, arial, sans serif; However, as we’ve shown here, you can simply chose just one font.

To modify the size of the text, type font-size: followed by the desired size. The size can be defined in pixels and ems. For now, define the text size at 22px.

Change the color of the text using the same methods defined above for affecting the body style. In this example we’re making the text grey by typing the hexadecimal color codecolor: #CCCCCC;

Don’t forget to close the h1 style definition by typing }

To modify the paragraph tag begin by typing p { and make changes similar to those made in the h1 style definition.

Once you are satisfied with your style definitions you must save the file in a format that the browser will recognize. In this case we will save the file as styles.css though you can actually name the file as you chose so long as it ends in .css (i.e. mystyle.css, myfile.css, sitestyle.css). For people using Windows Notepad, make sure that the “Save as type” drop down box says “All files” or an additional .txt file extension will be added. For this example, we will also save our CSS in the same folder as the web page we are working on.

Still using your text editor, open the html file where you wish to link the CSS.

Insert the following line of code somewhere between the <head> tags:”'<link rel=”stylesheet” type=”text/css” href=”styles.css” media=”all”>”’

  • link rel=”stylesheet” (The link relationship with the document, is a stylesheet)
  • type=”text/css” – tells the browser what type of document you are linking to.
  • href=”styles.css” – the path to the location of the style sheet.
  • media=”all” – specifies the type of media the link tag is referencing.

Refresh or open your browser to see the changes you’ve made to your web page.

How to Use Basic Web Templates

While there are many ready-made templates available, they can end up feeling just like everyone else’s website, especially those people who used that template. But writing a Web page layout from scratch can be difficult. Instead, you can look at free templates that just show you the layout, rather than providing images, colors, and designs, and then use your own logos, images, colors and more to create exciting websites that look unique to you – even though you used a template.

Step 1 – Choose the Template for the Layout You Like

Most Web designs can be put into 3 basic layouts:

  • 1-column layouts
  • 2-column layouts
  • 3-column layouts

For this tutorial, I’ve chosen the 2-Column Centered Flexible Width Website Templateas the base of my new website.

Step 2 – Make any Basic Structural Changes to the Layout

The template I’ve chosen will work well, but there are a couple things I need to add or change. Primarily, I want to have a navigation bar across the top of the page, not just in the narrow column. I also need more than just a sub-head as the footer, so I’ll convert that to a <div>. The specific changes I made include:

  • Removed all the optional borders from the design
  • Zeroed out the margin on the h1 headline:
    #container h1 { margin: 0; }
  • Added a horizontal menu (minus the colors) from my horizontal menu template
  • Added a footer <div> at the bottom
    <div id="footer"> ... </div>

    and used the h2 CSS:

    #container #footer { clear: both; }

View the Layout

Step 4 – Choose a Color Scheme for Your Layout

It can be hard to choose a color scheme for your website.

I typically choose the color based on something that I know is going to be an integral part of the design. Such as:

  • the site logo
  • photography of the site
  • favorite colors of the client

For my design, I knew that I wanted to build a site around a wonderful photo of the sunset from our recent trip to Hawaii. The photo had lots of great colors in it, and I finally decided on a color scheme with these colors:

  • #653A59
  • #D78F00
  • #FBF382
  • #CA8A89

I edited the sunset photo so that it was exactly 1000px – the maximum width I’d set for the page. I also faded it a little as I’m going to use it as my background and I didn’t want it overpowering the page. Then I took my edited sunset photo and set it as the background of the entire page:

body { background: #999 url(hawaii_sunset.jpg) center center no-repeat; }

Then I played around with the other colors for other elements of the page. Such as the links, headlines, and text:

a:link { color: #D78F00; } a:visited { color: #653A59; } a:hover { color: #CA8A89; } a:active { color: #FBF382;} #container h1, #container h2, #container h3{ color: #653A59; } #container p, ul li, ol li, dd, dt { color: #000; }

Finally, I changed the hover color for the navigation bar to match my color scheme that I’d chosen.

ul#navigation li a:hover { color: #000; background-color: #FBF382; }

View the Layout

Step 5 – Work with the Fonts and Typography

Right now, the text on my page is all the default font of the browser. This is boring, and doesn’t match the tone of the content. I use several things to help me decide what font families to choose for a page:

  • Sans-serif fonts are easier to read online, so I like to use them for body text
  • Serif fonts are more formal and I like them for headlines, especially h1 headlines
  • Fantasy and script fonts, while often fitting the tone better than other fonts, are not widely available
  • Comic sans is often the default for script typefaces, so I try to avoid that style
  • I like to use fonts that are similar on both Windows and Macintosh, so my readers get a similar experience

Compare fonts on Windows and Macintosh

After looking at the chart, I decided to use Palatino Linotype and Palatino as my primary serif typeface choices with Book Antiqua and New York as alternatives. So I set up my headlines with this font face. I wanted to use the sizes as reference to their priority as well. This is the CSS I wrote:

#container h1 { font: bold 2em/2.25em "Palatino Linotype", "Book Antiqua", Palatino, "New York", serif; } #container h2, #container h3 { font: "Palatino Linotype", "Book Antiqua", Palatino, "New York", serif; } #container h2 { font-size: 1.5em; line-height:0.8em; } #container h3 { font-size: 1.25em; line-height:0.8em; }

For the standard text on the page, I wanted a sans serif font, so I chose Geneva and MS Sans Serif from the compatibility chart. I wanted the font to be a decent size, with the list in the narrow column slightly smaller. If I thought there were going to be other tags in that column, I’d change the style selector to reflect other text options.

#container p, ul li, ol li, dd, dt { font: normal 1em/1.25em Geneva, "MS Sans Serif", sans-serif; } #thin-col ul li { font-size: 0.9em; }

I used ems as my type measurement because it flexes with the browser font sizes. This makes the page more accessible. However, whatever measurement style you choose, you should use it throughout – don’t mix ems with pixels or points with percentages. If you do, you can end up with some strange looking effects.

View the Layout

Step 6 – Add Content

If you’re like most designers, you could do more, and you probably want to. That’s fine. Design away. But don’t forget to add content to your page so that you can launch.

5 Most Common Interaction Design Mistakes on the Web

Designing an interaction has never been easy. It involves deep analysis of user behavior and meticulous planning. With new technologies and interaction design patterns emerging, things are not getting easier.

Users are harder to impress with glossy images, smooth hover effects and unexpected animations, but the dilemma remains the same — how can you create a delightful user experience that generates conversions along with users’ smiles? If you’re aware of common design pitfalls, you’re far less likely to make them.

To make it easier for you — and perhaps to let you know that you’re not alone — here is a roundup of the most common interaction design misconceptions.

1. Overwhelmed with Innovation

Web designers are a creative lot. We want to express ourselves through our work. We’re always looking for innovative ways to make designs stand out. However, when it comes to IxD, innovation doesn’t always work for good. It might even be bad for your site. Users crave familiarity and often they are tuned in to certain ways of operation.

Randy J. Hunt, Etsy’s Creative Director and author of Product Design for the Web, put it clearly: “Hey, designers: stop trying to be so damned clever.” In this article, he explains in greater detail why you should not go overboard with innovation in designing for the web.

Take the Iotorama website,for example. It looks beautiful, the music is soulful, but with with all those balls moving, the user is left wondering what to do. Don’t get me wrong, the project is fantastic and super-creative! I liked the gamification idea, but it’s far from intuitive.

Overwhelmed with Innovation

Here’s another example. The guys behind the Safety on the Slopes project came up with a neat interactive webgraphic that informs users about the dangers of winter sports. It’s innovative and at the same time intuitive, immersive and fun.


2. Confusing Navigation

The “don’t be too clever” rule spills over to navigation as well. Some designers attempt to be original by experimenting with eclectic names for pages. For example, the Chijoff website leaves users wondering what exactly they deliver and how to hire them. It takes a bit of browsing to figure that the “Co-Create” page is supposed to be the equivalent of “Services.” And even then, after reading through the whole page, the user is still left wondering what to do … the end of the page has a small form to sign up for the latest industry news and tips! There is no form on the “Contact” page either, only postal and email addresses. They just do not make it easy for people to get in touch with them, or hire them.


Can you guess what “Universe” is for on the Maison Margiela website? It actually links to their Facebook page. Who would have thought?


In contrast, check out the legworkstudio’s website. It’s strikingly creative and unusual. The navigation is clear and unambiguous. There’s no chance a user will get lost.

3. Clutter

There was a time when websites tried to put everything they possibly could above the fold. Those days are gone, yet many sites still make this mistake. Take this online store:


The designer tried to stick to a simple color scheme, but the sheer number of boxes, logos and fonts in different colors on this page are enough to leave a user reeling. The search bar has catchy “So, what are you wishing for today?” text, but the overall look and feel of the layout is rather outdated.

EBay is the one major online retailer that gets this right. Instead of cramming their website with product images, promotions and multiple calls to action, eBay has kept it clean and simple, highlighting exactly what they want the user to see first, with clear prompts on what to do next.


4. Contrast, Baby!

Contrast is one of the most important means of establishing visual hierarchy and drawing user attention to certain elements. In web design, contrast doesn’t imply only color usage, but also size, shape and positioning.The most simple and vivid example is this site. They guys succeeded in consistency, but the general look of the background and buttons are not inviting when it comes to placing an order.

Modern themes

Compare to this. The color choice is close, but the result is radically different. Plus, the creative scrolling effect smoothly introduces the new amazing product feature — reflective material. Cool, huh?


5. Neglecting Form Styling

Form design is one of the fundamental parts of user experience. Each website has a goal — whether it is to generate leads, directly sell products or provide information. Unfortunately, there are many websites with glossy homepages that prefer to bore users to death with long forms and complicated CAPTCHAs. Unless the users has strong prior motivation, they’ll just leave.With effective cross-browser solutions like JCF, it’s time to forget about ugly default form elements and move toward a more immersive user experience.


Another irritating thing is when the form is too demanding or not well tested. For example, the form highlights all blank fields, even if they are not required.


If you look at the form, you’ll definitely like the hover and active button states. Plus, the “Don’t be shy” note adds a sweet, humorous touch.


Don’t be too lazy to test! What matters to you might be different from what matters to customers. Where do they encounter problems and get stuck? Is it the navigation, fancy parallax effect or long-loading video? One of the biggest benefits of user testing is that you can step into the shoes of users, focus on their needs and make improvements. Don’t try to restrain your creativity. Just keep in mind that site visitors might get confused and frustrated.

What are the worst IxD mistakes you’ve seen? Share your thoughts and stories in the comments.

Getting Started as a Freelance Web Designer

Start with an Emergency Fund

The best thing that any budding freelancer can do for herself is to set up an emergency fund. Whether it’s 3 months or 3 years, you should have enough money in a relatively fluid (ie. not your retirement account or your house) source to tide you over through lean patches. Every beginning freelancer will experience lean patches. Whether you choose to save that money by working at another job while you freelance part-time or you wait until that money is saved before starting out is up to you.

The important thing is that you have that cushion. Other benefits to an emergency fund include:

  • You can relax because you don’t have to take that job and you won’t seem desperate to clients.
  • If you’re more relaxed, you’ll be more creative.
  • If you’re more creative, more clients will want to work with you.
  • The more potential clients you have, the more work you’ll have.
  • The more work you have, the less you’ll need the emergency fund, so you’ll remain relaxed.

Create a Business Plan

A business plan often seems very rigid and boring to most creative freelancers. But creating a business plan leaves your creativity a place to grow without being side-tracked. If you treat your freelancing business seriously, your clients will take you more seriously. And a business plan is a great start. It doesn’t have to be extremely technical, but it should outline what you want to achieve from your business and what types of jobs you plan to accept.

Decide on Your Pricing Structure

Rather than worrying about how much to charge, first you should decide how you’re going to charge.

In other words, are you going to charge by the project? by the hours? set pricing? sliding scale? If you’re starting freelancing with a stable of clients who want to work with you, firstly congratulations, but secondly, you probably already know how you’re going to charge them. For the rest of us, it’s probably easier to come up with a flat rate for a specific project type – say a 5-page website. But you can also charge an hourly rate. Make your decision between flat-rate vs. hourly billing and then you can determine how to set a price for Web design work.

Come Up with a Standard Contract

If you have a standard contract ready you can get your first client to sign on the dotted line much more quickly than if you have to build it from scratch every time. Some things I include in all my contracts include:

  • Dates – dates when approvals, access details, and content are due to me, when plans, wireframes, designs, and final documents are due from me and any other dates I can think of
  • Job details – how many pages I’ll build, or hours I’ll work, or what project I’m building
  • Forfeit details – is there a penalty? How long until I stop working on the project?
  • Pricing – how much up front, how much on delivery of plans, wireframes, designs and final delivery?

These are not all that can or should be in a contract. But if you create a general outline ahead of time, you’ll be able to fill in the details more quickly.

A Professional Site

Your business website is where a lot of your clients are going to come to find out about you. Make sure that your website is as professional as you are. You don’t have to keep your pricing or portfolio on the site, but it should be well designed and act as a premier marketing tool for your business.

Business Documents

Web designers often forget to create professional documents to surround their business. I’m not talking about just business cards and logos, but also billing and invoicing documents, contracts (see above), letterhead, and so on. Just because you’re a Web business that doesn’t mean you won’t need printed documentation. You might not need a lot, but if you have at least the template ready to print for when you need it, you won’t be scrambling at crunch time.

Find a Place to Work

It can be tempting to think that as a freelancer you can pick up your laptop and work at the local coffee house, but that’s not a realistic business location. Guaranteed the first business phone call you take will be right when the group of students come in to boisterously applaud their school’s latest victory.

A quiet location with access to power and a phone or cellphone reception is best. There are options like coworking in larger cities or perhaps you can find a freelancing friend to share an office with. Many freelancers work quite successfully right out of their homes. I’ve worked with freelancers who worked out of their bedrooms or living rooms. The one thing they had in common was that their families understood that when Daddy was at the computer, he needed quiet time.

Always Be on the Lookout for New Clients

You never know when you’ll find someone who needs your services. I’ve gotten a job while waiting for an Americano at Starbucks. The key is to be friendly, have business cards ready, and be willing to brainstorm at a moment’s notice. Just because someone works for a corporation doesn’t mean they can’t hire a freelancer. And if you have some good suggestions for a new area on their site or a great change to improve their existing site, you might get a job right on the spot. Even if networking doesn’t pan out immediately, you have gotten your business card out there, and you haven’t lost anything.

Working as a Web Designer

Website design, while a relatively new industry, is now an essential part of a company’s image, brand, and advertising, marketing and public relations campaigns. The side of web design that would be considered graphic design is the creation of the actual look and feel of a website. Many web designers are also involved in web development, creating the functionality behind a working website. Even if someone wants to just focus on the design side, an understanding of the technology behind websites is essential to create designs that are both attractive and functional.

Type of Work

Work for web designers can include:

  • Designing websites to hand off to developers
  • Designing web banner ads
  • Creating animated flash websites
  • Creating mockups and site wireframes
  • Understanding web technologies
  • Understanding browser and operating system differences
  • Working closely with web programmers

Software Used in Web Design

For someone working on the design side of website, Photoshop is the most popular software. Often a designer will create one or several layouts in Photoshop and hand them off to a developer, who will create a working site based on them. For those continuing into the development side, products such as Dreamweaver, GoLive, and countless HTML and CSS editing programs can be used.

The Technology Side

There are often differences between web designers and programmers, each with their own goals in mind. Web designers are looking to create the most beautiful site possible, while programmers want something fast and functional. Being a great web designer means understanding both sides, and creating websites that look good and that are designed with function in mind (therefore avoiding these differences).

While the ability to code by hand may not be necessary, it is important to know what types of layouts are feasible, how they will appear in different browsers, and what typefaces and color combinations work well on screen rather than on paper. These types of questions make web design an interesting and challenging profession.

Definition of Script


A script is a small bit of code that enables web browsers to do something rather than just displaying static results. Scripts are used in web design to create dynamic pages andDHTML. The most commonly used scripting language in web design is JavaScript, but many developers also write scripts in ActiveX.

Some Simple Scripts for Web Pages

  • Image Rollovers and New Windows
  • Form Validation
  • Add a Google Map to Your Web Page
  • Include HTML in Many Documents
  • If you want to learn more about scripting web pages, you should check out the JavaScript site.

    Examples: JavaScript and ActiveX are both examples of scripting languages.

How much programming does a Web Designer do?

Question: How much programming does a Web Designer do?

I received the following question from Jennifer:

What percentage of the time does a Web developer/designer use programs like C++ etc? ... If I don't like the programming aspect of computers, can I have a successful career in Web design development?


Trying to decide what kind of Web developer you want to be can be tricky. There are so many options:

  • Design
    Including CSS and layout as well as graphic design
  • Programming
    Writing CGIs or Flash applications or even Ajax Web 2.0 applications
  • Content
    Writing the text or creating the images that will be used on a Web site
  • Databases
    Including working with XML, database administration, and connecting sites to databases
  • Information architecture
    Setting up the informatics behind a Web site, and making them easier to use and navigate
  • Metrics
    Watching the pageviews and tracking to validate the efficacy of Web design work
  • And much much more…

If you’re going to be a Web programmer, languages like C++, Perl, PHP, Java, ASP, or JSP will feature heavily in your daily workload. But designers and content writers don’t use them at all. You would use C++ to write CGIs and scripts to make your Web pages dynamic and interactive.

There are lots of other jobs in the Web field that don’t require any programming, they have titles like Designer, Program Manager, Information Architect, Content Coordinator, and many others.

I took the programming route because it worked for me, but I’ve worked with hundreds of Web developers who wouldn’t know a block of code if it bit them in the foot. :-) And they wouldn’t want to know it.

What about the money or job prospects?

It may be true that a Web programmer could make more money than a Web designer, and a DBA would make more than both. But if you do Web programming for the money and you hate it, you won’t be very good at it, so you won’t make as much money as someone who really loves it and is very good at it. The same is true for doing design work or being a Web DBA.

I’ve worked on jobs where I had to do everything – design, code, and content – and other jobs where I only did one part of the equation. But when I’ve worked with Designers who don’t code, usually the way we worked it is they would come up with the design – how they wanted the pages to look – and then I would work on building the code (CGI, JSP, or whatever) to make it work.

Focusing on the parts of the job that you enjoy doing will let you get better and better without a lot of struggle – as it will be fun. And the money and job prospects will come from that.

The 10 Best Free Web Editors for Windows

I have evaluated over 100 web page editors for Windows against over 40 different criteriarelevant to professional web designers, web developers, small business owners, and beginning web designers. The following editors are the 10 best free web page editors for Windows, both WYSIWYG and text editors, in order from best to worst.

Each editor below will have a score, percentage, and a link to a more detailed review. All reviews were completed between October 2013 and February 2014. And this list was compiled on February 24, 2014. The editors were ranked based on their scores for Web Designers. But in the case of a tie, I explain the order below.

If you’re still not sure which editor to choose, then fill in my questionnaire: Web Design Software: Which One is Right for You?

1.  Microsoft WebMatrix Profile

WebMatrix has really improved since version 2 and version 3 adds a lot of useful features that rocket it to the top of the list. It’s not a WYSIWYG editor, but it has a lot of features that make it inviting to the enterprising beginner. One thing I like best about WebMatrix is how it will help you install various open source tools likemySQL databases or PHP onto your web server if you don’t already have them there. It has lots of plugins available for things like shopping carts, mobile support and more. This is a pretty amazing free editor.

Version: 3
Web Designers: 53.2%
Web Developers: 63.7%
Small Business: 48.6%
Beginners: 45.8%
More »

Aptana Studio - Screen shot by J Kyrnin
Aptana Studio. Screen shot by J Kyrnin

2.  Aptana Studio

Aptana Studio is an interesting take on web page development. Instead of focusing on the HTML, Aptana focuses on the JavaScript and other elements that allow you to create Rich Internet Applications. One of the things I really like is the outline view that makes it really easy to visualize the DOM. This makes for easier CSS and JavaScript development. If you are a developer creating web applications, Aptana Studio is a good choice.

Version: 3
Web Designers: 49.1%
Web Developers: 62.2%
Small Business: 33.4%
Beginners: 32.3% More »

Komodo Edit - Screen shot by J Kyrnin
Komodo Edit. Screen shot by J Kyrnin

3.  Komodo Edit

Komodo Edit is my favorite text web editor. It includes a lot of great features forHTML and CSS development. Plus, if that isn’t enough, you can get extensions for it to add on languages or other helpful features (like special characters). It’s not the best HTML editor, but it’s great for for the price, especially if you build in XML. I use Komodo Edit every day for my work in XML and I use it a lot for basic HTML editing as well. This is one editor I’d be lost without.

There are two versions of Komodo: Komodo Edit and Komodo IDE. Komodo Edit is open source and free to download. It is a trimmed down version of the IDE.

Komodo Edit tied with Eclipse and CoffeeCup Free HTML Editor for Web Designers. I placed it first because it scores better for the other three categories (Web Developers, Small Business, and Beginners).

Version: 8
Web Designers: 39.8%
Web Developers: 59.8%
Small Business: 25.0%
Beginners: 24.8% More »

Eclipse - Screen shot by J Kyrnin
Eclipse. Screen shot by J Kyrnin

4.  Eclipse

Eclipse is a complex development environment that is perfect for people who do a lot of coding on various different platforms and with different languages. It is structured as plug-ins so if you need to edit something, you just find the appropriate plug-in and go. If you are creating complex web applications, Eclipse has a lot of features to help make your application easier to build. There are Java, JavaScript, and PHP plugins, as well as a plugin for mobile developers.

I ranked Eclipse second because it has a much higher Web Developer score than CoffeeCup (it tied with Komodo Edit there too).

Version: 4
Web Designers: 39.8%
Web Developers: 59.8%
Small Business: 23.9%
Beginners: 19.1% More »

CoffeeCup Free HTML Editor - Screen shot by J Kyrnin
CoffeeCup Free HTML Editor. Screen shot by J Kyrnin

5.  CoffeeCup Free HTML Editor

The CoffeeCup Free HTML editor is a text editor with a lot of potential. A lot of the features it has in the menus require that you buy the full version. The free versionis a good HTML editor, but I would recommend you purchase the full version of the editor to get the real juice from this product. One important thing to note: many sites list this editor as a free WYSIWYG editor, but when I tested, you have to buy CoffeeCup Visual Editor to get WYSIWYG support. The free version is a very nice text editor only.

This editor scored equally well as Eclipse and Komodo Edit for Web Designers. It ranks 5th because it didn’t rank as well for Web Developers, but if you are a beginner to web design and development or you’re a small business owner, this tool has more features appropriate to you than either Komodo Edit or Eclipse.

Version: 10
Web Designers: 39.8%
Web Developers: 48.5%
Small Business: 48.6%
Beginners: 45.8% More »

NetBeans - Screen shot by J Kyrnin
NetBeans. Screen shot by J Kyrnin

6.  NetBeans

NetBeans IDE is a Java IDE that can help you build robust web applications. Like most IDEs it has a steep learning curve because they don’t often work in the same way that web editors do. But once you get used to it you’ll be hooked. One nice feature is the version control included in the IDE which is really useful for people working in large development environments. If you write Java and web pages this is a great tool.

Version: 7
Web Designers: 37.7%
Web Developers: 52.2%
Small Business: 21.7%
Beginners: 19.4% More »

Visual Studio - Screen shot by J Kyrnin courtesy Microsoft
Visual Studio. Screen shot by J Kyrnin courtesy Microsoft

7.  Microsoft Visual Studio Express

Microsoft Visual Studio Express is a visual IDE to help web developers and other programmers get started creating applications for the web, mobile devices, and the desktop. There are versions of Express specifically for web development, Windows 8 development, Windows desktop development, and Windows Phone development. This tool is built to help you get familiar with the Visual Studio IDE platform where you can do even more than you can with Express.

Version: 2013
Web Designers: 36.9%
Web Developers: 40.6%
Small Business: 21.7%
Beginners: 19.4% More »

BlueGriffon - Screen shot by J Kyrnin - courtesy BlueGriffon
BlueGriffon. Screen shot by J Kyrnin – courtesy BlueGriffon

8.  BlueGriffon

BlueGriffon is the latest in the series of web page editors that started with Nvu, went on to KompoZer and now culminates in BlueGriffon. It is a free WYSIWYG editor for Windows, Macintosh, and Linux. And it will build your pages in HTML5 (both XHTML and HTML) as well as HTML 4.

This is the only WYSIWYG editor that made this list, and as such it will be more appealing for many beginners and small business owners.

Version: 1
Web Designers: 32.4%
Web Developers: 28.4%
Small Business: 43.0%
Beginners: 49.9% More »

Bluefish - Screen shot by J Kyrnin
Bluefish. Screen shot by J Kyrnin

9.  Bluefish

Bluefish is a full featured web editor for Linux that also runs on Windows and Macintosh. And the 2.0 release adds a lot of great new features. There is code-sensitive spell check, auto complete of many different languages (HTML, PHP, CSS, etc.), snippets, project management, and auto-save. It is primarily a code editor, not specifically a web editor. This means that it has a lot of flexibility for web developers writing in more than just HTML, but if you’re a designer by nature you might not like it as much.

Version: 2
Web Designers: 31.5%
Web Developers: 43.4%
Small Business: 21.5%
Beginners: 23.5% More »

Emacs - Screen shot by J Kyrnin
Emacs. Screen shot by J Kyrnin

10.  Emacs

Like vi, Emacs is found on most Linux systems which makes it easy for you to edit a page even if you don’t have your standard software. Emacs is a lot more complicated than vi and so offers more features, but I find it harder to use. Feature highlights: XML support, scripting support, advanced CSS support, and a built-in validator, as well as color coded HTML editing.

This editor is really intimidating to anyone who isn’t comfortable writing plain HTML in a text editor. But if you are and your host offers Emacs, it is a great, very powerful tool.

Version: 24
Web Designers: 28.7%
Web Developers: 44.1%
Small Business: 16.1%
Beginners: 15.3% More »

What is your favorite HTML editor? Write a review!

Do you have a Web editor that you absolutely love or positively hate? Write a review of your HTML editor and let others know which editor you think is the best.

What is Content Marketing ?

I have been writing for years about the importance of content on web pages. And while good articles, nice photos, amazing videos, and other forms of web content is important, there is more and more evidence that there’s more to creating content than just the content. You have to create content that attracts the customers you want visiting your website. This is called “content marketing.”

Content marketing is a marketing technique to create content that is valuable, relevant, and attractive to a specific audience.

The goal of content marketing is to drive customers to specific actions. Instead of advertising or pitching your products, you provide information to your customers that gives them more knowledge so that when they do pick a product it will be the right one for them. Not necessarily yours.

This article talks a lot about content marketing in the form of the written word, but the content can be anything your customers want: videos, podcasts, photos, recipes, craft instructions, tutorials, music, and so on. The only limit is how the content relates to your brand and the products you are trying to sell.

Content Marketing is About Loyalty

Consumers are smart. They know when we are trying to sell them something. But instead of trying to sell something to people, you should be trying to generate trust in yourself and your products. Once people trust you, they are more willing to listen to you.

And a great way to encourage trust is to provide useful things for your customers with little or no outlay from them.

For example:

  • Most packaged food products include recipes on the label for using that product. Plus, cereal marketed to children often has games or puzzles on the box for kids to play while they eat.
  • Many businesses offer free magazines to their customers—airlines have in-flight magazines, grocery stores have circulars with articles as well as ads.
  • The articles on, this website, are all provided free of charge. Yes, there are advertisements, but at the end of the day, you don’t have to click on any of them in order to access the information. There is no “pay wall” or other payment gateway between you and the articles.
  • Some websites request just a small thing from customers in order to get free content. For example, I am offering a free chapter of my book Sams Teach Yourself Responsive Web Design with HTML5 and CSS3 in 24 Hours to anyone who signs up for my mailing list. In this case the information is virtually free, only requiring a small exchange from the customer to get it.

Content Marketing Should Deliver What Customers Want

One of the key features of content marketing is that it has both real and perceived value to the customers. If you are tempted to slap up a 400-word article on the benefits of using widget A in business and call that content marketing, then you’re probably not going to get a lot of interest or sales. When you are developing a content marketing strategy for your website you need to consider the following:

  • Is your content in-depth?
    One 400-word article wouldn’t cut it, but 100 might, especially if you arranged them in a useful fashion and made them easy to read and use.
  • Is your content relevant?
    If your customers aren’t interested in the free content you’re providing, then it’s not going to work as marketing either. Do research, find out what your customers want, and build your plan based on what they are looking for, not just on what you want to create.
  • Can you keep delivering it?
    If you’re going to give people a podcast or a blog or even just short articles on a topic, are you prepared to keep creating new ones for at least a year? The more consistent you can be in creating new content to add to the content you already have, the more customers you will attract.

Content Marketing is Not for the Faint of Heart

When you start working with content marketing, you need to be prepared to work at it for a long time. It may often feel like it’s the only thing you’re really working on. But the more content you generate that is relevant, useful, and timely for your customers, the more customers you will gain. And once they trust you, they will be more interested in finding out what you’re selling, and be more receptive to buying from you.

How to Use Multiple CSS Classes on a Single Element

Cascading Style Sheets (CSS) allows you to define elements with classes to provide additional information about that element, give it different styles, and connect with it via JavaScript. And you don’t have to limit your elements to just one class. If you need to set multiple classes on an element, you add them simply by separating them with a space in your attribute. For example, this paragraph has three classes:

<p class="pullquote btmmargin left">...</p>

This sets the following three classes on the paragraph tag:

  • pullquote
  • btmmargin
  • left

You can then assign these as classes in your CSS:

.pullquote { ... }
.btmmargin { ... }
p.left { ... }

If you set the class to a specific element (i.e.p.left), you can still use it as part of a list of classes, but be aware that it will only affect those elements that are specified in the CSS. In other words, the p.left style will only apply to paragraphs with this class.

Advantages of Multiple Classes

Multiple classes can make it easier to add special effects to elements without having to create a whole new style for that element. For example, you may want to have the ability to float elements to the left or right quickly. You might write two classes left and rightwith just float:left; and float:right; in them. Then whenever you had an element you need to float left you would simply add the class “left” to its class list.

I like to use multiple classes for things that I want to keep standard across the entire site.

For example, if I always want the bottom-margin for elements that have a bottom-margin to be 10px. By creating a class that only encompasses the botom-margin:10px; I can add it wherever it’s needed.

Multiple Classes, Semantics, and JavaScript

Another advantage to using multiple classes is that it gives you many more interactivity possibilities. You can add new classes onto existing elements using JavaScript without removing any of the initial classes. You can also use classes to define the semantics of an element. This means you can add on additional classes to define what that element means semantically. This is how Microformats works.

Disadvantages of Multiple Classes

The biggest disadvantage to using multiple classes on your elements is that it makes them very complicated. This can make it hard to determine what styles are applying to the element as well as any scripts that impact it.

When you use multiple classes you run the risk of having the styles for one class override the style for another. This then can make it difficult to figure out why your styles aren’t applying even when they should be. By using a tool like the Webmaster tools in Chrome you can more easily see how your classes are affecting your styles and avoid this problem.

How Much Should a Web Design Cost

It can be exciting to get started on a new business, and in a lot of ways, the web has made it easy to get a newbusiness website off the ground quickly and with very little cash. Here is a common scenario for small business owners (all prices are estimates):

  1. I’ve got a great idea for a website, and the perfectdomain name for it is available! ($10)
  2. I’ll get a decent web hosting package, with a good price. ($150 for two years of hosting, pre-paid)
    1. I’m going to use WordPress, and this theme is perfect. ($40)

    At first glance this looks great, $200 to start a business! And you don’t even need a designer. And for many businesses, this will be fine at first.

    But once you get past the initial stages of the business, you will notice that the theme you bought isn’t doing all that you want it to do. Many technical people will start looking at plugins to try and get it running the way they want, but ultimately, their site is going to look and act like every other commerically themed WordPress site out there. And to differentiate your site you’re going to need more.

    You’re going to need a killer design and possibly some web development work on top of it. And all this is going to cost you money.

    What to Pay For

    The first thing you need to know when trying to budget web design costs is what you’re going to need. There are a number of things that can cost you money, including:

    • Is this a new site or a redesign?
    • Do you need blog or content management functionality?
      • Do you have graphics already created for the site? Or are you using a template? Or do you need completely custom images created?
      • How are you planning on servicing mobile customers?
      • Do you need multimedia (Flash, video, etc.) on the site?
      • How much content do you have and how much do you need created?
      • Do you need other special features like social media, SEO, ecommerce, or something else?
      • And who is going to maintain the site?

      Below I will go into details about all these things, and a general idea of how much you should budget for them. The prices I list are based on my experience and prices may be higher or lower in your area. Be sure to shop around and request proposals from any designer or firm you’re thinking of hiring.

      New Sites Often Cost More Than Redesigns

      When you’re starting from scratch, so is the web designer. They have nothing to work from, they can’t look at your site and get an idea of what you already love or hate. They advantage to starting from scratch is that you can work more closely with the designer to get the exact site that you want (for your budget). But you should assume that you’re going to pay at least an additional $100 more than if you were redesigning an existing website.

      For your budget, you should start with at least $500 as a base cost for building a site from scratch, and $250 if you’re looking at a redesign.

      Blogs and Content Management Tools

      If you’re already running a WordPress site then you have the advantage of already having some type of content management on your site, but these tools (including WordPress, Joomla!, and Drupal) have their own challenges. Creating a site using these tools takes more time than building a site from scratch using HTML and CSS because you have to integrate the designs into the CMS systems. Decide if you need these tools by reading this article: Dreamweaver vs. Drupal vs. WordPress – Which is Best to Use.

      And don’t assume that if you already have a WordPress theme it should be cheaper. Many themes are sold as-is and designers are not licensed to change them. Often, the cost of purchasing a theme that can be modified is as expensive as just building a new theme from scratch.

      Your budget should include another $200 if you want a blog or CMS. Include this in your budget even if you already have the system running. If you don’t have it running, you should plan to include another $200 to get it installed and running.


      Graphics are tricky because they can be difficult to create and stock images are expensive. You don’t want to skimp on this area of your site, however as graphics can cause you more grief down the road if you’re not careful.

      If you supply all of the images, you will still need to budget some funds to get those images integrated into the new design (budget at least $250). And don’t assume that if you’ve already got a template you want to use that you won’t need any images re-done. Customizing templates can take time, and you want to be sure that the designer has the rights to customize the images in the template. If this is the route you go, you should budget $500. And if you’re looking for the design firm to create an entirely new design and images for you, either in a template or not, you should budget at least $1200.

      But that’s not all there is regarding images. You will probably also need icons and buttons created to go with your design. Budget $350 for them. And any other custom images you need you should budget another $450. The more images that you need, the more money you should budget.

      You should always make sure that your designer uses licensed stock images (where to find stock photos) or creates brand new graphics for your site. Be sure to get the license information in writing for any images you will use on your site. Otherwise, you could be looking at a several thousand dollar bill from a stock photo company down the road. And companies like Getty Images are very serious about their licenses, they won’t hesitate to bill your site even if you’ve only used one of their images. If your designer is going to add stock photos, budget at least $100 per photo—and remember that this could be an annual fee.

      Mobile Designs

      Mobile devices are getting more and more common and your design should at least make a nod towards mobile customers. The best designs are responsive to the device viewing the page, but creating that type of design is difficult and will cost more than a simple site for a desktop web browser. The best sites are designed to handle at least three different device sizes: smartphones, tablets, and desktop computers. You should budget $750 to get a responsive design, and expect to add on $150 per device size (such as tablet in landscape and portrait) beyond the basic three. (Mobile designs are different from desktop designs: Writing a Mobile Friendly Website)


      Multimedia like Flash and video can be difficult to integrate with a website. And if you’re having the design firm create the multimedia devices the you should be prepared to pay more. You should budget $750 to get some basic Flash or video on the site and another$750 or more to create the multimedia.

      Content Creation and Addtion

      The cheapest way to go is to create all the content yourself and add it into the site yourself. Most designers have no problem delivering a design template that you populate for no additional cost. But if you want the design firm to add the content you’ve already got into the site, you should budget around $150 per page of typed content (more if they have to type it in) and $300 per page if you want them to create the content for you as well.

      Special Features Always Cost Extra

      With the above elements, you will have a website that most people would agree is sufficient, but there are a lot of extra features that many designers can provide that will up the price, but can also improve your business:

      • Site membership and registration $750
      • Forums or chat rooms $350
      • News feeds of both your content (outgoing) and adding content to the site (incoming) $400
      • Contact forms and surveys $350
      • Email addresses for the domain and auto-responders $300
      • Newsletters $500
      • Advertising integration (such as with AdSense) $250
      • Photo gallery $250
      • Ecommerce: shopping carts, catalogs, payment processing $1500–$5000 or more
      • Metrics: custom reports, Google analytics, etc. $500–$2000
      • SEO: page optimization, submission to search engines, etc. $500–$5000
      • Social media: Twitter, FaceBook, etc. $500–$3000

      And Don’t Forget Maintenance

      Websites don’t just build themselves, and the best are changing all the time. Maintenance is something that most businesses forget to budget. Or if they remember, they think that they’ll just do it themselves. But the first time you delete your entire home page by mistake and lose eight hours of sales trying to get it back up and running, you’ll wish you’d spent the extra money on a maintenance contract.

      Maintenance contracts vary greatly depending upon what you expect from the firm. You should budget a minimum of $100 per month to have a designer on call if you have a problem that you can’t fix. And if you expect them to do additional work such as creating new images, adding new content, maintaining social media or newsletters, etc. expect the price to go up. Many designers dislike doing site maintenance, so it can sometimes be hard to find a firm that will do it for you.

      So, How Much Does it All Cost?

      Features Basic Site Some Extras Full Site
      Base site costs $500 $500 $750
      Content Management or Blog $200 $200 $750
      Basic graphics $250 $500 $1200
      Additional graphics $300 $300 $500
      Total: $1250 $1500 $3200

      Adding in addtional features increases the price.

      Features Basic Site Some Extras Full Site
      Mobile $750 $900 (one extra size) $1050 (two extra sizes)
      Multimedia $750 $750 $1500
      Content $300 (2 extra pages) $750 (5 extra pages) $1500 (creating 5 pages including content)
      Extras $250 (photo gallery) $500 (photo gallery and ads) $5000 (or more)
      Maintenance $100 per month $250 per month $500 per month
      Total: $2050 + $100 per month $2900 + $250 per month $9500 + $500 per month

      So, for a minimal site you can spend as little as $1250 or as much as $20,000 or more. What you budget should be based on what your business needs, but this article should give you a good starting point.

      Remember that all these prices are estimates, especially on the low end. You should treat these numbers as a starting point in your negotiations with your web designer.

      Web design prices fluxuate all the time. You may spend more or less depending upon the size and scope of the design firm you hire or if you decide to outsource or offshore the development and design work.

Make Things Fade In and Out with CSS3

One fun trick you can do withCSS3 is make your images and other elements fade in and out using the CSS3 properties: opacity andtransition. This is a wonderful tool to make your pages more interactive by creating greyed out areas that come into focus when a reader does something.

The Basics: Change Opacity When Mouse Hovers Over

The first thing you need to know how to do is change the opacity when a customer is hovering over an element.

For my example I’m using an image with the class greydout:

<img src="puppy-in-shade.jpg" width="300" height="266" class="greydout">

To make it greyed out, I add the CSS:

.greydout {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;

Then, to make the image come clear when the mouse is over it, I add the :hoverpseudo-class:

.greydout:hover {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;

As you can see on my examples page, this is very abrupt. First it’s grey and then it’s not, with no interim states.

So, to add the interim states, you want to add the transition property to the .greydoutclass:

.greydout {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
-ms-transition: all 3s ease;
-o-transition: all 3s ease;
transition: all 3s ease;


Here’s an example of the image fading in, rather than just switching abruptly.

Fading Out is Possible Too

You don’t have to start with a faded image, you can use transitions and opacity to fade out from a fully opaque image.

Using the same image, only with a class ofwithfadeout:

<img src="" width="300" height="266" class="withfadeout">

Just like before, you change the opacity using the :hover selector:

.withfadeout {
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
.withfadeout:hover {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;

And here is how fading out looks.

You Aren’t Limited to Images with This Technique

You can make CSS buttons that fade when clicked and held. You just set the opacityusing the :active pseudo-class and put the transition on the class that defines the button. Click and hold this button to see what happens.

It’s possible to make essentially any visual element fade when hovered over or clicked on. In this example I change the opacity of the div and the color of the text when the mouse is over it. Here is the CSS:

#myDiv {
width: 280px;
background-color: #557A47;
color: #dfdfdf;
padding: 10px;
-webkit-transition: all 4s ease-out 0s;
-moz-transition: all 4s ease-out 0s;
-ms-transition: all 4s ease-out 0s;
-o-transition: all 4s ease-out 0s;
transition: all 4s ease-out 0s;
#myDiv:hover {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
color: #000;

Navigation Menus Can Benefit from Fading Background Colors

In this simple navigation menu the background color fades slowly in and out as I mouse over the menu items. Here is the HTML:

<ul id="sampleNav">
<li><a href="">Home</a></li>
<li><a href="">CSS3 Tutorials</a></li>
<li><a href="">CSS3 Properties</a></li>

And here is the CSS:

ul#sampleNav { list-style: none; }
ul#sampleNav li {
display: inline;
float: left;
padding: 5px 15px;
margin: 0 5px;
-webkit-transition: all 2s linear;
-moz-transition: all 2s linear;
-ms-transition: all 2s linear;
-o-transition: all 2s linear;
transition: all 2s linear;
ul#sampleNav li a { text-decoration: none; }
ul#sampleNav li:hover {
background-color: #DAF197;

Browser Support

These techniques have very good browser support, and so will look reliably good no matter where you use them. The only exception to this is Internet Explorer. IE does not support the transition property and won’t until IE 10. You need to use browser prefixes for the other browsers, as indicated above.

The opacity property is supported by IE 9+, Firefox 3.6+, Chrome 10+, Safari 5+, and Opera 11+. If you need it to work in IE 6, 7, or 8, you can use the alpha filter (filter: alpha(opacity=xx); where xx is the percent opaque). Learn more about using opacity with IE.

Extra Fun—Swap Two Images

Here is an example of how to fade one image into another. Use the HTML:

<div class="swapMe">
<img src="image1.jpg" class="swap1" style="position: absolute;">
<img src="image2.jpg" class="swap2">

And the CSS which makes one fully transparent while the other is fully opaque and then the transition swaps the two:

.swapMe img { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .swap1, .swapMe:hover .swap2 { -webkit-opacity: 1; -moz-opacity: 1; opacity: 1; } .swapMe:hover .swap1, .swap2 { -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; }