Friday, March 29, 2024

How to Build a Web Design Business – Part 2

Last week we discussed some of the tools and business savvy necessary to build a successful Web design business. In this article we discuss the skills and knowledge needed to succeed as a Web designer.

Knowledge of HTML

The advice to learn HTML may seem obvious to most, but unfortunately there are many people passing themselves off as “Web designers” who use WYSIWYG (what-you-see-is-what-you-get) editors and believe that if a page looks okay in their chosen editor, it will look the same in any browser. The faux designer slaps up a “view with xxx browser” after discovering that a Web page that looks okay in one browser, totally falls apart in another.

Imagine an auto mechanic bumping and pushing on the outside of the car in an attempt to fix it! You expect the mechanic to troubleshoot the components that make up the car to ascertain why it isn’t running properly. Like our mechanic example, a Web designer must be able to tinker with the underlining code that makes up a Web page. Pushing, shoving and rearranging the outward display of a Web page rarely corrects problems caused by poor or broken code. If you can’t figure out what’s wrong with a Web page by looking at it from the outside, learn HTML.

The Internet offers many free HTML tutorials, as does WebReference. The W3Schools offers both free tutorials and quizzes to test your knowledge. Improve your skill set by learning HTML or XHTML. The Web sites you produce will improve considerably.

Knowledge of CSS

Cascading Style Sheets (CSS) offer Web designers the opportunity to separate content and layout from document structure. Microsoft’s Internet Explorer 3, released in August 1996, was the first browser to support the CSS concept.

CSS sets styles for all pages in one style sheet which is then linked to each Web page. This removes all formatting from the Web pages, making them leaner and easier to use. As a designer, the main reasons for using CSS boil down to ease of use and saving time. When your client suddenly decides on different colors or font styles, you quickly make the changes in one place (the style sheet) and have a site wide change without ever touching any of the actual HTML pages. Need to move a left column to the right? CSS allows flexibility, which makes changing placement of any element on a Web page a straightforward task.

Tables are Dead?

Does CSS mean tables are dead? No. Tables and CSS aren’t mutually exclusive. Tables have their place, especially for control of tabular data. With fewer tables in a layout, pages load faster, meaning less bandwidth usage. CSS also makes HTML code easier to read, by removing structure and styling code.

Use CSS for control over colors, image placement (including background images) margins, borders, padding and even to float block level items to an exact position on the page. Build a wrapper to set the exact boundaries for your Web page and insert blocks where you want them, designating their width, color, padding and borders.

Understanding of Various Browsers

As CSS plays a more important role in Web site design, it’s important to test page layouts in all major browsers. No browser perfectly renders CSS; some browsers contain more bugs than others. Professional designers don’t ignore these bugs and blame it on the browser. Rather they work through those quirks so that clients’ Web sites display correctly in all major browsers. Two resources for learning more about typical quirks in current browsers are QuirksMode.org and Web Standards Software and Learning. Web Site Tips also provides links to some solutions for browser bugs and cross browser issues

The vast majority of Internet surfers use Internet Explorer or Mozilla Firefox, with a much smaller but very dedicated crowd who use Opera. Unfortunately, while each of these browsers releases updates, users don’t necessarily update their computers. The operating system (Mac, Windows or Linux) also affects the way a Web page looks in a browser. It’s a good idea to team up with other designers (who use a different operating system) and have quick look at each other’s layouts.

Understanding of Search Engines

Delivery of your new car means a road ready automobile with clean windows, gas in the tank, air in the tires and windshield wipers, etc. that work. Purchasers of a Web site design should expect the same – an Internet ready Web site.

Without the basic meta tags (description, keywords), page titles, alt and heading tags, Web pages aren’t Web ready. If a Web site can’t be found and completely indexed by major search engines, it’s not Web ready.

Meta Tags

While most search engines no longer use most meta tags, the description meta tag provides the description for the Web page in search engines. Use the description Meta tag to clearly and concisely tell users about the Web site and its contents. Don’t use “greatest widgets in the world,” instead, use something like “ABC Company manufacturers solid stainless steel widgets in Seattle, Washington for export worldwide.”

Again, search engines usually disregard keyword meta tags, but I used the keywords meta tags for a reminder of the keywords and phrases targeted for that specific page. Compare text on a page with the meta keywords tag for that page. Do they match? Are all the keywords and phrases used in title and heading tags on the page? If not, the page content or the keyword tags need another look.

Business owners usually provide the text for each of their Web pages, but a professional designer runs the content through a spell checker and tweaks content, liberally sprinkling keywords and phrases where appropriate without being redundant.

Robot.txt Files, Site Maps, Custom 404 Pages

Robot.txt files have many uses, the most simply being instructions for search engines about which pages should not be indexed and “allows” access to others. While these are merely “advisories” to search engines, most search engines follow them. A robot.txt file could be important to your client if there are directories the client doesn’t want indexed in search engines.

Site Maps

Site maps ensure that all pages a site owner wants listed in a search engine are accessible. Usually, good navigation does the trick but developing a site map ensures inclusion of all pages. Web sites with several layers of sub-level pages benefit greatly from site maps. Rather than just a link to all the pages on the Web site, add a short description. Lead site users exactly where they want to go as quickly as possible.

Custom 404 Pages

Browsers provide a standard 404 error page stating the page can’t be found when a user clicks a link. This often happens because the page name has either changed or been misspelled. Each time it happens, a potential customer could be lost. Web designers can create customized 404 pages with user friendly messages that keep the potential client at the Web site and provides them alternatives for the lost page. I often use the site map page as the customized 404 page, thereby providing the potential client choices of Web pages available and a description of what each page contains.

Search engine optimization is a specialty. A professional Web designer knows the basics for search engines to index Web pages.

Web Design Website with Portfolio of Projects

Staying with our automotive analogy, buyers don’t purchase cars without at least seeing an image and a list of specifications. If you build custom Web sites you can’t show what you haven’t created, but you can demonstrate your skills with images of and links to Web sites you’ve built. New Web design businesses often produce Web sites for others without having created a site for themselves. Just as a Web site helps our customers sell their products and services, a Web designer’s site helps them sell their services. Actively selling your services (through your Web site) while working on projects makes sense.

E-commerce Knowledge

The most important advice I give any Web designer is to learn e-commerce before they have a client needing an e-commerce site. Start by reading and reading some more. Next, purchase or use an open source shopping cart, catalog software and experiment with installing, setting up security and hooking into a payment gateway. PayPal may be the perfect place to start since it doesn’t require a subscription fee or a merchant account. Be aware that each payment gateway has its own API for communication between an e-commerce site and the gateway’s server.

Security First

For many clients, selling is an intricate part of their business. Setting up an e-commerce Web site requires knowledge ranging from merchant accounts to server security. Buying and selling on the Internet grows each and every year. Fraud and theft of sensitive information also grows.

Make sure you understand the issues involved with securing data. You may consider hiring an experienced e-commerce Web designer as a consultant for the first live e-commerce site you produce. This is important to learn about the process and to make sure security issues are addressed.

Learn Programming

E-commerce sites with shopping carts and catalogs require programming knowledge. The appropriate security cannot be achieved with simple HTML. There are carts and catalogs that advertise “no programming knowledge needed,” but you can’t make modifications to a packaged cart and catalog without knowledge of the programming in which the cart and catalog are written. Most e-commerce packages need modifications to meet a client’s specific needs.

Programming languages abound – ranging from PHP, an open source programming language to Microsoft’s ASP and Adobe’s Coldfusion. I use Coldfusion because it’s the easiest language to learn but it requires a paid version of Coldfusion on the Web server. A free developer version is available for development and testing. ASP programmers appear to have migrated to ASP.net. Coldfusion, ASP and ASP.net all run on Windows servers while PHP runs on Linux and Apache servers. WampServer is the easiest method for installing PHP, MySQL and Apache (along with some other useful tools) on your computer for developing with PHP.

The Learning Never Stops

Despite many years of working as a Web designer, I’ve found the learning never stops. Design standards change, capabilities in programming, CSS, HTML and XHTML evolve, new browsers are released and clients demand more. As you complete honing one skill, find another to learn. The Internet is a young and growing industry. Be prepared to grow with it.

About the Author

Peggie Brown is an owner and the president of Brown Holdings LLC. She runs a Web design and development business under KatsueyDesignWorks (http://www.katsueydesignworks.com/), in business since 1997. As a financial manager for 15 years and a paralegal for 10 years, Peggie incorporates her business and legal knowledge into her Web site design and development business along with writing content, tutorials and software instructions through ContentXperts.

This article originally appeared on WebReference.com.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured