Re-designing a Website: 5 Things to Consider

There comes a time in the life of every web site when a re-design is in order. This can be driven by a new brand image,  making better use of advancing web technologies or simply the need to provide a better organizational structure.

Needing to re-organize was the driving force behind a design shake up of Creative in Chicago, a craft and home decor blog and the outlet for my personal creative endeavors.

When I first started this blog  I opted for a quick and easy Blogger template,  simply adding a custom header and working with the template designer to add a unique background and set the blog layout.  It was fully functional but not the most appealing site in the world, but as I had no idea if it was something I was going to write on a regular basis, I didn’t want to invest a load of time in setting it up.

Creative in Chicago

As it turns out the blog now has over 200 posts with over 30K visitor a month and was in dire need of a shake up, so it underwent a redesign . For regular blogging I generally recommend using WordPress but because I did not want to spend more time than necessary, I decided to stick with Blogger.

redesign website

During the redesign process I wanted to address

    1. Look and Feel
      The overall look and feel of the blog was very bland and I wanted to punch it up a notch but still let the content of the site do most of the talking.
    2. Reorganization/Navigation
      The posts in the blog had all been categorized but I wanted to refine the categorization process and then use it as a navigational structure, making posts and topics of interest much easier to find.
    3. Readability
      To enable visitor to quickly scan new content from the home page or a category page I wanted to move from the full post to a summary post format.
    4. Advertising
      The site receives around 30K visitors a month and I wanted to explore the advertising opportunities available for generate revenue from the site.
    5. Responsive Design
      Around 20% of the traffic comes via mobile devices so it was important that I provided a site that was optimized for those visitors.

 

Look/Feel and Readability

In re-designing a site I wanted to keep some semblance of the original site so not to completely alienate my readers with something totally new and unexpected.  I kept the background patterns and type face of  “Creative in Chicago” the same but completely reworked  the header, creating a little more pop with the use of color and simple design elements and also integrated social media icons and RSS feed subscription.

I also moved away from the full post format on the home and category pages. Instead the reader is now offered a summary of each post with an thumbnail picture. It is much easier to see at a glance the content of the site.

creative in chicago blog

Reorganization/Navigation

Although I had been using  categories to define content there lacked a definite structure which I could use as navigational tool.  I reassessed and ended up with five main categories : Art – Crafts projects – Decorating – Free Stuff – Garden projects and within these categories I defined a number of sub categories. For example the category Decorating has five sub categories: Before and Afters – Painting – Decorative Accents – Wall Art Ideas- Windows .  The navigation bar was reworked to include these main blog categories, with  drop down elements for the subcategories. A search bar  was also prominently placed.  Posts that were buried deep within the blog are now much more accessible.

 

creative in chicago website navigation

Advertising

I decided to incorporate Google Adsense into the site and allotted a spot high on the sidebar for placement.  I wanted a position that would work both well for click throughs but not to be too invasive for my readers.  I am also experimenting with in-line advertising through infolink. Both are working nicely!

Responsive Design

Fortunately Blogger makes this really easy and it is as simple as selecting a pre-made template to display when anyone accesses the site with a mobile device.

How much does a website cost?

how much does a website cost

How much does a website cost?  If you are visiting this page looking for a definitive answer then I am going to disappoint because pricing a website can be a complicated process but it is a question on every potential client’s mind. The cost of a web site is a little bit like the cost of  a house, the  bigger and more complex the heftier the price tag.  So lets break things down a bit to give you an insight as to where the costs lie and walk through some client scenarios.

Lets first consider the type of company quoting your project. A design agency with a portfolio full of fortune 500 companies and a trendy studio in a skyscraper in down town Chicago is going to charge more …well.. because they have to to cover their costs. If you are large company with mega$$ they may be a good fit. An offshore, say,  Indian based web design company, may give you an unbelievably cheap quote but how comfortable are you doing business that way?

A good approach to selecting a company to quote your project is to take a good look at their portfolio and services and if their offerings match what you are after, they are worth a call. Also don’t be afraid to check out any testimonials.

Any decent web design company will lead you through a discovery process (ours is free) to understand what it is you want to accomplish with your web presence. Come prepared to talk about your marketing objectives, the type of functionality you’d like on your site ( e.g shopping cart, content management, video integration, social media, blogging capabilities etc.), who your customers are, who you competition is and what makes you unique. The more information you can provide at this stage the better, as the information  will be used to create a comprehensive proposal which will outline the best plan of action to achieve your goals and a realistic price.

Whatever the goals of the project, the cost to create it can generally be broken down into the following categories

Design

  • A captivating design to engage you site visitors
  • Home page and inner pages of the site
  • email template design
  • Imagery selection
  • Navigation design
  • Definition of branding assets e.g color palette, typefaces
  • Working from a predefined brand style guide

Programming

  • Converting your design to a form which can be understood by web browsers
  • Integrating all content
  • Building and integrating functionality e.g  shopping carts, databases
  • Integrating with a Content Management System (CMS) e.g WordPress
  • Integrating 3rd party application e.g newsletter management, Google analytics
  • Mobile version of site
  • Browser compatibility testing

Launch

  • Domain registration/configuration
  • Hosting setup
  • Email setup
  • Upload to server
  • SSL certificate
  • uploading data ( e.g for e commerce)

Marketing

  • Search engine optimization (SEO)
  • Submission to basic search engines
  • More extensive search engine, directory, portal submission e.g Targeting Local directories
  • Social media profiles e.g Facebook, LinkedIn, Twitter, Pinterest
  • Email campaigns
  • Paid Advertising Campaigns e.g Google Adwords
  • RSS subscription

Now not every project is going to require all aspects of these categories so lets take a look at a few client scenarios

Client A: Online Brochure Website

A small interior design business requires a simple online brochure type website to market their services. They would like to set up a Facebook page, an email management tool so they can send out a newsletter and a Pinterst account to pin photographs of their design work. They serve a local area and would like to rank well for anyone carrying out a local search for an interior designer- they are not interested in paid advertising although this may change depending upon the site traffic. They already have an offline brand image but require a domain name. The site will be between 10 and 12 pages in total.

Project Estimate

Design: 12 hrs
Programing: 18 hrs
Launch: 4 hrs
Marketing: 10 hrs

Total: 44 hrs = $4,400

Client B: Content Management Website

A company offering summer camps wants a web site they can manage themselves. The would like to upload photographs of camp events and allow parents to register their children – they already have an online application to allow this through a 3rd party but this need to be integrated seamlessly into the site. They would also like to be able to write a blog. They have a Facebook profile already set up but this to be linked to the site.  Most of their customers are by word of mouth but they would like a basic SEO and search engine submission.  They have a comprehensive offline style guide and already have a domain name. The site will be approximately 25 pages.

Project Estimate

Design: 24 hrs
Programming: 50 hrs
Launch: 8 hrs
Marketing: 5hrs

Total: 87 hrs = $8,700

Client C: E commerce Website

A small business want to launch an online store to sell their products. They also want the ability for their clients to sign up for an e-newsletter which will offer monthly promotions. They need assistance in selecting a provider for these email blasts and a custom template designed for the newsletter.They already have a merchant account set up and are interested in paid advertising to generate traffic. They have a logo and all copy for the website ready.

Design: 35 hrs
Programming: 70 hrs
Launch: 20 hrs
Marketing: 20 hrs

Total: 145 hrs = $14,500

As you can see the price range for a website can vary dramatically depending on what you want it do do and want to achieve.  If you would like us to quote on your next website give “The Chicago web Designer” a call at 847 607 8679, we may be a Chicago web design company but we don’t have a trendy studio in the city and don’t charge ridiculous prices!

New Web Design for Authors Web Site

Last week saw the release of a new book by one of our clients, Edward Bison. His book, Mr Bison’s Journal,  is a very funny collection of stories and observations and is a laugh out loud read. I was commissioned to not only illustrate each of the stories but also design the book cover.  It was a fun project and fingers crossed it will become one of the top humor books of 2012/2013.  It would make a great Christmas gift -see it on Amazon as a paperback and Kindle ebook

As part of the launch we updated his website www.mrbison.com moving it from a blogger powered blog, to the  all singing and dancing WordPress platform and giving the site a mini design overhaul.

The home page now features a prominent call to action to buy the book and a video clip of a sample chapter. The site navigation was revised to include such as his Facebook fan Page

mr bison website chicago

We also took the opportunity to re-code it as responsive website – I’ll fill you in on the ins and outs of that tomorrow.

Taking a St Louis Retirement Community Social

A good website is a “living” marketing tool that can evolve to accommodate different approaches to engage with it’s users.  Our long standing client, The Rockwood, a St Louis retirement community, understands this and recently asked us to revisit their site and make suggestions on how it could be improved.

The site has now been overhauled  so it performs better in the search engines and offers interactions with it’s users through social networking sites Facebook and Twitter.  We also built them a custom WordPress blog which was seamlessly integrated into the site.

 

Rockwood st louis retirement community

You can subscribe to their blog, become a Facebook Friend or Follow them on Twitter

© Chicago Web Designer

Tips for Making your blog images more search engine friendly.

If you have just started blogging, or even been blogging for a while here are a few tips that will make your images more friendly to both the search engines and your site visitors.

Before you upload: Optimize your image

  • Scale
    Scale your photographs to the exact dimensions which you wish to use them, don’t rely on your blog to re-size your  photos, they will download much faster if they are scaled pre upload.
  • File size vs quality
    Ideally your photographs need to be small in file size but in great quality, large files can take a long time to download frustrating your readers and driving them away.
  • How?
  • Most image editing software will allow you to easily optimize you images to be web ready, however if you don’t have access to anything suitable try Pic Monkey . It will allow you to crop re-size and add text and graphic overlays

Rename your images
Most camera will name photographs some like D03456, an arbitrary number that means nothing. Re-name your photographs so they encompass the following.

  1. The content of the photograph
  2. The content of your blog post
  3. A phrase that someone may search

e.g You are about to write a blog post all about how to make some rope pencil pots.

The image below is named rope_pencil_pots.jpg, which reflects the composition of the photo, the content of the blog post and could feasibly be a phase that someone would use as a search query.  Each word with an under score _, but is perfectly OK to separate with a hyphen instead (rope-pencil-pots.jpg)

 rope Pencil Pots

Why?

When search engines visit you site they are unable to “see” a  photo of a rope pencil pot, all they understand is the code (HTML) powering the site which in this case looks like this.


<img border="0" height="320" src="http://3.bp.blogspot.com/-_lBtkHUaGZQ/TxhQ30_6TJI/AAAAAAAAA78/YYvdehrboig/s320/rope_pencil_pots.jpg" width="320" />

By giving the photo a meaningful file name it essentially helps the search engines ” see” the photo.

You have uploaded your photo now what?

Add an ALT tag to your photo

What is an Alt Tag?

Alt stands for “Alternative text”  and adding an alt tag to an image further enhances the ability of the search engine to understand the content of the photo.

In the case of my rope pots my alt tag would be

alt=”rope pencil pots”

As you can see the phase I am using is the same as the name I gave the image file.

How To Add an ALT Tag

The ease in which an alt tag can be added to a photo depends on which blogging platform you are using, WordPress is much easier than Blogger.

And because this is difficult to explain in words I have made a video which covers adding an Alt tag to your images in both Blogger and WordPress (and just in case you are wondering the accent is English!)

Is it worth the effort?

And here is a little test to show you this effort does pay off. Click the link below, it is the Google image search for Rope Pencil Pots …now look at what they have listed as the first image!

Google Search for Rope Pencil Pots
And just in case you are interested in making some rope pencil pots for yourself check out a tutorial over at Creative in Chicago

©2012 Chicago Web Designer

New WordPress websites in progress

I have been working recently on a number of custom WordPress sites.

Ruth custom wordpress siteThe first is a double project for Ruth Hasser, a St Louis celebrant. Ruth wanted to move her current site over to WordPress so she could take advantage of the content management (CMS)  it offers. She also needed a new site for the funeral and memorial side of her business.

We have kept the design the same for the wedding side of her business ( she loved it so why change it) but designed a slightly different look for the funeral site, with a more muted color scheme and different imagery.

Both sites are in the final phase of production and will be launched shortly.

Humble catholic custom wordpress websiteThe second custom WordPress site is for a Chicago group, The Humble Catholic.

This site will serve as a community allowing users to upload prayer requests, affirmations and suggest stories, all driven by the excellent blogging capabilities of the WordPress platform

The site is just going through some final testing and client review.

©: 2012 Chicago Web Designer

Moving from Blogger to WordPress

I am working with long a long standing client at the moment to convert her website to be powered by the WordPress platform. Her current site is constructed of static HTML pages and a blogger powered blog but the conversion will put everything under one roof and give her much more control of not only her blog posts but the rest of her site  too.

Pros of using WordPress?

  • CMS: WordPress is a powerful content management system and gives you complete control  to update the content your website yourself instead of relying on your web designer.
  • Design: The design options in WordPress are limitless. There are plenty of free templates around but with some technical knowledge a completely custom look can be created and you are not limited to using an identical template across every page on your site
  • Pages: With a self hosted WordPress installation there is no limit to the number of pages you can have on your site, pages can be easily ordered, sorted into menus and even hidden.  The look and feel of pages can also be changed by apply a different template to the page.
  • SEO: Compared to blogger WordPress offers much better SEO ( search engine optimization) functionality. Using a plugin like ” All in one SEO”, enables each blog post to be given a search engine friendly title, description and set of keywords.  The same functionality can also be applied to pages
  • Users: You can set up administrator, editor, author and contributor accounts, which allow different users different levels of access to the site.

Cons of Using WordPress?

  • The main con of using WordPress, for a client, is the learning curve associated with the administrative dashboard. It is definitely  more complex than Blogger but we offer comprehensive training on posting, editing and uploading images/files etc.

Ready to move?

Do you have a static web site or blog that could benefit from power of the WordPress platform? We can make the transition as seamless as possible. Contact us today for a free evaluation of your site or blog/

7 ways to increase the visibility of your small business website

Here is a list of 7 things you, as a small business owner, can do TODAY, to increase the visibility of your web site. The better visibility, the better rankings in the search engines . End result more site visitors.

website visibility

  1. Start a Blog
    Google’s blogger or WordPress.com are both good candidates for the novice blogger. They are easy to setup and require no technical knowledge .  Ideally your blog should be integrated into your web site and given the same look/ feel for a seamless branded image (we can definitely help you with this).  However having a standalone blog gives you a great platform to test the blogging waters and  find your voice.  Write regular blog posts relevant to your business expertise or product offering and make sure to create linksto your web site. Here are some articles on blogging which will help you get the most out of your blog.

  2. Comment on blog posts
    Commenting on blog posts is a great way to increase the visibility of your site.  A fitting comment and a relevant  link to your site where applicable can lead to considerable traffic. Tread carefully though and do not spam.
  3. Open a Twitter account
    Twitter is a micro blogging tool, each Tweet, or post can have a maximum of 140 characters.  Spend a little time setting up your profile which can include a picture, an all important link to your web site and a short bio.  Next find some people to follow using the tools offered on the Twitter web site, then tweet away.  The more you interact the more you will get of Twitter.
  4. Create a Facebook Fan Page for your business
    To get started with Facebook you first need to create a personal account. Then visit this page https://www.facebook.com/pages/create.php
    Select a good name and populate the info section of the profile with your business information.  You are now free to start sharing your thoughts, ideas, products, links, video and anything else you think is relevant to your business via the Facebook status window. You will need to build up your fan base so include a Facebook “like button” wherever you can e.g In your email signature, on your blog, on your web site.
  5. Get listed on YELP
    Yelp is a local directory allowing users to search for all sorts of  services, everything from hair dressers to website designers.  Once you are a member (free) you can post reviews on any listing.
    See our listing on Yelp
  6. Upload a video to YouTube
    YouTube is the world’s 2nd most popular search engine ( Google is the 1st) so it stands to reason a presence there is worth the time and effort.  Creating your free account is easy and uploading a video a breeze.
    See our videos on YouTube How to select a great Domain Name and How to add video to your Internet Marketing Mix
  7. Pin something on Pinterest
    If you have visually appealing images on your website particularly if they relate to your products or services e.g You are a landscaper and have a portfolio of completed landscape projects, Pinterest is a great place to share them. Pinterest is one of the newest and fastest growing social media platforms. It is a virtual pin board allowing you to organize and share all the fabulous images you find on the web.  Boards and images can be  shared and repined .
    Check out our profile on Pinterest

Growing your blog audience

So back in March I casually announced I had started a new blog “Creative in Chicago” which follows my decorating adventures as I turn my ever so brown 1970’s Chicago house, into a light airy home. While this blog has nothing what so ever to do with my web design business  it’s very rewarding to see the practices  I preach to all my blogging clients actually working.

how to grow your blog readers

So what is it I preach?

Post Regularly
For a new blog I recommend posting everyday if possible and a minimum of 3 times a week.

Have meaningful well thought out keyword rich post titles
Search engines will like this

Offer different ways to subscribe to your blog
Everyone likes to read blogs in a different way so the more ways you can provide your content  the better. Signing up with a web feed management like Feedburner offers your readers great options and can also be configured to offer email subscriptions.

Allow comments
Comments can be configured so they are moderated and given the thumbs up before being published to your site. Write blog posts which  encourage dialogue between you and your readers and be sure to answer any questions they pose. It can also be useful to visit your commenter’s blogs and leave a message thanking them for visiting.

Write Comments
Commenting on other relevant blogs is a great way to promote your blog but be careful that your comments do not come across as spam.

Take part in other bloggers “parties”
Link parties are very popular with certain blogger groups, particularly those who write about something that can be photographed, think home decorator,  crafter’s, artists,  gardeners, cooks.

The host of a link party will offer the opportunity to promote a post from your site , quite often for nothing in return. The parties run for a predetermined time and generally result in a very high quality selection of projects as the host has complete control over what appears and any spam is weeded out.

Link parties really deserve a complete blog post and I will write that another day!

Promote
Take every opportunity to promote and link to your  blog. Include it in your social media profiles, participate in forums, tweet about it, start a Facebook fan page.

All of this takes time and effort but really does pay off. My Creative in Chicago blog has gone from zero to nearly 7000 visits per month in just four short months.

blog stats

©:2011 Chicago web designer