From the category archives:

Articles

COCC 2010

April 25, 2010

This page will contain all the presentations from the COCC Build A Professional Wordpress Website Class.

Week 1:

Week 2:

Week 3:

Week 4:

Week4

View more presentations from mfarrell1.

Free Wordpress Theme Resources:

Wordpress.org

Pearsonified

Paid Premium Wordpress Themes:

WooThemes

Wordpress.org Commercial section

{ 0 comments }

This article is aimed at people with only a basic understanding of computers, so if you know the difference between HTML and CSS already, then you might want to move on – maybe you should choose another article to read from the links in the sidebar to the right.  Just a suggestion…  ;-)

Alright then, here’s a little about how the internet actually works.

Browsers

First off, you interact with the internet through a program called a browser.  The browser is what actually displays the websites that you visit.  The most common browsers are Firefox, Internet Explorer, and Safari, although there are dozens of other more obscure browsers.

Ok at this point, pat yourself on the back.  You now know more about browsers than 92% of people that hang out in Times Square in New York.  If you don’t believe me, watch this video:

Ok, so when you open up your browser, and you type the web address for my website (also know as the URL – mine looks like http://www.levitationwebsitedesign.com) into the address bar and hit return or enter, that causes your computer to send a little note across the internet to my server.

Servers

A server is a computer that doesn’t have a monitor or keyboard, and the operating system that is runs lacks a graphical interface. The only way to interact with the server is by giving it commands in a language that it can understand, usually Unix or Linux. There are millions of these servers spread around the world in what are called “server farms.” A single server farm might take up an entire 50 story building and have tens of thousands of servers in racks. For example many of the old decrepit bank buildings in downtown Los Angeles have been converted to server farms.

These server farms are what provide the incredible processing power needed to make the internet go. The servers are always on, and can respond to a request at a moment’s notice. When I refer to “my server,” its not actually a server that I own, but rather is a server owned by a hosting company, and I rent it from them. That server contains (among other things) my website.

So, that note your computer sends that note to my server asks my server to send your computer the code necessary to display my website in your browser.  This all happens very fast (or at least it should – sometimes a server can get kind of overwhelmed with requests and it can’t get to them all immediately, in which case a website you’re trying to visit might load very slowly).

"Cherish The Time," comic from <a href=

Websites and Computer Programming Languages

There are two basic classifications of websites, either static or dynamic, and which kind of website I’ve made will change a little bit how my server responds to your browser’s request.  For simplicity, I’ll just talk about static websites from now on, although to read more about why dynamic websites are much better, click here:  Static vs. Dynamic – the benefits of a CMS.

So assuming my website is a static site, then my server will send you two files that contain computer code – one written in the HTML programming language, and the other written in the CSS programming language.  It will also send you any additional image files that are needed to properly display the page.

HTML and CSS are two different languages (also know as code) and they do different things.  The HTML code defines the elements that are on the page, whereas the CSS defines what style should be applied to those elements.

On a very basic level, the HTML (translated to human-speak) might say this.

  1. Display the header image.
  2. Display the navigation menu made up of the items “Portfolio,” “Articles,” “About,” and “Contact.”
  3. Display the following block of text: “How The Internet Actually Works – A Primer”
  4. Display the following block of text: “This article is aimed at… (and a bunch more text)”
  5. Display the footer.

The CSS file would then define the styles.  For example, it might tell your browser to display the title of the article (ie “Dynamic vs. Static – the benefits of a CMS”) as bigger text than the rest of the article.  It would also tell your browser to display the navigation menu items in a different font than the rest of the page.  There would also probably be hundreds of other little style changes that the CSS file would tell your browser to do.

What A Web Designer Does

When someone like me designs a website for a client, its our job to write the HTML and CSS.  Generally the HTML isn’t too complicated, but getting all the CSS styles to properly display can take quite a bit of time and effort.  And the style is very important not just as a way to make your site look nice, but also to make sure that it is usable.  If, for example, this text were defined to be white on a white background, it wouldn’t be very readable, right?

So, once the HTML and CSS files have made their way over the internet to your browser, you browser reads in all the code contained in those files and displays the content, along with any images in your browser.

"I'm an internet celebrity" Comic from <a href=

Links

In creating my website, one of the things that I’ve done is to include what are properly known as “Hyperlinks,” or, more commonly just “Links.”

These links are usually text that is a different color – often blue, but on my page they are red.  If you were to click on one of those links, then your browser would realize that you’ve clicked a link, meaning that you want to go to a new page.  It would know which page that link pointed to, and so it would send another little note over to my server again to ask for the new set of HTML, CSS, and image files to display the new page.

And at that point you’re surfing.  While I’m sure your familiar with how to use the internet (as evidenced by the fact that you’re here, on my site), knowing what is actually going on behind the scenes is very important if you’re thinking of getting a website made for yourself or for your business.  The next lesson that would be important for you to learn would be about the differences between static and dynamic websites.  To read more about that, click this hyperlink: Static vs. Dynamic – the benefits of a CMS.

Thanks for reading.  If you have any questions/comments, please feel free to ask me either by contacting me, or by leaving a comment!

Thanks to Geek and Poke for the two comics, and to Cawi2001 for the sign image.

{ 0 comments }

Even Mona Lisa doesn't think Website Design is art.

Website Design Is NOT Art!

November 6, 2009

I may be opening a can of worms here, since debates about what is or isn’t art tend to go on forever, but here we go:

Website design should NOT be art

First, lets be clear on what we’re talking about here.  Defining art is very difficult, but I think that the Wiktionary does a pretty good job.  Of course, there are 10 different definitions listed on wiktionary, but I think there is one that is particularly relevant:

“The conscious production or arrangement of sounds, colors, forms, movements, or other elements in a manner that affects the sense of beauty, specifically the production of the beautiful in a graphic or plastic medium.”

Now, to determine whether website design is art or not, we need a definition of website design.  From the first sentence of the Wikipedia article on web design:

“Web design is … creating presentations of content that are delivered to an end-user through the World Wide Web…”

Immediately, we can see that the definition of website design is very different from the definitions of art.  The most important difference is in the goal – the purpose of website design is to ‘present content’, whereas the purpose of art is to ‘affect the sense of beauty’.

Furthermore, I would assert that those two goals are mutually exclusive.  If your goal is to present content, and you end up affecting the sense of beauty, then all you’ve done is to distract from the content that you’re trying to present.  Artistic and beautiful web design just makes it harder to focus on the content of the website.

Why visit a website at all?

Moving beyond definitions lets get more practical.  Lets pick Craigslist as an example.  Why do you visit Craigslist?

Maybe, you want information about who is selling awesome 80’s holiday sweaters in your area, so you can stock up for those bad holiday sweater parties.  Or, on the flip side, you might want to provide some information, like the fact that you have awesome 80s holiday sweaters for sale.

Maybe you just want to go into the forums on Craigslist to talk about the rhinestones on your awesome 80s holiday sweater.

This is the kind of guy that visits the Craigslist forums to talk about his holiday sweater...

This is the kind of guy that visits the Craigslist forums to talk about his holiday sweater...

Whatever answer is closest to yours, they all involve completing some sort of task.

And here’s the important part – you don’t need a beautifully designed website to accomplish that task.  In fact, from an artistic standpoint, Craigslist is ugly, but it helps people accomplish their tasks very very well.

The point of website design

Ok, hopefully your still with me, but just in case, lets recap – art is meant to affect your sense of beauty, web design is meant to help you accomplish some sort of task.  The two are mutually exclusive.

So then what is the point of going to a web designer?  Should we just have every website look exactly like Craigslist?

No, of course not.  There are three main purposes of web design:

  1. The first thing that the visual design of a page should do is to communicate to the visitor that they are in the right place.  For example, when you visit NYTimes.com, you are expecting to be taken to a newspaper website.  As soon as the page loads, your expectations are confirmed by the visual clues that given to you from the design.  If you were to replace all the text on the NY Times website with nonsense words, most people would still be able to tell that it’s a newspaper website.  This language-free communication is essential to establishing trust with the visitor, and happens almost instantaneously as soon as the page loads.
  2. The second job of the visual design is to provide the visitor with direction, like signs on a path that let you know your heading to the right place.  For example, lets say I own a crazy hat store – Matt’s Crazy Hats.  One of the main reasons that people visit my hat website is to find my store hours, location, and phone number.  To help the visitors to my website with that important task, I should place that information, along with a map in a very prominent location.  The location on the site, the colors, size and font of text, and surrounding elements are all parts of the design of the site that can help the visitor find the information they need.
  3. The final purpose of the visual design of a page is to promote the brand of the company or individual behind the site.  I would say that almost always this goal is subordinate to the other two points above.  For my crazy hat store, I might run ads in the local newspaper and post flyers around with images of my craziest hats.  It would be a good idea to feature images of crazy hats on my website as well, so that people who see my ad and then visit my website get the idea that I sell really crazy hats.  This brand recognition is beneficial to me, but only if it doesn’t interfere with people accomplishing the tasks they originally came to my website to do.  I would rather that people know where my store is and what the hours are than to not have that information, but know exactly what the crazy hats that I sell look like.

Why do beautiful websites persist?

Those beautiful, artistic, creative, and graphically heavy websites stick around for three reasons.

  1. On a very rare occasion, the website itself is supposed to be art.  There is no purpose to it other than that.  Here’s a great example (Caution: this website makes noise and will waste your time, but its pretty cool): The Incredibox
  2. The notion that a beautiful website is better is perpetuated by web designers and other industry professionals.  They like showing off their graphic design skills, one upping their competitors, and since it takes more time to do, they get paid more for it.
  3. Ugly websites can be visually offensive and distracting to the viewer, and so it seems logical that if a hideous website is the worst thing, then the exact opposite – a gorgeous website – would be the best thing.  This seems like a logical argument, but is actually a fallacy – beautiful websites are just as distracting as hideous ones, and the middle path (simple, clear, and clean) is the best.

I think I’ve covered this subject pretty exhaustively.  I hope I have convinced you that a website that is focused on the efficiently accomplishing the visitors tasks, and that has simple, clean, and clear design is the best kind of website.

If you want to see examples of what I advocate, take a look at the design of this website, and at my portfolio.

If you need a simple, effective, and efficient website designed for you, don’t hesitate to contact me.

And as always, if you have thoughts, questions, or comments, please use my contact form or leave me a comment on this post.

Thanks to Mikhil for original of Mona Lisa, and to BitchBuzz for the sweater photo.

{ 0 comments }

Chances are, if you’re reading this article, you are someone who is interested in hiring a web designer.  If that’s true, then chances are you probably don’t know a ton about the web design world.

That’s ok.  Until now, it wasn’t something you needed to know about, and frankly, it’s a pretty confusing world to try to understand.

As someone who does this for a living, however, I definitely need to know as much as I can about the web design world.  For your benefit, here are the top five things I think that everyone looking to hire a web designer should know:

1) In general, there is an extreme lack of transparency between web designers and their clients, both in the quality of work and in the price paid for it. There are a huge number of websites that are created by independent freelancers, (like myself), and this is a marketplace where it is quite unclear exactly what you’re getting for your money.  Here’s why:

  • First, a large portion of the independent freelance web designers out there don’t really know what they are doing, and the websites they make often fail, for a whole host of different reasons.  The phrase “you don’t know what you don’t know” rings true.
  • Second, those independent freelancers charges vastly different amounts for the websites they produce.  Some of the freelancers that are really good don’t charge hardly anything, while some freelancers charge an arm and a leg to make a website that is complete crap.  Plus, the way websites are paid for generally doesn’t tend to make a lot of sense for either the client or the designer, and there is a better way to do it all.
  • Third, the people contracting for those websites don’t know enough about the nuts and bolts of web design to determine if they’re getting a good website or not.  This point is talking about you, although you are doing great to help alleviate this part of the problem by reading my articles!

2) Moving on from the faults of independent freelance web designers, what’s equally if not more important in this equation is YOU!  That bears repeating: whether the website made for you serves you well, and whether you receive good value depends largely on you.

  • First, your choice of web designer plays a large part.  See point #1.  For the rest of this, lets assume you do your best and manage to hire a good designer who quotes a reasonable price.
  • Second, having a website designed is a process, and if you are an active part of the process, you will get a better result.  If you hire a website designer, and then go run away and hide under a bush, its more likely than not that the website you end up with is not going to be very good, even if your web designer is a rockstar.  I guarantee that giving honest and frequent feedback to the designer will make the end result better.
  • Third, you know your market better than anyone else.  If you have a hand in producing the copy, selecting keywords, and producing the design of the site, it will better fit your market.  If you don’t know your market very well, then you need to do some research on that before you even think about hiring a web designer.
What kind of website do you think he's designing?

What kind of website do you think he's designing?

3) Website design on the surface may not seem that complicated, but to do a good job creating a website is an extremely complex task.

A website is like a car.  To operate it is fairly simple – you turn the key, hold the wheel, and press down on the pedal.  But under the hood, there’s an awful lot going on.  And if something under the hood is held together with bailing wire and duct tape, you can bet it’s going to cause problems later down the line.

  • There are many different skills and knowledge sets that a web designer has to have command of.  A good web designer really does have to be both a jack-of-all-trades, and a master of all of them. This is closely related to the first point in #1 above.
  • Most websites out there fail to contain at least one of the essential features needed to make a good website.  Its hard for any one freelancer to know enough about every core area of a website to even know if they missed something.  Again, “you don’t know what you don’t know.”

4) Website design is not art! If people want to see art, they go to a museum, or visit an artists’s gallery. If they visit the site of Widgets Inc, they’ve come to get information about or interact in some way with Widgets Inc, not to be awed and stunned and distracted by beautiful graphic design. On the flip side, websites should not be ugly – hideous is just as distracting as gorgeous.  Simplicity and usability are paramount.  Read more by clicking here:  Website Design is NOT art!

5) Creating a website is only part of the equation – once that website is live, you have to get visitors to it for it to really be of value.  For most people this would mean publicizing their website offline – on their business cards, as part of their e-mail signature, in your store or office if you have one.  But, the other half of this is that you want to make it very very easy for people to find you through search engines.  To do this, you are definitely going to need a web designer who knows at least the basics of what’s called Search Engine Optimization.

If a web designer you’re thinking about hiring can’t tell you what they’re going to do to optimize your website for search engines, then they are missing a huge part of the puzzle, and it probably wouldn’t be worth it to hire them.  Creating a website that isn’t optimized for search is like taking an Ansel Adams original photograph and putting it in a frame that uses opaque frosted glass.  What’s the point?

I hope this list was helpful, and that you’re now more informed about the website design process.  If you have any questions on anything related to website design, please don’t hesitate to ask me.  And, if you are interested in hiring me to make you a rocking awesome website, just send me a quick note using my contact form, or e-mail me if you’d prefer.

{ 0 comments }