Web Design Business and Marketing

In talking to several people whether it be on the phone or in passing I get to hear a lot of web ideas. I tend to hear comments like, “when a visitor comes on I want to be able to swipe their email” or “I will make this visitor go to the certain page”.

Please remember that visitors are not criminals and until we stop treating them as such our websites will not get much respect. Your site is there for the visitor and not vice versa.

Let’s together as the web design community try to encourage and teach our friends and clients that a site is built ultimately for the visitor.

I was driving on the highway and noticed a bicycle business named “Cycle Gear”. Right away I thought about this name being read in a radio spot. It would be hilarious because you would hear “… come get your bike stuff at Psycho Gear”. This can be something that works for this company or against them depending on who is their target audience.

Most of the time when talking with business owners the discussion of their business name comes up. Talking about domain names I always advise clients to watch out with domains where same letters from different words are next to each other. For instance, “thetestteam.com”. It is hard sometimes to realize that there is two “t’s” in the domain if someone says it to you. This happens because there are many domains that are registered that just remove the second “t”.

See: Register All Possible Domains

I just finished all the transferring between the two websites and the next thing will be to redesign both. So please bear with me as I will be redesigning. Currently this is just a template being used for now.

It’s been a while since my last post and I really hope this makes up for that :).

If this tutorial was helpful please Digg This! Also if you want to link to it from you website simply copy the code below

<a href=”http://www.tri-omni.com/tutorials/more-than-one-way-to-skin-a-website”>More than one way to skin a web</a>

In in a past post I mentioned that I would post the way I go about taking a design from Photoshop and slicing it up into a website CSS. I have created a simple design to go through the process that I go through when taking a design from Photoshop to CSS. The way I do this process is not the only way to go about skinning a website. It is most efficient that works for me. I will try to remember all the sources that I have gathered information from and post them here. Of course I created a source zip file for you to download for free.

Download working files

Download PDF of this tutorial

1.) Slicing the design

First I take a look at the design to figure how I am going to slice it up. Remember there isn’t really a exact way to do this other than just making sure you are keeping the end user in mind. When I was learning CSS about 1 year ago I really couldn’t get my head wrapped around the subject coming from a table based design background. I found Boag World and began posting for help. Go to the post. The links within the post may not work anymore but there is some good advice that I received from PaulH and Rich Quick (Web Design Cornwall). Richard Quick explained how websites are like Ogars and Ogars are like onions just kidding he explained how websites are like onions read his reply to my post below.

me: how should i think of design. top to bottom left to right.

richquick: Think of it like a russian doll or an onion skin.

Start from the outside and peel away the layers.

The first thing to sort out is the >body< tag - make sure you set the margin to zero and set the background you want.

Then, write a div, with and ID of “wrapper” which will hold the whole of the design you did in Photoshop.

Then, starting at the top, create the main sections of the page using divs. Eg, for a typical page (2-column layout with horizontal nav):

1. header
2. main nav
3. main content
4. sidebar
5. footer

After some research and some CSS read like CSS Mastery. I have came about my own way of slicing the images. I first tend to study the design background images keeping the above list in mind. Can this background be repeat-x or repeat-y, if not then I will have to save the whole thing as an image background or can it be represented as a color.

2.) CSS & XHTML Templates

First let me start this section with saying if you are not using Firefox and you are design websites you are totally missing out on what it has to offer. One of the add-ons that use all the time is the Web Developer. Whenever I am starting the shell of my CSS design I turn on the outline block level elements so I am able to view each location of the div tags within my browser.

I also tend to have Firefox open along side IE7 and IE6. You can install a version of Multiple IE or to check how your design looks in several browsers you can use this awesome browser app called Browser Shots. I have template html and CSS files I use for all the websites that I create, meaning I have the infrastructure in place and copy this code over to make things move faster. You can view my template files here, these will should always remain here if you want to link to them or use them. After these files are applied and my design is sliced up I get to the nitty gritty of messing around with the CSS code. The structure of my CSS template was taken from the CSS Mastery book, once again a great book to start with if you are trying to learn CSS (remember I didn’t know much CSS about a year ago). While I am messing around with the CSS code other tools from the Web Developer add-on come into to play. Another main tool I use is display ruler.

The measuring tool in action.

The actual measurement.

3.) CSS Work

After my template files are applied I launch my browser and begin making changes to get the results I want. If you understand how the box model works you are well on your way to understanding CSS. There really is not much I do to the template files other than messing around with dimensions, margin and padding. There are times that I need to add line or two if I need to add a new div but this depends on the project that I am working with. The hover images are handled in the a:hover CSS inside the mainnav tag. I learned to use CSS to preload images so the swap would happen instantly here is the post that I learned it from.

4.) Cross Browser Checking

You will find that your design looks great in Firefox, okay in IE7 (it is getter better) and whoa what happened in IE6! Another great page to look at is browser statistics page which lists the most recent browser usage.

Firefox Render

See the difference. Right away you may think oh that is easy just add a conditional statement and I very well can but I tend to take it a step further and try to fix the problem in my regular css file first. If I can not fix the error in my regular css file then I create a conditional statement. How do debug a CSS file? The same way you debug code. Remove a line see what happens, add some code and see what happens and set a width and see what happens. It literally is saving the file over and over again and refreshing the browser over and over (control + f5 is a hard refresh) till results start looking pleasant. In this case I gave a width to the “#mainnav li” item. I could have used a conditional statement but try to avoid that if I can. Below is an example of the conditional statement I use for IE6.

<!–[if lt IE 7]>
<link href=”http://www.tri-omni.com/wp-content/themes/esbic
/ie6_style.css” rel=”stylesheet” type=”text/css” media=”screen” />
<![endif]–>

Conclusion

You will notice that the footers look different in Firefox and in IE7 of course first thing I would do before adding a conditional would be to figure out why in my orginal CSS document. Sure the first would be easier but to strive to be a better professional I prefer the latter. I hope that this information was helpful to you and please do share this post by Digging It!. This is information that I have gathered over the course of a year from learning CSS. Also comment here to let me know if this was helpful.

We recently launched Window Tinting San Antonio (Premier Window Tinting) with Echo Design Solutions (Web Design San Antonio). Below is a quote from the website:

Premier Window Tinting provides sales and installation for a wide variety of high quality window film products for both residential and commercial markets in the San Antonio Area. With over 20 years experience in the window film industry, partners Susan Machado & Joey Machado take great pride in offering the finest quality glass coating and window tinting products available.

This was a fun project to work on and the end result turned out very professional.

Visit Window Tinting San Antonio now!

I came across this from Boagworld forum. I love web design, marketing and SEO. Some of my other loves are family time, photography and rap. This video is too awesome.

A buddy of mine sent me over this link for an addon to install on my firefox. I hate going to the firefox addon website because I never get off of it. I usually spend an hour browser through new addons as opposed to finding the one I was looking for in the first place. The name of the addon is Piclens (Windows) by cooliris. If you get a chance download it so you can play around with it. For Google images you search the image you are looking for and when it displays the results you see a little play button when you hover over the image. When you click on the play button it opens a new screen with a wall of images that you can maneuver around with your mouse in 3D like environment. This thing is way cool, just imagine all the possibilities. Below are some screen shots I took using it. Here is the Piclens for Mac and a video demo. Once you play with it for Google, imagine going through that many photos that quickly on a stock photography website. When you needing to look for that right image for your design. Imagine all the images results on one wall of photos that you can scroll through fast and easily. I love where this is going.

It currently works for the following websites

• Flickr
• Photobucket
• Picasa Web Albums
• deviantART
• Smugmug
• Facebook
• MySpace
• Bebo
• Hi5
• Friendster
• Google Images
• Yahoo Images
• Ask Images
• Live Images
• AOL Images

Enjoy just like I did

I was wanting to learn CSS and was advised to purchase “CSS Mastery: Advanced Web Standards Solutions” By Andy Budd, Simon Collison, Cameron Moll.

I really like the way the friendsof books are set up. I will be honest and say I didn’t go through the whole book. I read and studied the first five chapters and picked up CSS from there. I now use the book as a reference when I get stuck on a certain issue like CSS for forms, lol. If you want to learn CSS this book will get you up and running pretty fast. The best way to learn is follow the examples in the book and then do it for a client who is expecting his website at the end of the week. That will force you to learn it fast.

When I was on my way home I heard a commercial about trading college books with other students. Great Idea and where was this in my first years of college. Anyways something I always advise my clients to do is register all possible domains that have the same sound as other words. The website advertised was 2dollartextbooks.com and right away I wondered if they purchased twodollartextbooks.com. Sure enough this company did register both. My suggestion to you is when you are picking a domain name just sound it out and see if others will spell it differently when typing it in. If there is any inclination that they will by all means register it, domains are so cheap. My other suggestion is if there is anyway your domain can be plural, register both it’s singular form and plural form. One other example is hearing an advertisement for a company called 4 Over. Now this company does a lot of print ads so that does make up for it. But for some reason if they did tv or radio they would really have to spell their domain in the advertisement so user will not go to fourover.com which is owned by someone else.

1. ) Increase the site visits to this website. If I had to give a number I would say 5,000 to 10,000 visits a month. You can help me with this if you have some suggestions or want me to talk on a certain subject or just plain digg and invite peeps.

2.) My goal for my business is to expand and have at least 1 other employee helping with the workload. I want the business to make six figures this year.

3.) My goal for family is to spend more time with my kiddos and my beautiful wife. We will be searching for a house to buy by fall of this year.

4.) To become closer to my extended family brother, sister, brother-in-law and nieces.

5.) To pay off as much debt as I possibly can (college loans included).

6.) To lose about 20-30 pounds (going on a little diet for the month of January).

7.) I have been reading a lot lately, from a kid who would pick the books with more pictures than words, to reading 2 books a month is a pretty big change. I would like to increase this and absorb as much knowledge as I can about web, marketing, idea inspiration and business.

8.) Make good grades in school, SCAD.

9.) I guess as some point find a church to go to. Enough Said.

What are your goals for the new year? Post them here or post a link to your blog for your goals. HAPPY NEW YEAR AND THE BEST TO YOU AND YOUR PLANS  FOR ANOTHER PROSPEROUS YEAR!