Blog Of A Boston Web Designer.

Thoughts, Experiments, Processes & Insight.

Archive for the ‘Web Design’ Category

Friday, August 20th, 2010

Podcast Test #2

Posted in Web Design • No Comments »
Friday, August 20th, 2010

Podcast Test

Posted in Web Design • 1 Comment »
Tuesday, November 3rd, 2009

Treat Your Website Like Your Fantasy Football Team, Use Analytics

The best teams in your Fantasy Football League have a range of analytical skills, see opportunities/weaknesses with their team and others, and react accordingly. They understand player stats to form a complete team with the best available talent. They are able to find the diamonds in the rough and continue on when players get injured. They even know when to cut players for a better piece to the puzzle. They understand their team better than the others and make changes week to week because of different matchups. They are constantly involved with their team and it shows.

Set It & Forget It Doesn’t Fly.
I see it happen all the time. Clients get setup with Google Analytics on their website and never leverage the information tracked. Though some may view the scheduled reports, rarely any ever read the tea leaves to take action. I also see many websites without any visitor tracking (if this is you, get Google Analytics installed, you’ll be surprised with the information you can gather) and are missing out big time.

Don’t Just View Analytics, Use Analytics.
The amount of information gathered from Google Analytics will surprise you. Here is some information that can be gathered from someone visiting your website.

• Length of visit
• Amout of pages visited
• Amount of visitors
• Keywords used to find your website
• Websites that sent a visitor to your website
• Screen size of visitor
• Bounce rate (if they came to a page and didn’t stay)
• Top pages visited
• Type of computer and browser used by visitor

Google Analytics

I’m sure you are all saying well that’s great but how can any of this help me improve my website. OK, well here are a few examples that can get your mind thinking.

1) You notice an increase in mobile phone users on your website trying to read your articles and contact information. You can create a simplified mobile version to help them get to the information quicker. Maybe even deliver coupons if they are within 15 miles from your store by utilizing the GPS in their mobile phone.

2) You notice a page on your website is getting many visits but nobody is staying on the page to read it (this equals a high bounce rate). This should tell you that the content written on that page is not what your visitors are looking for and you should change this page to keep visitors on your website.

3) You notice a big drop in Search Engines leading to your website. You need to figure out why this happened and fix it. You may have lost prime position in Google because of a change in Googles algorithm. Or, a competitor may have entered and surpassed your ranking.

4) You want to include a new cutting edge feature on your website. You notice that 60% of your users are still stuck on Internet Explorer 6 and your web designer informs you that the new feature will not work for those users. You can now make an informed decision whether or not to develop that new feature knowing 60% of your users cannot use it.

So, if you’ve got Google Analytics on your website and you’re just viewing the scheduled reports, consider this a push to really dive in and understand what is going on with your website and begin to mold it into the best website possible. Find your opportunities and fix your weaknesses!

Posted in Experience, SEO, Web Design • 2 Comments »
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 »
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 »