Happy Holidays Everybody

At this time, I am placing the Blog on a temporary Hiatus for Seasonal Holidays, but before I do, I would like to take a moment to thank everyone who has taken the time to read this blog and wish you and your families a very festive Holiday Season, no matter how you celebrate.

Have a Wonderful remainder of 2013, Be safe when welcoming in the new year and see you all in 2014

Sincerely 

David

Make a List, Check it Twice, is your Website Naughty or Nice?

One would think, with the time of year and the title of this Blog posting, that this is a tongue-in-cheek holiday posting, and if One thinks that, then someone has Another Think Coming !

Making a list, prior to seeking out a Designer for your Website, can be all the difference between having a Website that users find “Nice” or one that they avoid because it’s “Naughty”

The best way to start is to create categories for your Website, besides the Homepage or “Index” file, what other areas do you want your Website to Cover.  What information do you want it to convey to your visitors?  The usual result of asking yourself this question is you come up with something much like this (we’ll use page in place of each category after Home )

Home<—>Page 1<—>Page 2<—>Page 3<—>Page 4

So now that we have each category mapped out, the next question to ask yourself is “What Content do I want in each category?”  This is where you can make bullet points for each category and the information you want, much like this

Home<—>Page 1<—>Page 2<—>Page 3<—>Page 4

|_Intro |_point 1   |_point 1  |_point 1    |_point 1

|_point 2   |_point 2  |_point 2    |_point 2

And so forth, so now lets say you want to include specific images with each point (we’ll use Home and Page 1 for this example to save some space)

HomeHome<—>Page 1

|_Intro           |_point 1

      |_img 1

      |_img 2

  |_point 2

As you an see the process becomes fairly straight forward, as you get everything flowing how you want it to lay out.  A Site map project like this, actually helps your Designer see your vision more clearly and allows you to focus your thoughts on what you want to see listed content wise

Speed, Size and Bandwidth: the importance of image PPI in the Mobile Web World

Images, it’s said a Picture is worth a Thousand words, the problem in the Web Connected Modern world, is that a picture is also worth Megabytes of data to download when it comes to Websites.  An unoptimized image (or 10 or 50, pick a number) can make or break the success your Website has with the Client base. to slow to load on a WiFi connected machine and users will go else where, too many to download on Mobile Data and you have pretty much sunk yourself as far as getting that client to follow up when they are back at a Laptop, Desktop or Tablet connected to the internet via Wifi or cable.

The current format for almost every image online is to have it encoded at 72 PPI, or pixels Per Inch, with some sites claiming that it does not matter the PPI of an image but more the Width and Height resolution of the image.

Apples Retina Display, states that Per inch it displays 326 Pixels, contrasting that with the industry standard of 72 Pixels Per Inch, that actually creates a ratio of 1:4.5 pixels difference.  lets break this down a bit further, we will use the example of a 3 inch square image (so 9 Square inches of Screen) for our calculations here.

	Traditional	Retina
Format	Jpeg	Jpeg
File Size	137 KB	2.74 MB
Height	3 Inch	3 Inch
Width	3 Inch	3 Inch
PPI	648 Pixels	2,934 Pixels
Download Time 512kbits/s	00:00:02	00:00:44
speed	Highspeed	Highspeed

As you can see, the same picture can be quite effected, As Retina like displays and faster internet connections both improve, this is a detail that Web Designers will eventually have to learn to adjust and code for.

Answering a Major Question Asked of Web Designers

One of the questions most asked of Web Designers by potential clients, and the general public, is Why do we charge what we do for our services?  The simple, and cocky, answer would be because we’re worth it.

Fact is there is a lot more that goes into figuring out what to charge.  The going rate for a good Web Designer can be anywhere on average from $40-$65 per hour.  out of that hourly rate, a Web Designer has to cover the costs of many things, including

Computers: Your Designs have to be able to look right on everything, Apple, Google, Microsoft, Linux, you name it, if your customers use it they expect your Website to display on it, and while there are ways to do basic design testing with simulators, not every design will display correctly on those simulations as they will in the actual product.  That means that a Web Designer needs to be able to deploy Your design throughout the design process on all types of Modern and Legacy platforms.

Software: Web Designers edit images, we format video and audio files for quick access over a number of different bandwidth delivery processes.  A suite of programs, like Adobe Creative Suite, costs around $1500 to purchase a copy of. and to keep up with Technology can tend to require upgrades on a routine basis.

Internet: We’re Web Designers, the Internet is what we do, that means that most likely we tend to communicate via Email, deliver mock-ups of your projects via attachments, and need that upload pipe to get your site to your Web Server so that your site can go live on time.

Office Supplies / Office Rental: Lets face it, every business needs a place to work out of, and like other businesses, Web Designers need to be able to keep their Client Files organized and up to date.  There are invoices to go out, Business Cards to print out, and the ever important task of making sure that the information for “Frank’s Hot Dog Shop” does not get coded into “Freddy’s Dog Kennel’s” Website, which means things like File Folders and USB Drives are very important to the day to day operation of a successful Business.

Promotional: How did you first come to discover your Web Designer? Chances are it was through an Advertisement, be it Online, Print, Television or Radio, Advertising costs funds for us Web Designers, After all that's how we extend the bridge to our potential Clients

Transportation: You like the idea of meeting face to face with those you are working with, so do Designers, but that means getting to a mutually agreed upon location for said meeting, that could be Your office or the corner Coffee Shop.  No matter the location, your designer needs to be able to get from their point A to your point B.  That means We’re looking at gas if we Drive (and upkeep on our car) or Public Transportation, and those costs have to also be factored into operating budgets.

Wages / Benefits: Once everything else listed above is taken care of , We Designers kind of like to still be able to eat, and to know that if we are sick, we can go see a Doctor.  That means Wages so we can look after things like this, and so you have a Designer that can actually do the job you need.

There is many a set of reasons why Us Designers tend to take a mentality much like the one depicted in the below image, and I hope this Blog Entry explains some of them

The Joy of [Digital] Painting

Before We go to much further into this blog entry,  yes the title is indeed an homage to the long running PBS series The Joy of Painting with Bob Ross. Now with that said, just what is digital painting and how does it happen to apply to the world of Web Design anyway?

Much like its analog counterpart, digital painting is the art of applying ink to canvas in order to create an image which is pleasing to the human eye. The techniques involved actually share many of the same details as well as an artist works with layers to build up the perfect image for a given project, be it an icon, header graphics or photo touch ups.

A differing area in the two, for the longest time has been with how the artist works on the images in question.  Digital Painters for many years worked primarily with a mouse, over time switching to drawing tablets, and for the creative, like myself,  even using things like Griffin's A-Frame iPad stand to create an easel, thus replicating the painter style, however, even this technique I believe will eventually evolve as more computers ship with touch screen displays and the digital stylus becomes more precise in its on screen tracking.

What is an “Internet Spider” anyway?

The website  netlingo.com described Spider as

Synonymous with a crawler, this is a program that searches the Internet and attempts to locate new, publicly accessible resources, such as WWW documents, files available in public FTP archives, and Gopher documents. 

Also called wanderers or bots, spiders contribute their discoveries to a database that Internet users can search by using a search engine. Spider technology is necessary because the rate at which people are creating new Internet documents greatly exceeds any manual indexing capacity (although search directories prefer the manual approach).

But what does a “Spider” actually do and what part of a Website is it crawling around on anyway? The answer to the first part of this question is that a “Spider” looks over the code and content of a Webpage so that when a user goes to Google, Bing or any other Search Engine, results can be returned for the search term enquired.

The Second part, needs to go into a bit more detail of something called Meta Data (found in a tag) to partly understand.  Meta data is information that tells the Spider what the Website covers, where it’s information is aimed (after all you would not want to be sent to a service in Vancouver WA if you were looking for it in Vancouver BC) 

So you see, while this is a very basic explanation of Spiders, in the case of the World Wide Web, Spiders are your friends 

What should a Professional Promotional Website include and Look Like Anyway?

A few blogs back, we discussed the idea of creating a Website to showcase yourself to potential employers.  Well In this edition, I thought I would take and create a basic Mock up image to show just how simple a Website like this could be and still effectively get your message across.

First, lets look at the sections we will use for this example, they include the following:

Your Index Page: This is where you create a very basic introduction and thank those who are coming to your site for taking enough interest in you to visit

Education: As simple as it sounds, this is where you showcase your High School and Post Secondary Educational accomplishments. Broken into the two sections, take a bit to explain your areas of interest in your studies and at the same time any awards / honours that you received.

Work Experience: Again, fairly straight forward here. List your past jobs in reverse chronological order, so that your Newest job is posted at the top.  Much like education you can list any awards / honours (like safety awards, perfect Job Attendance ) in this section

Social Projects / Contact Page: This is a good place to show off anything that you do to give back to the community. Are you a member of a Social Club like the Shriners or Lions, Do you give back by mentoring students in your spare time, or maybe spend your weekends helping at a soup kitchen.  

All this information is great to put in here as many companies love the idea of having an employee that they can show off in the public eye as a representative of their company

With the general sections covered, lets take a look at a basic layout example for your Website.

An example of a Professional Promotional Layout

While you will notice that our example image is lacking actual content, I hope you have noticed something else.  Take a look at our subject’s image and then look at the Website itself. Notice how we have actually matched the colours from the subject’s picture to our site’s navigation and header bar. 

By doing this we extend the subject’s picture through the Website and creates a visual impression of pride being taken in the presentation.  When coupled with well written copy, and a professional domain name, a digital impression can be made even after you have left the office, extra points if you extend the same colour choices to your print resume as it will showcase a even higher level of personal pride and professionalism.