Welcome to our office, we sell ideas...

I wanted to take a minute to share a few tips with anyone that is interested in hiring a web designer in Vancouver (or wherever you may be). You might need a new Blog or a website just for yourself, or you may be looking for a redesign for your outdated business website – either way these tips will put you well on the road to building a healthy relationship with your web designer.

Try and stay up to date with technology...

The more prepared you are before you start shopping around for someone to take on your contract, the better off your site will be. You will save money, time and headaches all around. You should also be able to avoid ending up as a post on the Client’s from Hell Blog

Web design isn't easy...

As web designers and web developers we are always pushing the envelope and trying our best to come up with innovative designs for you.

As students of the Interactive Design program we have learned to focus on usability, functionality and designing experiences that are engaging for your viewers.

One thing that we definitely have not learned though, is mind reading (too bad about that…). We are not magicians nor robots (although some may claim differently). To get your project off the ground we are going to need your help with a few things. Here’s a list to get you started!

Ask yourself these questions before you contact a web designer

#1) Brainstorm about the why, where, what, who’s, when and how’s…

Why: why do you need this website? What will happen if you don’t get a new website? What are your hopes for the website? Your motivations?
Where: where in the market do you sit? Who is your competition? Where is the niche that you fill?
What: what tasks need to be accomplished on your website? What do you not want on your website? What features and technology are you hoping to include and use? What information do you want to feature? And probably the most important detail of all, what is your budget?

Who: who are your clients? What are their motivations for visiting your site? Do you have a tag line that speaks to your customers? Who is your competition?
When: When do you want this new site to be live? What is your timeline?

How: Do you currently own the url that you want to use? Do you have your content ready (or at least an idea of the content that you want to feature? Do you have all of the photos (or videos) ready to go? Do you have a logo or do you need one designed?

#2) Research…

Do some research. Try to find at least 5 examples of websites that do something similar to what your website will do. Find sites that you love for different reasons (graphics, content, features, navigation, etc). If you stumble across a few that you don’t like, take note of those as well. This will help your web designer understand your tastes and get a feel for sites that you are comfortable with. It makes it much easier than saying “I want something with lots of white space and I love Facebook. So what can you make for me?”

remember, an email is better than a valentines card to a web designer!

#3) Communicate…

Be prepared to communicate with us! We are online most of the time – web designers love to send emails almost as much as they love to get them – they are better than a valentine’s card to us! We will have lots of questions, so the faster that you respond, the quicker that we can move forward with your project.

#4) Trust…

Believe in your web designer. You shopped around and then decided to hire us. Let us do our job and trust that we have your success in mind at all times. You wouldn’t go call a plumber and then question him every time he pulls out a tool. Trust that we know what we are doing (even if we dress funny).

#5) Take our advice…

We have lots of great advice. We usually know a little bit about a wide variety of things, from branding, to SEO, copy writing, video editing, and usability testing. We are up to speed on the latest design trends, so if we make a funny face when you ask for florescent lime green, shiny buttons to be on every page and an epic flash intro splash page don’t take offense. Rather, take a minute to check out some of the new, fresh examples and options that we will provide for you.

With that said:

The Interactive Design class of 2010 is just about to graduate! We are hoping to all launch into the market here in Vancouver and start our careers. Some of us have already started working with clients designing and developing some exciting new sites. Check out our program Interactive Design at Capilano University if you are interested to learn more about us, our work, or if you are looking for a web design school in Vancouver.

If you have read my previous post and express the above sentiment, you are in the right place. If you were looking for fish taco recipes please go here: FISH TACOS.

So now that you are sure that you want to be a web ninja you need to learn the structure of the web itself.

*Disclaimer*: This will be very basic and targeted at those who know nothing

The Internet is not literally a series of tubes that connect people the way that some *cough “politicians” have portrayed it. It is in fact a butt load of computers storing information and sharing that information through a network of connections.

The entire Internet has roughly the same amount connections as synapses and connections in the human brain. To learn more about the connections between the Internet and the human brain check out this TED video: 5000 Days of the Internet with Kevin Kelly

If you can wrap your head around that concept you can start to understand how complex the Internet system truly is.

Luckily for you the basic structural language of the Internet is rather simple. A 12 year old with no life, an unhealthy attraction to Japanese cartoons and little regard for personal hygiene can master it very quickly. (I know this because I was that boy… no seriously I had an undercut like this dude).

On to the code.

So the basic structure of the a web page is written in a language called HTML, which stands for Hot-Tight-Monkey-Love… just kidding. It stands for Hyper-text-markup-language. So HTML is a not a programming language it is a markup language.

Think of if like writing in Microsoft Word. When you tell MS Word that some text should be bold, a sentence should be indented and that there should be a title to the document, the software does those things for you. With HTML we are going to do the same thing on our own. We are going to tell the web browser how the content in the web page should be structured.

So let us recap a little. When we browse the Internet we use a web browser like Firefox, Google Chrome, Safari or which ever software you prefer (we NEVER use Internet Explorer, go here for information on why IE is bad).

When the web browser loads a web page it reads text with HTML markup around that text. The HTML tells the web browser to show the information in a certain way. It markups the information so that it looks like a web page.

Now that we understand a little bit of what is going on let us look at a little code.

Opening and closing tags:

< This is a tag that opens a piece of  html code.

> this is a tag that closes a piece of html code.

Every < tag must have a > tag or your web page is broken.

Like this:  <html>

The basic structure of every website is something like this:

<html>

<head>

<title>This is the title it will appear in the web browser window at the top </title>

</head>

<body>

<h1> This a heading </h1>

<p> This is a paragraph of text. The <p> tells the browser to display this text as a paragraph. We can set the style of the paragraph text to be larger or smaller, to be a different color and all kinds of other things. But we’ll get into that later. </p>

</body>

</html>

Notice how all of the HTML tags have a corresponding tag with a / in them. This is called the closing tag. Every HTML element needs a closing tag except for a few exceptions.

You can see that the page starts with head information like title <head><title>TITLE</title></head>. Next we close the head information and start with body information, like a heading and a paragraph.

Now you know the basics of HTML.

If this was easy for you to understand you are on your way to being a web designer. But don’t get too excited it just keeps getting more and more confusing and hard from here. I recommend that you now head over to W3 Schools and learn some more HTML.

If you didn’t understand that crap check out this video of kitties:

Firebug is a software plugin that can be added onto Firefox as tool for debugging websites. Ever since I started designing websites I have been forced to use Firefox for debugging all of my work, which was not a horrible fate. Firefox is a perfectly fine browser and there are tons of great plugins available for Firefox to improve all different kinds of workflows. Firefox also keeps up to date with current web standards and encourages users to update their browser software on regular basis. Furthermore, the anarchist in me loves the fact that Firefox is open source.

However, I am a Mac user and Safari is significantly faster on my machine. PC Adviser claims that Safari is 38 percent faster than Firefox. Safari also renders websites at a much higher resolution. So, understandably, I was thrilled when I found out I could have my cake and eat it too. Firebug Lite allows users to use the Firebug plugin with any available browser.

Here is how it works:

1. Place the code below in the head of any web project that  you are working on.

<script  type=”text/javascript”src=”http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js></script>

2. Make sure your computer is connected to the Internet

3. Load your web project into the browser of your choice

4. Bam!!!! Check that out!!! Firebug!!!

That is it. Easy as pie.

I hope you all enjoyed the first part of this post: New To Gmail Tutorial.
Today, we’ll go over adding filters to your inbox so you can immediately
organize emails as they come in.  We will also look at applying labels to your emails.

How to add a Filter to your email:

Start by clicking on the “Settings” link in the top right corner of the page.
Next, select the “Filters” link from the settings page.

You should see this page:

Choose the “Create a new filter” and you should see the screen below:

This is the part of creating a filter that is not so friendly and useable.  You would think when you go to type in an email address, gmail would pop up their helper that shows your contacts… but it doesn’t. So be WARNED, have your email addresses ready and accessible before you try to create this filter.

I’ve inserted an example below to illustrate what text fields I generally fill out.

You can go as general or specific as you want with Gmail filters.  Beauty!
When you are finished, click on “Next step” to continue on.

The next window will be the Actions window.  This is where you specify what you want to happen after Gmail filters the emails.  Do you want them starred for emphasis, archived for later, or (my personal favorite) do you want Gmail to add a Label to them.

Select the actions that you want to apply to your filter.  If you haven’t made any labels yet, you can create a new label right in the drop down box.

Gmail also give you the option to apply this filter to any current emails that meet the requirements. You can find this option to the right of the “Create Filter” button.

When you have selected all of your desire actions, click the “Create Filter” button.

Gmail will then show you the filter that you’ve just created.. and you are good to go my friends!!

Now that you have created your filter… lets look s a bit more at Labels.

Gmail keeps your labels in the left column on your page.

If you want to label something on the fly, Gmail also has a new feature that allows you to click and drag the label onto any email you want.  Give it a try.  click on the “personal” label and drag it over to a email of your choose. quick and easy!

If you click on a label… A little window will pop up where you can choose the colors of your label.  (If there aren’t enough colors for you, there is a Lab for custom colors)

Here’s a screen shot of a “Personal” label attached to one of my emails.

So there you have it!

With these tools, you can customize your email as little or as much as you want.
I hope this post has helped you organize your life even more.

If you really enjoyed this post, or think there is something I haven’t covered, please let me know by commenting below.

much <3

Laura

Check out my program! Interactive Design Lab

If you are new to Gmail, your inbox probably looks like this(above). Sure, it look clean, and pretty enough but I like my email inbox to have a more personal feel.

So, here is how to  add a theme to your inbox:

• Click on the “Settings” link in the top right hand corner of the page,
  and you will see will see the page below.

• Click on the “Themes” link. It is the link farthest to the right.
• And you will see a whole page full of themes waiting for you
  

I’m confident enough to say that there’s a theme for everyone. There’s a video game theme for the nerds, a mountain theme (that changes depending on your location!) for those outdoor types, and there’s even an option to pick your own color scheme if you know exactly what you want.  Good times.

The next Gmail gem on my list is Gmail Labs. Without labs, Gmail would not look so special next to Hotmail or .. Microsoft Outlook But these labs bring much needed functionality and an ability to customize your inbox exactly the way you want it.

So, here is how to enable Labs in your Gmail account:

• Return to the settings page where you first found the “Themes” link.
  and just two links to the left, you will find the “Labs” link. Click on it!
• Your page will look something like this:

This part can be a bit overwhelming, especially if you haven’t explored a ton of Gmail’s features, so I’ll outline five Labs that in my opinion are must-haves.  If you’d prefer to explore on your own, all you need to do to get each lab working is to select “Enable” to the right of the lab.  Make sure you save your changes at the bottom, or it won’t work.

My Top five Gmail Labs:

1. Google Calendar Gadget

This lab puts a small Google Calendar widget in your left-hand column. I LOVE this.. because then I don’t need to switch over to Google Calendar to see what is coming up in my schedule.

2. Right-side Chat

This may be personal taste, but I really don’t like scrolling down the page to see who happens to be online to chat.. and depending how many widgets you have in your left column, you might have to scroll as well.  This one is pretty self-explanatory. It puts your chat on the right side of the page.

3. Navbar drag and drop

Yes! a Lab to control all of these widgets.  This allows you to drag and drop the elements in your left-column.

4. Mark as Read Button

This may be the biggest timesaver of all! I don’t know if you are obsessed with organizing your email like I am, but I was growing weary of having to click on the “More actions” drop down menu to Mark my emails as read. Nevermore, my friends. This Lab places the “Mark as Read” Button right next to all the other important buttons.

5. Inserting Images

This Lab is great. It allows you to insert images directly into the body of your message. Sometimes, I just want to send a silly image that my friends don’t have to download.  Also, It can be great to add context and interest to your emails.

There you have it! I hope this post has expanded your world and helped you enjoy Gmail even more.

In my next post, we’ll dive into filters and labels.  It will be perfect for you if you really enjoy an organized mailbox.

<3

Laura

Check out my program at:

http://www.interactivedesignlab.com/