Archive for the ‘Web Design’ Category

Centering a Div in IE8 Using margin:auto

Sunday, March 7th, 2010

On the count of 3 everybody scream “MICROSOFT SUCKS AND I HATE INTERNET EXPLODER”.

1, 2, 3, go.

note: Newer post has solutions for centering in IE9

I’ve been working on revamping my Sticky Footer code for IE8 compatibility when I ran into a little bug of sorts. If you are using margin:0 auto; to center a div it will cause problems in IE8 if the parent element has either no width already set, or you’ve not set text alignment to center for that parent div, or you are using the wrong doc type declaration.

These are the three fixes I know of;

Width:100%

Set your containing element to width:100%; so then your centered div inside of that one will actually center. Like this;

#container {width:100%}
#centered {width:400px; margin:0 auto}

Text-Align:Center

If you apply text-align:center to the containing div IE8 will obey the margin:auto. You then have to un-center your text content inside that centered div with text-align:left. Kind of convoluted, I know. Apparently some web designer have been doing it like that for years as this was an issue with IE5.

#container {text-align:center}
#centered {width:400px; margin:0 auto;text-align:left}

Use Transitional Doc Type

If you are using XHTML 1.0 Strict as your doc type, IE8 will not obey the margin:auto method for centering an element, unless you use one of the above hacks. You can also just change your doc type declaration at the top of your page to be XHTML 1.0 Transitional. IE8 will then obey the margin:auto statement.

Here’s a link to doc type declaration syntax.

Oh the joys of cross browser web design.

A CSS Sticky Footer that Works in 2009 (Chrome too)

Tuesday, January 6th, 2009

UPDATE: This sticky footer solution has been updated since the launch of Internet Exploder 8. More recent blog post about it is here. Most the typical problems some people encounter are the same and many have been discussed in the comments below on this post. If you are having problems there is a good chance you’ll find your solution below from someone else who ran into similar issues.

For those that don’t know a sticky footer is a footer that sticks to the bottom of the browser window when the content area is too short to push it down on its own. Having a footer float part way up the page can look like poor design on some sites.

A working solution that actually makes the footer stick to the bottom of the page can be found here.

(more…)

Freshly Minted Client Website

Thursday, December 18th, 2008

I just finished up a great new website for Tod Mountain Ranch in British Columbia. They are a guest ranch offering horse riding vacations. The lodge and cabins are still under construction and are set to open this coming spring in 2009.

Tod Mountain Ranch horseback riding vacations in BC, Canada

(more…)

Sometimes Design Turns into Perfection - With the Help of Others

Wednesday, March 26th, 2008

Ok, I’m gonna brag a bit here. Just completed a new site for a architectural home designer in British Columbia, Canada. The final result fits my client and his business perfectly. It has an architectural look about it and the color scheme matches the semi-arid mountainous terrain in the region his homes are constructed. I think it’s perfect, but I’m a tad biased, of course. :)

Original Home Designs - Kamloops, BC

Now it’s not 100% original as nothing in design ever really is. We all take inspiration from others and blend ideas to build our own creations. So here is the process that came to develop this great design.

It Began with a Logo

OHD LogoFirst we started with designing a new logo by holding a logo contest. The final logo was clean, simple, and turns out to be very versatile. Trevor, the design team leader over at Geekpoint.net was the designer. This  logo then helped to determine some of the color schemes for the site.

Layout and Color Schemes

The client had presented some print brochures and posters from a window manufacturer which helped to set a direction. I had some initial ideas of basic layout and placement of elements but needed something else to help tie it all together.

When I’m stumped on design ideas I browse the CSS web design gallery sites like these; csswebsite.com, cssbeauty.com, cssheaven.com and others. These sites showcase the best in current web design trends with a focus on standards complaint HTML (hyper text markup language) and CSS (cascading style sheets) coding.

After browsing through dozens and dozens of sites I came across these; andrewbradshaw.com and cabedge.com. So to give credit where credit is due here is what we liked about these designs and the elements we incorporated into the OHD website.

Header and Navigation

Andrew Bradshaw Webdesign On Andrew Bradshaw’s site I liked the header and navigation menu, particularly how he had separated the menu with that divider. I used a similar separation to move the Contact tab above the right sidebar. This helps to highlight the contact link since having visitors contact the architectural designer is the primary goal of this website. I then hunted down the perfect background image at istockphoto.com to incorporate an organic natural look of wood.

I also used his technique of separating colors in the logo text to highlight the word design. I then did a mirror image of that technique on the other side with the phone number.

Color Schemes and Presentation

Nashville Web DesignThe Cabedge website had pretty much the layout I had originally envisioned with the narrow sidebar, the big showcase box and three columns below to highlight the main services of my client. The Andrew Bradshaw site actually uses a similar layout too. More importantly here with Cabedge was their color scheme for the main content area. They were using similar background colors to the Marvin Windows brochures I had. As soon as I saw their site I thought, “that’s it”.

I re-created their background gradient image in Photoshop using similar colors while changing up the rate of fades a bit. I used thick (not as thick) borders around images and went slightly darker there too. Font colors are similar for the content while we used the gold of the new OHD logo as the colors for headings and subheadings.

Visual Effects with Java Script

Drop Down Menus

Drop down menus for site navigation are a great usability tool but add complications in designing a site to work across multiple web browsers. Various browsers have their quirks on how they interpret CSS code. Internet Exploder (explorer) in particular has issues with handling pure HTML/CSS drop menus. So to solve that we like to use the suckerfish method. Some java code helps out IE while other browsers can function fine without it and maintains a search engine friendly navigation structure.

Slideshow Presentation

The slideshow in the big box on the home page is not flash animation. I don’t work with flash. Instead it’s actually search friendly HTML with some java script to create the effects. We used SmoothGallery 2.0 and modified the script and stylesheets a bit to place the text portion off to the side and allow it to fade in instead of slide up and down.

Portfolio Gallery

Lightbox Gallery
The individual galleries for the home design portfolio pages use the LightBox 2 script to overlay the images in a window without having to create a pop-up browser window. The way it greys out the rest of the page while viewing images allows the individual images to maintain priority when viewing them. And you can scroll through the whole set of images without having to close the window and open another. LightBox is a great script for presenting images.

Powered By WordPress

We used WordPress as a Content Management System which allows the site owner to easily edit their content and particularly so they can post information via a blog. Here the designer wanted to be able to write about developments in environmentally friendly home design and construction.

So there we have it. With the help of a logo designer, inspiration from a couple accomplished web designers, a few stock photography images, some cool java scripts created by others, and the open source WordPress software we’ve pulled it all together to create a really amazing website.

Drive Conversions with Obvious Action Boxes, Buttons, Links

Friday, March 14th, 2008

For the average small business website, particularly local businesses, your website often has only one goal, or maybe a few at most. Primarily it’s to drive visitors to initiate contact and become a sales lead. Using “Action Boxes”, buttons, even calls to action links can really help to drive your visitors to your intended site goal.

The vast majority of small business websites are not selling product or services directly online. They provide their services out in the off-line world while the website is simply a marketing vehicle. These types of websites should not just be a digital brochure that simply says “Hi, we do this. Give us a call at this number”. You need much more in order to drive those visitors to call, or send an email.

Here are some example’s from some of my clients sites;

Action Boxes & Buttons

Body Balance Massage, Springfield, MO

Body Balance Massage and Day Spa in Springfield, Missouri uses its action box at the top of the right side bar to encourage visitors to book appointments directly through the website. The action box is very visible and the orange arrow really draws attention to the link. The eye is drawn there before visitors even read the main body of the page content.

Being that they are located outside of the city the website helps to pull their customers from within the city (local search optimization helps). Also the line “We’re only 15 minutes from Springfield” lets people know its worth while to take a short trip out of the city for a day at the spa.

Autoprotectors Window Tinting and Paint Protection in Kamloops, BC, Canada

The “Start” button here on the autoprotectors.com website is extremely effective. It gets visitors searching for automotive paint protection kits for their particular vehicle. The website tends to attract more people looking for window tinting as the paint protection film (PPF) is a rather new product in the industry that not many know about or directly search for. The website is designed to showcase PPF and create more awareness of the product in their market area. Many people have told them that the first thing they want to do when landing on the site is click on the Start button.

Call to Action Links

Shuswap Lake Boat Rentals in British Columbia, Canada

Here we’re not using an action box or any buttons, perhaps during the next time we revamp the site we may, but we placed big bold “call to action” links after the first section of the home page content. We added another one at the bottom of the home page to catch those that have scrolled down that far.

Instead of simply relying on the Contact button up in the navigation menu these call to action links, that simply link to the contact page, help to drive visitors to the contact page where many end up sending an email. Initiating contact about renting a boat on Shuswap Lake is the prime directive of the website. The site is very simple, no technical web applications, but it’s quite effective.

It’s All About Driving Conversions

These techniques are actually quite simple, even obvious. As most web users are quickly scanning pages for something to click on you simply have to give them something they can find easily and click on. It’s just a matter of taking a little time during the design phase to implement them and use the type of action box or button, or call to action links that are appropriate to the design and the business.

Make them big, make them stand out, and more web visitors will click and increase the chances of the site achieving its desired goal; converting web visitors into customers.

Speaking of conversions, how do you track web conversions when your small business website does not actually sell stuff directly online? I have a future post on that one coming up.