Back to Basics – a Helpful Guide to Building Your First Website

Technology is moving faster than we could ever imagine and because of this, you’ve got people from all walks of life; stay-at-home moms to giant business corporations, designing and developing their own websites. More and more people are utilizing the web to get their information. Social media sites are prevailing-feeding you instant updates and trends. In today’s society, it’s absolutely crucial to know the basics of web design and how it can be beneficial for you. I won’t go into too much detail (e.g. how to create a fixed three-column layout, um, say what?); instead, I’m going to highlight the main principles, basic web terminologies, tools you’ll need and common mistakes beginning web designers typically make.

The ABC’s of Web Design

So you’ve decided to take the plunge and build your first website. Good for you! I’ll cut right to the chase. First order of business, consider your key demographic and goals. Ask yourself, “What am I trying to accomplish here?” Next thing is to lay it all out on paper (typically known as a wireframe) and sketch out how many pages you’ll have and where the links will be going. Also, strive for consistency in terms of color scheme, navigation and tone of voice. Depending on the goal of your website, my recommendation would be to go with a content management system (best if you regularly blog), like WordPress or Tumblr. It’s very easy to use, requiring basic HTML skills, and usually comes with free customizable themes (so you can play around with the HTML/CSS). Don’t forget to ask a friend to sit down and explore your site. You want to make sure your website is painless to navigate with little to no confusion.

The web is full of amazing tutorials. W3C Schools is a great online web resource, with lessons ranging from beginning to expert. If you’re more of a visual learner, like me, check out Lynda.com, where most if not all of their tutorials are video-based. Smashing Magazine (also another awesome website focused on web trends and techniques) put together a list of the best simple web designs out there for your inspiration.

Basic Web Design Vocabulary

HTML – Stands for hypertext markup language, which is the basic building-blocks of web pages.

XHTML – Stands for extensible hypertext markup language (not to be confused with HTML), is like a spin off of HTML, with XML guidelines.

FTP – Stands for file transfer protocol, which allows you to transfer files between computers on a network.

CSS – Stands for cascading style sheets, which is used to create the look and feel of a website.

WYSIWYG editor – Stands for “What You See Is What You Get,” which allows you to create Web pages without knowing HTML.

Usability – refers to design features that enable a website to be user-friendly, which means how easily a user can find their way around a site.

Accessibility – refers to the practice of making websites usable by people of all abilities and disabilities.

Wireframe – a visual guide that represents the skeletal framework of a website.

Essential (Free) Tools for the Beginning Web Designer

When starting out, it’s best to practice your HTML coding on a simple notepad. Once you’ve familiarized yourself with HTML, start practicing with an HTML editor, like HTML-Kit, which is a free full-featured application.

Of course, every website isn’t complete without stunning images. Try learning photo manipulation techniques with GIMP, a free graphics editor very similar to Adobe Photoshop.

Lastly, it’s important to perform web maintenance every couple weeks to check for things like broken/dead links. My recommendation is to try out Xenu’s Link Sleuth, a free program that checks websites for broken links and quoted by PC Magazine as “the fastest link-checking software.”

Common Web Design Mistakes to Avoid

Arguably the most well-known phrase in the Declaration of Independence is that, “All men are created equal.” Well, all men are created equal, but certainly not websites! As web presence is becoming more prevalent, you can’t just have a good website; you need an extraordinary website. Here are a few common web design mistakes to avoid.

Not…

[1.] Fixing Broken Links – Seriously, there’s nothing more exasperating than clicking on broken links. Make it a habit to perform web maintenance every couple weeks. Keep track of all your links in a spreadsheet and if necessary, create effective 301 redirects and 404 error pages.

[2.] Respecting User Privacy – Nobody likes being spammed, so it’s imperative to outline a privacy policy page-detailing what the consumer’s personal information will/or will not be used for.

[3.] Making Search Simple – The Internet is powered by search engines. In fact, that’s mainly why we use the web; to seek out information on a specific topic or interest. Basically, just keep your search box simple, visible and wide enough for users to input their typical query.

[4.] Doing Cross-Browser Testing – Each person will habitually stick to their usual browser of choice, but sometimes doing that makes us fail to recognize that there are other browsers out there being utilized. In 2011, the top three browsers were: Internet Explorer (25.8 percent), Firefox (42.4%) and Chrome (25 percent). Not all websites will appear the same on each browser, so it’s important to do some cross-browser testing.

[5.] Utilizing Social Media – If you go to any top-rated blog or website, I’m most certain that 90 percent of them are utilizing social media to their benefit. It’s a great source for Internet marketing and getting the word out about your site. All it takes is a click.