Blog Of A Boston Web Designer.

Thoughts, Experiments, Processes & Insight.

Archive for September, 2009

Monday, September 21st, 2009

Building A House Is Like Building A Website

This is an example I tend to use often to explain the website process. It helps to show the phases of the process and the consequences of moving to the next phase early. For the sake of simplification I am going to narrow it down to 3 phases; Plan, Design and Build.

Phase 1: Planning
The homeowner/client has the strongest part in this phase. Designer provides guidance.

A solid plan will always save time, money and make life easier down the road. Here are some questions you would need to answer first before attempting to envision your next house or website. You may subconsciously make these plans or decisions in your head but it always helps to write out your thoughts and it will help when hiring an architect or designer.

For a house you may need to answer questions like:
• What town do I want to live in?
• What size house do I need?
• How many bedrooms do I want?
• Do I want a garage?
• Is central air important?

For a website you will need to answer questions like:
• What domain name do I want?
• What do I need to communicate and what content should it include?
• What is the end goal of the website?
• How big does the site need to be (in pages)?
• Who is the intended audience of the website?

It is important to include the architect or designer in this phase as they will be able to offer their expertise to help you make informed decisions and properly plan for a smooth project.

Phase 2: Design
The designer has the strongest part in this phase. Homeowner/client provides feedback.

At this phase your architect or designer should have a thorough understanding of your project and expectations. The architect or designer should have all (or most) questions answered to begin creating the visuals of what your house or website will look like. A designer should have all (or most) content written for the website into defined pages from the Planning phase to begin designing the website.

If there are too many variables still up in the air then time can be wasted designing the house or website. For example, if the size of the house or what is going on the website is still questionable then it does nobody any good to begin designing anything. If one were to design a small house then it was decided to go bigger, time was just wasted on the first design. Time shouldn’t be spent experimenting with decisions that should have been answered during the previous phase.

The architect will visualize where rooms will go, how the entrance will look and the shape of the house to name a few. A designer will create a color scheme, the size relation between elements, create a user flow and set the typography to name a few.

During this phase the architect or designer may go back and forth with the homeowner/client to revise the design until satisfied. Once the design gets approved then it is time to move into the next phase.

Website Process

Phase 3: Build
Coder/developer has strongest part in this phase. Homeowner/client has minimal impact.

This phase brings life to your project. All the hard work from the previous two phases should pay off here. Homeowner/client interaction is typically minimal during building since direction should be clear and all decisions should have been made already. The builders should be able to build by following the groundwork from the previous phases. All they must do is follow the design and dimensions provided to them.

Changes at this phase can be costly and delay a project. For example, if you were to tell the builder as they were working that you wanted the house 15 feet longer and the garage on the other side now, this would cause an issue. More materials would be needed, walls would need to be knocked down, electrical and plumbing may need to be reworked – expect the cost of the project and timeframe to increase.

Boston Website Development

Same holds true with building a website. If a client were to make changes at this phase, code would need to be deleted, rewritten and retested to accommodate the new changes.

The Simple End Result Version
• The house or website will have this
• The house or website will look like this
• The house or website is built

In Conclusion
Having a better understanding of the website process should help your projects be on time and on budget. You will now know at what phases you are required to participate and what your role is. Now you know. And knowing is half the battle!

Posted in Experience, Processes, Web Design • 1 Comment »
Friday, September 11th, 2009

New Facebook Fan Page

I know you guys and gals out there are wondering how you can easily stay connected and up to date with my me and my website. Well, here it is, straight off the showroom floor, my very own facebook fan page.

I’ll keep this up to date with any new portfolio pieces, bits of information I find interesting or useful and what I’m currently up to. Feel free to stir up a conversation and ask any questions if you need a hand or want to understand something website related.

You can also catch me on LinkedIn and Twitter.

I’ll be here to help!

Posted in Experiments, Social Media • 1 Comment »
Wednesday, September 9th, 2009

CSS Entire Image Flexible Drop Shadows

Create expandable, flexible css dropshadows that go around an entire image, are standards compliant and fully tested on all of the major browsers.

This tutorial is a spin-off from A List Apart’s Onion Skinned Drop Shadows tutorial. If you wish to learn more about how this method works, please review A List Apart’s article. In their example they explain in great detail how it works but they only show you how to create a drop shadow on part of the image. In my example I will show you how to create an expandable, flexible, css drop shadow that goes around an entire image.

It may not be the prettiest method but it works and it sure beats adding a drop shadow to a pile of images. All of my drop shadow graphics are 4 pixels x 4 pixels and the selector .ds10’s padding is 4px. So if your drop shadow images are a different size all you need to adjust is the padding for selector .ds10 and you are all set.

Browsers Tested:
Internet Explorer (PC 6,7/Mac), Firefox (PC/Mac), Safari (Mac), Netscape Navigator (Mac) – feel free to add to the list.

CSS:
.ds1, .ds2, .ds3, .ds4, .ds5, .ds6, .ds7, .ds8, .ds9, .ds10 {
display:inline-table;
/* \*/display:block;/**/
}

.ds1 {
float:left;
}

.ds2 {
background:url(left.gif) left top repeat-y;
}

.ds3 {
background:url(bottom.gif) left bottom repeat-x;
}

.ds4 {
background:url(corner_bl.gif) left bottom no-repeat;
}

.ds5 {
background:url(top.gif) left top repeat-x;
}

.ds6 {
background:url(right.gif) right top repeat-y;
}

.ds7 {
background:url(corner_tl.gif) left top no-repeat;
}

.ds8 {
background:url(corner_tr.gif) right top no-repeat;
}

.ds9 {
background:url(corner_br.gif) right bottom no-repeat;
}

.ds10 {
padding: 4px;
}

.ds10 img {
display:block;
}

HTML:
<div class="ds1">
<div class="ds2"><div class="ds3"><div class="ds4">
<div class="ds5"><div class="ds6"><div class="ds7">
<div class="ds8"><div class="ds9"><div class="ds10">
<img src="images/teddy_bear.jpg" alt="CSS Dropshadow" />
</div></div></div>
</div></div></div>
</div></div></div>
</div>

Source Files:
Download HTML, CSS & Images

Example:

css entire image drop shadow
Posted in Experiments, HTML & CSS, Tutorials, Web Design • 6 Comments »
Wednesday, September 2nd, 2009

Rank First in Google Search with Local Business Center

Here is a technique to easily get your business listed online and rank first or at the top of Google’s search engine. This is a simple trick that will take about 10 minutes and can considerably increase the visibility of your business in the online world.

Requirements:
• Address or Phone Number to confirm listing
• Website is not necessary

Walk-thru:
There are 6 sections to fill-out to create your local business listing. You do not have to fill each section but it is in your best interest to do so. Completing your profile 100% will improve your ranking and provide more opportunities for you to insert keywords related to your business, its services or products.

These 6 sections include:
• Basic Information (company name, address, number, email, website, description and categories)
• Hours of Operation
• Payment Options
• Photos
• Videos
• Additional Details (parking, brands carried, other information you would like to include)

Example:
This is what your listing will look like when someone searches for a service or product. Google will automatically adjust the results for the map to fit the searchers geographical location. These local business results get pushed above the traditional search engine results in Google which makes getting listed valuable to any company.

google local business center

How To Improve Your Listing:
It is possible to achieve good results by quickly listing your business but it is also possible to achieve even greater success with a few easy tweaks. The first way to improve visibility is to insert keywords into your company name, description and the other available areas to broaden your reach in search engines. Keyword research is important if you want to gain the most from your listing or website. If you use Google Analytics for your website then you can see what terms people use to find your company and see what they don’t use. There are also sites that can tell you how many times a certain keyword is searched to see if it is a high-traffic or low-traffic keyword.

The second way to push your listing up the ranks is to have customers or clients write a review for your company. Your client or customer will need to have a Google account to write a review but with Google dominating the internet you should have no problem finding a few to help you out. Reviews have a strong influence on where your listing will appear. So if you find your business being lost in the many pages of other businesses get some reviews and you will notice you will move up quickly.

What’s good about Search Engine Optimization (SEO) is that you can (and will need to) constantly tweak and build upon it to improve your rank. Search engines are constantly evolving their algorithms for results so it’s important to monitor how your website or business ranks to make sure your competition doesn’t pass you. There are a few applications that can monitor your sites rankings; you can also use Google Analytics and Local Business Center to view your stats.

Results:
Within one week of listing my business in Google’s Local Business Center I was placed within the top 10 of out of 389,608 local results for the term “Boston Web Design”. This was done by completing my profile 100%, optimized for the keywords I hand selected and with 5 reviews. You can see from the chart below that for the month of August I got over 2700 impressions (an impression is every time your business is shown) and 34 clicks to my website that I would have never gotten before my listing. You can view my local business listing here.

google-local-business-center-results

Get started today and create your business listing.

Posted in SEO • 4 Comments »