Things have been fairly quiet here on the blog recently – but it hasn’t been for lack of writing!

This last month, I’ve been asked to participate in several interviews (including a yet to be published group interview). If you’ve always wanted to know more about the face behind iDesign Studios, you’ve come to the right place!

Below is a bit of a sneak peek into more in-depth interviews at Michaelbox and The Geek Talk that answer a few questions about who I am, what I do, some of my favorite practices in web design and freelancing, as well as a few off-the-wall questions…

Anyone up for a game of Rock / Paper / Scissors? LOL

Michaelbox

By Michael Beckwith – May 12, 2010
read the full interview

• Who are you and what do you do?
• What is one thing that you would love to see avail­able in a default word­press install, that isn’t presently there?
• Where were you on the night of Feb­ru­ary 30th, 2002? Don’t try to lie your way out of this one, we have leads say­ing you were frat­er­niz­ing, with Curlz MT Font!
• You are also a twit­ter­holic, along with Grace Smith, but attended last week’s meet­ing only after a heavy amount of arm twist­ing. Who are some peo­ple that you think every­one should follow?
• You are stranded on a desert island and find a bot­tle and blank piece of parch­ment to be used for a res­cue mes­sage. What font would you use for the message?
• What are a cou­ple things you miss about any 9–5 cubi­cle life that you’ve expe­ri­enced? It would be hard to argue that there are no ben­e­fits to that career path over a free­lanc­ing path.
• When birds stand on power lines and don’t get hurt, it’s most likely because of…
• Do you have any per­sonal quotes that you’d like to share with the internet?
• What CSS3/HTML5 ele­ments have you wig­gling in your chair the most?
• Can you recall any client moments that really made you go *facepalm*?
• If you were an LOL­Cat, what would be your caption?
• Favorite Inter­net Meme?
• If you could visit any art age in the past, which would you choose and for how long?
• It’s the show­down to end all show­downs, the bat­tle of epic pro­por­tions! It’s brought king­doms down to their knees and made once-brave war­riors trem­ble in fear! It’s Pirates vs Nin­jas duel­ing to the death in Rock/Paper/Scissors. Which side are you on and which hand do you throw?
• Any clos­ing com­ments or thoughts?

The Geek Talk

By The Geek Talk – May 19, 2010
read the full interview

• Do you have a personal Brand?
• How do you find design inspiration and colours for a new project?
• What does your typical day look like?
• What do you do in your free time?
• Current favorite apps?
• What OS do you prefer?
• Small picture for your Workplace?
• Favorite: Color, Font, Language, JS Framework?
• Name something that has inspired you recently?
• What do you prefer (and why)? Freelance work or full time employment?
• What are your personnel projects and goals for 2010?

Looking for More?

I’ve been very fortunate to have been asked to write guest posts for several blogs and participate in other interviews over the last few years. If you’re curious, you can view those guest posts and interviews, read my biography, or even find out how to pronounce my name. Yes, I get just about every pronunciation imaginable – except the correct one, of course!

Saying Thanks!

It goes without saying that I’d like to thank Michaelbox and The Geek Talk for taking the time to include me in their interview series! I hope you’ll have a look at the posts to find out more about me, and the other great designers these sites have featured, as well!

I’m happy to officially announce the re-design of iDesign Studios!

The new site has actually been in the works for a few months now, and is finally ready to make it’s debut. In truth, I unofficially launched the site on March 29th, but it’s taken a few extra days to get the time to put together the announcement post.

So, What’s New?

I had three main goals in mind with the updated site.

• updated content
• better readability
• a clean and minimalist design

As “They” Say, Content Is King

First and foremost, my primary goal for the new site was to update the content. Most of the text on the old site was very outdated – more than a couple years old – and no longer reflected my current service offerings and method of working on projects.

For example, when I first wrote the Typical Milestones and Turnaround Times page in the FAQ section, the majority of the web sites that I built were static HTML sites. Now that my primary focus is on designing and developing custom WordPress themes, the process is considerably different. The new FAQ / Process / Milestones section of the site now provide much more accurate infomation, as does the Services section.

I’ve also updated the Portfolio, to include a better overview of each project, as well as giving options to narrow down the work displayed by category – for example WordPress vs Static or Full Design/Development vs Design Only vs Development Only.

Two for One

I have always been a fan of using a dark background for portfolio sites – I find it helps showcase the individual portfolio pieces quite nicely. However, with this comes the issue that light text on a dark background is difficult for some people to read.

The previous site featured an almost black, patterned background with light grey text, along with brightly colored headlines and links. While most people seemed to like the design, I would occasionally get comments that it was just NOT easy to read.

As a designer, it’s an issue I’m well aware of, but decided to take a calculated risk, since this is my own site. I don’t always have the freedom to design a light on dark site for clients, so I’ll usually take liberties with my own site that I typically can’t for a client.

As you can see, the primary design for this site is also a light on dark design, however this time, with a dark grey vs black, as well as a subtle noise vs larger pattern in the background, I do believe this new version is more readable and easier on the eyes than the previous one.

With that being said, I know there are still a lot of people who just want to see traditional dark text on a light background. I certainly want to accommodate as many readers and potential clients as possible, so I’ve used a theme switcher plugin to give users the option to toggle between two versions of the site.

Feel free to give it a try, and let me know which version you like best! The main theme switcher link is on the upper left corner of the page, or you can just click the links below:

• View the Dark Version of the site
• View the Light Version of the site

Personally, I much prefer the dark version of the site, but that’s just my own preference. With two options, visitors to the site can use whichever version they like best.

Clean and Simple

I have also always been a big believer in the “less is more” theory of design – so I wanted to go for a very minimal look on this version of the site.

Some might say it’s too minimalistic – and I’d be lying if I didn’t say that I sometimes feel that way about it myself. But the funny thing is that the more I attempt to add into the site, the more I end up taking it right back out. There’s something not allowing me to add too much – even in the form of color.

I had a GREAT set of eyes take a sneak peek of the site last week. You know who you are if you’re reading, and I have to say again, Thank You!

They gave me very honest feedback about the site – both positive and negative critiques. I’ve since made a few additional tweaks based on the recommendations. But one thing I haven’t been able to do is add more color (the most frequently received suggestion). A suggestion that I actually agree with, but… I can’t explain it – there is some force at work not letting me follow through, LOL.

Of course that deserves a bit of an explanation! My thinking on the site is that I want a very clean, simple and minimal design. Something that will showcase my work the best way possible. Pages like the portfolio and blog section are full of images (either screenshots in the portfolio, or photos here in the blog) – those in and of themselves serve as the pop of color, in particular in the portfolio. I find that if I add more color, on the portfolio in particular, it pulls away from the work which is what should shine through the most. It’s the content pages on the main portion of the web site that are most evident in the lack of color – something that I may or may not eventually change.

Maybe it’s because of the overly bright colors on the last site making me want to completely steer clear on this site. Who knows, maybe I’m just one of those quirky artists, LOL.

Still a Work in Progress

Now, that’s not to say that this is the end! I’m constantly making slight tweaks and updates to the site. Most are minor and things you mightn’t even notice. Other things are more obvious – for example, I’ll be gradually updating the photos on all of the blog posts to match the new wider content area.

I’ve already updated the two most popular posts on the blog with new photos to fit the new design, and will be updating the rest as time permits.

• How To Use WordPress as a Truly Customizable CMS
• 6 Phases of the Web Site Design and Development Process

And who knows, I might still add that pop of color to the headings or links… only time will tell!

What I’ve Learned In The Process

So, have I learned anything in this process? YES! I’ve learned – well, not learned, but reinforced the fact – that a web designer is their own worst client. At least, I can positively attest to the fact that I am indeed my own worst nightmare client! You know… the guy who “doesn’t know what I want, but I’ll know when I see it” client? Yeah, that’s me! LOL

I’ve also learned that you need to come to a point when enough is enough, and it’s time to let go. I tinkered with the design for quite some time, finding it difficult to decide when it was actually finished. I have a magnet up on my whiteboard that reads:

Perfection is the enemy of “good enough”

At some point, you have to come to the realization that it is, indeed, “good enough”

A Trip Down Memory Lane

So, at the risk of completely embarrassing myself, I thought it’d be fun to share all the old version of my web site. I had been under the impression that this was version 10 of my site, but I just realized today that I’m actually on version 15! Another surprise is that I was also sure that I got my start designing web sites in 1994, but the earliest site I could find was from 1996. I think that is the first one, but I’m not 100% positive (way too long ago, LOL).

At any rate, I dug through a ton of old CD archives, and with the help of the Wayback Machine, I was able to track down most of my previous web sites. This is a combination of both business and personal sites – some of which I had at the same time (I only recently merged my personal and business web sites within the last few years).

Oh, and please don’t judge me for the early designs… especially the ones in the 90′s. Clearly I have improved my skills considerably! And if I’ve come this far, I can’t wait to see what the future holds!

So, without further ado, I give you most of my old web sites… just promise not to laugh!

---

v1 circa 1996 (or 1994?)

There is no explanation for this. Please don’t judge me, LOL. All I can say is that this was probably my first ever web site done in 1996 and hosted in the GeoCities Paris neighborhood.

As for the design style… again, it was the mid 90′s. #thatisall

---

v2-4 circa 1996-1998

These 3 versions are MIA. They are most likely on old floppy discs somewhere (in a landfill?) that I wouldn’t be able to open even if I did find them. RIP

---

v5 circa 1998

There are no words for this, except that it was still the 90′s.  How it won an award that I proudly displayed, I don’t know, but this was, after all 1998.

---

v6 circa 1999

This one left me speechless, too. I actually think it’s worse than the last one! Really, I wish I remember my thinking for the big blank space on the left side. If I remember correctly, there were sounds on rollover too. Fancy!

---

v7 circa 2000

Welcome to a new century! This one I actually liked (neat rollover on the illustration). As you can tell, I like the color grey!

---

v8a circa 2001

This was the first version of the business site – one that I liked quite a bit! I was indecisive so had both a “cool” and “hot” version.

---

v8b circa 2001

Secondary option to
the site above.

---

v9 circa 2002

Flash version of my personal portfolio site, another one that I loved at the time.

---

v10 circa 2002

This one started as my personal portfolio site, and was later redesigned for the business site. Back to shades of grey on this one – I’m noticing a trend!

---

v11 circa 2002

This was a much more in-depth business site. I felt the need to give it a more clean/white corporate look than what I typically did with my personal sites.

---

v12 circa 2007

An attempt at improving upon the previous corporate-y looking site. I liked it at the time… not so much now, LOL.

---

v13 circa 2007

This was my short-lived anonymous alter-ego, WAH(web)Mommy. My first WordPress theme where I was able to plan taking the freelance plunge.

---

v14 circa 2008

The last version of the site, which I first used on my personal site before using on the business site, as well.

---

v15 circa 2010

And here we are at the latest version of the site! Two versions again, but this time not because I was indecisive, but because I wanted to give a second option for people who have difficulty reading light text on a dark background.

The dark version, for the record, is my favorite of the two.

---

v15 circa 2010

Alternate version of the current site, for the purpose of better readability for some users.

---

So, What Do You Think?

Now that I’ve given you a good laugh with my early site designs, I’d love to hear what you think of the new design? And more importantly… do you prefer the Dark theme or the Light one?

I hope you’ll share your thoughts in the comments below!

Thanks for taking a look, and I hope you enjoy the new site!

---

As my occasional guest posting continues, this week I was asked by Char Polanosky to participate in a regular series over at Essential Keystrokes, featuring web professionals and the Essential Tools that they use on a regular basis to run their business.

This is a long time series – first started in 2006 – and features the likes of Randa Clay, Chris Garrett, Lisa Sabin-Wilson, Deb Ng, Wendy Piersall, Liz Strauss and more. I’m definitely honored to be in such great company!

Essential Tools of Web Design Pro Selene Bowlby

Here’s a brief introduction to the post below:
read the full article here

As part of the Essential Tools series, we are featuring the ultra talented web designer, Selene Bowlby of iDesign Studios this week. Selene’s name regularly appears on lists of the top female web designers in a variety of categories and her educational articles, like 15 Key Elements All Top Web Sites Should Have, are always “must reads”.

So, in her own words, these are Selene’s absolute essential tools for online success…

I hope you’ll head on over to Essential Keystrokes to read the post, and find out which 8 sets of tools I consider to be the most essential to running my business!

Just a very quick note to ask you to please pardon the dust on the web site and blog – especially if you are subscribed to the feed!

The last few weeks have found me hard at work moving the site to a new web hosting company, Blue Host (which happens to be the #1 recommended web host by WordPress).

Making The Most of My Time

Having the freedom of a private server address that worked separately from the live site, this served as the perfect opportunity to make several upgrades to the site itself – both in terms of the WordPress theme, as well as some of the content.

Nameserver Changes Can Be Quick… Who Knew?

I know that my traffic tends to be the lowest over the weekend, so I took the opportunity to initiate the DNS / Nameserver change late Friday afternoon, thinking it would take the typical 24-72 hours for propagation. Who knew that the nameservers would transfer in less than three hours, though, and cause havoc with Feedburner!

Fine-Tuning In Progress

If you’re subscribed, either via Email or RSS, you’ll no doubt be seeing what appears to be a ton of new posts (either old blog posts, or new portfolio pieces and client testimonials). I’m still working out the logistics of excluding a few categories from the feed, and didn’t expect that previously published posts would resurface as new again.

Needless to say, I’ll be spending some quality time with my site over the weekend. I hope to have everything straightened out by Monday!

Thanks for bearing with me.

Sincerely,
The Management

Today’s post started out as a short one, to thank the Geek Girls Network for asking me to participate in their interview series. But I soon realized that I’ve been interviewed several times in the last year, and wanted to share those with you, as well.

Most of the interviews focus on my experiences as a web designer, business owner, and as someone who has recently taken the freelance plunge.

I’m honored to have been asked to interview by so many great bloggers – they all ask some very interesting questions, which give you a bit of an insight as to what makes this “geek girl” tick…

Geek Girls Network

By Kristin Riley – June 26, 2009
read the full interview

• When did you first become interested in Web Site Design?
• What has been your favorite/most memorable project that you have worked on?
• When did you decide and what factors were involved in making your decision to start your own business?
• Do you feel there are any pressures in this industry because you are a woman?
• What tools/skills have you acquired that you feel are vital to your success in this field?
• What has been your worst web design experience?
• What message would you give to geek girls just starting out in the web design industry?

Phire Design

By AJ Troxell – March 19, 2009
read the full interview

• How did you first get involved in graphic design, or what was your first experience w/ it?
• When did you know that this is what you wanted to do for the rest of your life?
• Did you always plan on doing design as well as development, or did it just factor in over time once you realized there was a need for people or companies to get those two things in one place?
• Why did you make the decision to go freelance? What was in it for you that you wanted to have?
• What thing in what you do, brings you the most satisfaction?
• What would you say makes you and your company different, or sets you apart from the rest?
• Who or what would you give credit to for helping you become the designer that you are, if you had to say?
• What’s your favorite part of design itself? Logos, type, color theory, etc.?
• Is there anything else you’d like to share with us about design or web development or your company, or any advice you’d like to give to anyone looking to go freelance?

BPease Design

By Bob Pease – January 16, 2009
Read the full interview

• What brought you to the wonderful world of web design?
• What was the first site you designed?
• How do you break designer’s block?
• How does the ‘real world’ inspire your web creations?
• You are very active in the design community, which social media site has been the best tool for you?
• Who do you admire most in the design community?
• What apps do you use when designing a site?
• What is your favorite platform/language to develop with?
• A question I see floating around all the time – Music while you work, is it good or bad?
• If you had to give up design, what you choose for a career?

SparkPlugging

By Wendy Piersall – July 3, 2008
Read the full interview

• Selene, you have been hanging around my site now for around 9 months or so, and I’ve watched you grow from anonymous blogger – WAH(Web)Mommy – to ‘freelance moonlighter’ blogger, and now to full time work at home freelancer. I know you sometimes struggled with some decisions along the way, too. How long have you wanted to run your own business from home, and what were the reasons why you wanted to do so?
• When you finally made the decision to work for yourself, what was your plan of action to transition from employee to self-employed? Did you create milestones for yourself, and if you did what were they?
• What were some of the ’surprises’ along the way? Did anything pop up in this process that you weren’t anticipating?
• Did you have your husband’s support during the transition? How did that influence the process?
• What role did blogging and social media play in reaching your goal?
• What resources did you use to research, gather information, and prepare yourself for running your own business?
• Now that you are truly “free”, what advice would you give to other people looking to make the jump into full time freelancing?

Where It All Began

While the interviews above pose some great questions, you might still be wondering more about my background and upbringing. If so, feel free to check out my short biography, or if you’re brave enough, the incredibly long-winded version… your choice, LOL.

Back To Our (IR)Regularly Scheduled Programming

I realize that much of my recent writing activity has been focused on other blogs more than my own, but don’t worry – we’ll be back to our irregularly scheduled design, development, business, marketing and work-life balance posts next week!

As I focus more and more on designing and developing custom WordPress themes for clients, I’ve realized that there is a core set of plugins that I regularly setup with every new site.

My latest guest post on Freelance Folder details some of the basic and essential first steps…

10 Essential Plugins Every Modern WordPress Site Should Have

Here’s a brief introduction to the post below:
read the full article here

One of the many benefits to WordPress, one of the most popular blogging platform and Content Management System (CMS), is that it is open source software with a very large and dedicated community. There are so many great developers working to make WordPress the best that it can be, that there are thousands of free plugins available to enhance the platform’s default functionality.

There are, of course, too many plugins to list here, so in this article we’re just going to point out the essentials… what I consider to be the bare minimum “can’t live without” list of plugins that should be installed with just about any new WordPress installation.

If you are new to WordPress, this basic list (which is technically not limited to plugins alone) should help get you started on the right foot. Whether you are running a basic brochure site, or a full featured blog, you should be sure your WordPress site includes these essentials.

I hope you’ll head over to Freelance Folder to read the full post – this post is great for anyone just starting out with WordPress (as well as anyone who wants a refresher on some of the basics!)

More Guest Posts

This is my fourth guest post for Freelance Folder, hopefully with more in the near future! If you are interested in reading them all, you can view my author page below…

• Selene M. Bowlby’s Author Archive on Freelance Folder

As I work on achieving my small business goals for the month, I’ve just finished my latest guest post on Freelance Folder…

15 Incredible WordPress Theme Customizations

Here’s a brief introduction to the post below:
read the full article here

Given the quality of WordPress, it’s no surprise that it’s become the platform of choice for many web professionals.

Due to its incredible popularity, though, the majority of WordPress sites look very similar. It can be hard to find a site without the same-old header, footer, and sidebar that is seen on the majority of themes.

But those sites do exist. If you look hard enough, you can find the incredibly talented designers that take WordPress to an entirely different level. By combining an eye for design, technical know-how, and a sense of “outside-of-the-box” thinking, these designers create customizations that make you wonder how you lived without WordPress as your CMS.

Check out the sites below for 15 of these impressive theme customizations, and see what can happen when you take the standard function of WordPress and step it up a notch.

I hope you’ll head over to Freelance Folder to read the full post – there’s a lot of WordPress inspiration and eye candy in the article that you might enjoy!

More Guest Posts

This is my third guest post for Freelance Folder, hopefully with more in the near future! If you are interested in reading them all…

• 15 Key Elements All Top Web Sites Should Have
• 10 SEO Techniques All Top Web Sites Should Have
• 15 Incredible WordPress Theme Customizations

Image Credit: Nikolay Bachiyski

Freelance Folder recently posted an open thread asking the question “How Do You Stay Sharp?” The post has some great discussion in the comments section, where many people said that it’s through web sites and blogs that they are able to keep up to date on developments in their particular fields.

Web Design / Development Blogs You Should Be Reading

I myself have a set of design and development related blogs that I read… whether for the latest xhtml/css and WordPress tricks, for design inspiration, etc.

I asked my designer friends on Twitter which sites they thought were the best design blogs to read. You know, the old question “if you were stuck on a desert island and could only have one…” LOL

Without a doubt, the number one answer was Smashing Magazine – for good reason! But there were many others, as well. So for all of the web designers and developers out there, below are 17 essential design blogs you should be reading!

• A List Apart
• Creattica Daily
• CSS Tricks
• David Airey
• Design Mag
• DevSnippets
• Dzineblog
• Function
• Net Tuts
• Noupe
• PSD Tuts
• Script & Style
• Six Revisions
• Smashing Magazine
• Vandelay Design
• Vector Tuts
• Web Designer Wall

More Design Blogs You May or May Not Know About
aka Some Twitter Friend Link Love

The blogs above are great and very popular, but we all know there are a LOT more than this. There are a ton of great blogs out there, many of which you might never have heard of. Or if you have, they don’t quite get the publicity they deserve.

I’m eternally grateful to my Twitter friends – we’re a great bunch helping each other out with questions, retweets, Diggs, Floats, you name it… Twitter has a fantastic community feel to it. I’ve received a ton of support and link love and I want to return the favor…

So without further ado, here is a bit of a Twitter link love of my own – 46 design / development blogs of some great Twitter friends!

• Anidan Design | @josieg182
• Arbenting | @angbowen
• Athena Emily | @athenaemily
• Bitt Box | @bittbox
• Blog Design Blog | @blogdesignblog
• Boxed CSS | @boxedcss
• Brian Yerkes | @brianyerkes
• Colorburned | @colorburned
• Crazy Leaf Design Blog | @crazyleaf
• CSS Tricks | @chriscoyier
• Design Cubicle | @behoff
• Design For Users | @KrisColvin
• Design O’ Blog | @nebrow
• Design Shard | @designshard
• Designer Daily | @mirkohumbert
• Doug Cloud | @dcloud
• Ebb and Flo | @Jacen_Xhan
• Elite by Design | @EliteByDesign
• Essential Keystrokes | @charpolanosky
• Gabe Diaz | @gabediaz
• Fudge Graphics | @fudgegraphics
• Fuel Your Creativity | @adellecharles
• I Am Mike Smith | @blogdesigner
• iDesign Studios | @idesignstudios that’s me!
• Im Just Creative | @imjustcreative
• Joshua Clanton | @joshuacc
• Just Creative Design | @justcreative
• Keylime Creative | @keylimecreative
• Komodo Media | @rogieking
• Lee Munroe | @leemunroe
• Mayhem Studios | @mayhemstudios
• Naldz Graphics | @naldzgraphics
• Organized Chaos | @arronlock
• Penflare | @penflare
• Phire Design | @phiredesign
• Pro Blog Design | @problogdesign
• Productive Dreams | @gopalraju
• R27 Creative Lab | @r27
• Sean Neill | @seaneill
• Sharebrain | @sharebrain
• Spyre Mag | @jophillips
• Styl.eti.me | @styletime
• Tanya Nichols | @cre8tn
• Think Design Blog | @thinkdesign
• Union Room | @unionroom
• Web Design Fanboy | @webdesignfanboy
• WPMU Tutorials | @andrea_r
• 99 Graphic Designs | @99graphicdesign

To all of the people above, I say Thank You!

What’s In Your Feed Reader?

If you could only read 1 design related blog, what would it be?
Please share your inspiration in the comments below!

More Essential Feeds

• 25 Essential Feeds for Small Business Bloggers

Continuing on the theme of guest blogging, my second article on Freelance Folder has just been published…

10 SEO Techniques All Top Web Sites Should Use

Here’s a brief introduction to the post below:
read the full article here

We recently discussed the 15 Key Elements All Top Web Sites Should Have. This post focused on elements relating to design, content and development. This time, we’ll move onto the important issue of Search Engine Optimization (SEO).

SEO is such a hot topic these days. How do you get your web site within the first page or two of the search engines? How do you increase your Google page rank?

There are companies who dedicate themselves full time to doing SEO at a pretty penny. Something a lot of people can’t necessarily afford to pay for or spend the time on.

However, there are some simple things you can do when building your site that will help increase your chances of having good results. In no particular order, below are 10 of these items…

The Inside Story

A bit of a secret for my readers (and Twitter followers) is that both of these posts originated as one obscenely long article. There was enough of a break in the overall topic to split it into two entirely separate articles.

So, I hope you’ll head over to Freelance Folder to read the full post and share your thoughts!

The Power of Social Media

I was incredibly overwhelmed with the great success of the last post – it actually hit the front page of Digg! Something I have never experienced, nor would have expected – so far it has received well over 1,500 diggs!

I think my Twitter friends played a very large part in this, so if you’re reading – Thank You for your incredible support! And if you want to try for it again, I’d be incredibly greatful

Image credit: Unhindered by Talent

There’s a current trend in the blogging world of guest posting and contributing articles to other blogs. As of today, I am very happy to announce that I’ve just dipped my toe into this trend!

I was recently approached by Freelance Folder about contributing design related articles to their blog. I’ve been a big fan of the site, especially in reaching my goal of taking the freelance plunge a few months ago – so it was an honor to say the least.

As Freelance Folder debuts it’s new design today, I am making my debut as a guest writer, too! If all goes well, this could become a regular thing, with a second post already in the works.

15 Key Elements All Top Web Sites Should Have

Here’s a brief introduction to the post below:
read the full article here

There are a lot of details to consider when designing and developing a web site. In reality, it can seem like an endless list — but if you look carefully you’ll see that there are certain elements that are more important than others, elements that are used consistently among the most successful sites.

Once you’ve completed the Planning Stage of your website, the rest of the elements fall into broad categories ranging from User Interface Design to Content Creation to actual Development. Of course, there are also the issues surrounding Search Engine Optimization (SEO) — but we’ll save that for another day…

With that in mind, here are the 15 elements that should always be included on any top web site.

So What Are You Waiting For?

I hope you’ll head on over to Freelance Folder to read the full article and share your comments. While you’re there, you’re in for a treat with the new design and great new features, including all new forums!

Of course, if you like what you see, I hope you’ll also share the love…  (aka shameless request for some social bookmarks etc.) Thanks in advance!

Welcome Freelance Folder Readers!

If you are here because of the post on Freelance Folder – Welcome!

Thank you for reading the article and coming to check out my own web site and blog. Below are some of the more popular articles that I’ve written that you might find of interest!

Web Design / Development

• How To Use WordPress as a CMS
• 6 Phases of the Web Development Process
• Essential Web Developer Tools
• Save the Developers Upgrade Your Browser

Small Business / Freelancing / Marketing

• Get Clients Now! 28 Day Marketing Program
• 20+ Essential Feeds for Small Business
• What’s Your Small Business?
• Let’s Get Social! (And Some Link Love)

Work/Life Balance

• Taking the Freelance Plunge… I Am FREE!
• Lessons from Paradise in the USVI

If you’re curious to just who is behind this blog, you can learn more about me here or through the links on the sidebar. I hope you’ll also check out my web design portfolio.

Thanks again for stopping by – I hope to see you again soon! And if you like what you see, please subscribe to the feed for updates!

Image credit: Gaetan Lee

When getting ready to design and develop any web site – whether for a client or for myself – there are a few sets of resources that I find myself going back to EVERY single time.

Of course I save all the great resources I come across on Delicious, however only a select handful get an “essential” tag for quick reference.

I’m here to share with you a few of the sites that I consider to be “must have’s” in any web developer’s toolbox – and find out which resources you find absolutely necessary, as well!

Screen Resolution / Browser Size

When beginning the actual design stage, you should already have in mind a good idea of your web site’s target audience… are they a high tech group likely to have the latest computer equipment or are they a less computer savy bunch, who is running on an older computer with a small screen size?

Knowing how technical your audience is will help give you an idea of just how big you can make your site design.

A techie audience will likely have monitors boasting at least 1280×960 pixels and up. A less technical audience is going to have a smaller resolution, however, and it’s important not to leave these folks out!

Enter the W3C Schools statistics – particularly those of web browser displays. They don’t keep a complete list of stats, however they do focus on the lowest case denominator, which is the important group when determining how large your site design should be.

• W3 Schools – Browser Display Statistics

Until recently, I’ve played it safe by designing web sites with the 800×600 resolution market in mind. I just didn’t want to risk turning off that audience with horizontal scrolling. As individuals and companies upgrade their computers, however, the number of people still using such a small screen size has dropped dramatically – currently only about 8% still use this size.

The average user – 48% – is currently using a screen size of 1024×760 pixels. In most cases, unless you have a very specific (tech vs non-tech) audience, this is who you should be designing for.

I’ve found a fantastic set of tools at BrowserSize.com – two services being “Size My Browser” and “What’s My Browser Size”

• Browser Size

“Set My Browser Size” gives you 6 pre-defined resolution sizes, as well as the option to type in a custom set of dimensions. Hit submit and it’ll automatically resize your web browser to the specific pixel dimensions, giving you an exact vision of how your web site will look on the various screen sizes. They even let you resize to 640×480. I’m glad those days are a thing of the past!

“What’s My Browser Size” will tell you both your browser and full screen dimensions and color depth, as well as do a plugin check to let you know which popular plugins are (or aren’t) installed on your browser.

Both great tools, but I find myself frequenting “Set My Browser Size” quite frequently when developing a new site.

XHTML / CSS Validation

In today’s world, web sites need to be developed with valid, standards compliant code. A well coded site will function better, look better among various web browsers and often times do better in the search engines, too.

The World Wide Web Consortium (W3C) is the organization that determines current web guidelines and standards. With this they have provided two invaluable tools that EVERY web developer should utilize.

• The W3C Markup Validation Service
• The W3C CSS Validation Service

These tools for (X)HTML and CSS allow you to validate your code by providing a URL, uploading your file, or simply copying/pasting your code into a textbox.

The result? You’ll either get a green light – the A-OK that your site is coded to valid web standards. Or the red light saying your code is a bit off…

What’s great about the validation tools is that they will outline for you exactly what is wrong. Ok, it doesn’t necessarily tell you how to fix it, but it’ll tell you exactly which part of the code is wrong, as well as what line the error can be found on, etc.

It’s trial and error on your part here to fix the code, but you can keep re-validating until it’s perfect.

Web Browsers

Once your code is validated, it’s time to check for cross-browser compatibility. Technically you should be checking this throughout the entire web development process to be sure there are no big surprises in store for you.

But knowing your code has validated will give you the best chance of your site displaying properly among the latest web browser versions that support web standards.

You can keep up to date on the current browser trends with another set of statistics from W3 Schools.

• W3 Schools – Browser Statistics

This will help show you which web browsers (and browser versions) you need to keep in mind when testing your site. I personally keep checking back to see when Internet Explorer 6 will finally be out of the mix! It seems we’ve got a bit of a wait on that one, though…

Another great tool is the Browser Shots web site. While it’s best to have at least the most recent web browser version installed on your computer for testing, there are times when you can’t have multiple installs on a single computer (say IE6 and IE7). And if you don’t have a second computer running the older browser, or a virtual machine, etc. you’re kind of stuck. Not to mention PC vs Mac, etc.

• Browser Shots

With Browser Shots, you enter your URL and select from a LARGE number of web browsers, browser versions, and platforms. You can even select the screen resolution, color depth, as well as other features you do (or don’t) want taken into consideration.

Hit submit, then you can leave and come back to screenshots of your site as displayed in a wide range of browsers/versions across several platforms (currently Linux, Windows, Mac and BSD).

Easy Transparent PNG’s for IE6… YES, I said IE6

Don’t get me started on all the pit-falls of Internet Explorer 6 (though you can read more about the issues surrounding it here). However, one of the biggest problems web developers face when creating a web site is IE6′s inability to properly render transparent PNG’s. There are some options…

• keep your transparent PNG’s and say to heck with IE6
• miss out on great design options just to cater to IE6
• develop two separate versions – one for IE6 and one for the rest of the world
• search for tutorials and hacks that may or may not work well, and may not be standards compliant

For the longest time I decided to forgo transparent PNG’s – it just wasn’t worth the headache. Then I discovered the Save the Developer’s campaign, which focuses on trying to get people to upgrade from IE6.

I decided to promote the cause on this blog, and went ahead with my transparent PNG’s without worrying about an IE6 fix. What I did instead was install the Save the Developers javascript code, which places a little notification box that only IE6 users can see, urging them to upgrade.

Not the best solution, since as of August 2008 25% of web users are STILL using this outdated web browser. But, maybe it helped a few people to upgrade. I’m thinking the Save the Developer campaign is doing at least a little bit of good, because 6 months ago, the percentage of IE6 users was 30% – slow, but still improvement!

Then came the wonderful day when I was introduced to a little code snippit from Google:

• ie7-js – Google Code

It’s just three little lines of code, but all I can say is WOW! I implemented this on the main iDesign Studios web site, as well as a few recent client sites, and I must say that the script works like a charm! The next step is to setup the script on this blog as well…

Just make sure that all of your transparent png’s end with “-trans.png” in the filename and you’re set. You’ll also need to keep in mind that it doesn’t work with repeating/tiled background images, or with background image positioning.

But this bit of code makes life MUCH easier – and prettier – too.

What’s in YOUR Toolbox?

These are all tools that I refer to on just about every site that I develop… what about you? If you could only use one (or two) web references when developing a new site, which one would it be?

My MUST have’s are without a doubt the W3C’s XHTML / CSS Validation tools.

What’s on your essential list? Please share in the comments below!

I love WordPress… ok scratch that… I ADORE WordPress! I have used it for several of my own personal blogs, as well as to develop blogs and web sites for clients.

However the more I use it – especially for my own projects where I have full creative reign – I am constantly amazed by just how much it is capable of.

Not Just For Blogging – A Live Case Study

WordPress is incredibly versatile, in that although it is primarily known as a blogging platform, it can be used to run a non-blog web site as well.

I had been intrigued by the varied uses of WordPress, and knew that it was time to upgrade my own business web site to use the platform. Web designers / developers are often most critical of their own work and I was very specific as to how I wanted my own site to function.

I’ve finally given WordPress’ capabilities a full and through test by converting my own site from static HTML to WordPress.

This Is What They Call “WordPress as a CMS”

It is WordPress’ administrative area that turns it into a CMS or Content Management System. The WordPress admin area provides a WYSIWYG (What You See Is What You Get) editor – similar to a mini-version of Microsoft Word.

This allows virtually anyone to add and edit content themselves – all through their web browser – and without knowledge of HTML.

Of course, for more advanced users, there is a “code view” option where you can edit HTML code in a page, post or article, but it is not necessary for creating simple content.

Initial Settings – Permalinks and Comments

The WordPress installation process is a fairly simple one, assuming you have the right web hosting (which must be capable of supporting the PHP programming language, and running MySQL databases).

Once installed, there are several settings to update. Some of the essentials being to update the Permalink structure, and in the case of a web site vs blog, I wanted to remove the comment features, as well.

Permalinks – also known as “pretty URL’s” – change your post URL’s from something like “/index.php?p=364″ to “/web-design/wordpress-as-cms/”

Typically with a blog, posts are setup with date based permalinks. In the case of the main site, however, I wanted to go with a more traditional format of “/category/postname/”- which help give the illusion that all areas of the site are Pages, as opposed to a combination of Pages and Posts.

I also turned off Comments and Trackbacks (links from other sites back to your own) throughout the site. Comments are an essential part of a blog, but not something I wanted on the main web site.

The comment settings are updated through the WordPress admin area, however I took this a step further by also removing the comment loop from my template files – basically just because I didn’t want a notice that “Comments are closed” on every page of the site, as well.

How to Resource Link…
Using Permalinks

Using a Static Front Page

Once the main site settings were complete, it was time to begin on the content pages. To begin with, I wanted the site to use a static page for the home page (not the typical format of displaying the most recent posts).

This is a very simple setting in the WordPress admin area, which lets you specify either using the latest posts or a static page as the front page of the site.

How to Resource Link…
Creating a Static Front Page in WordPress

Individual Page Templates

Using the Page Template option (and with some extra PHP files), you can indicate separate templates to be applied to individual pages.

By creating a home.php file,* the pre-defined front page of the site can use a different page template than the rest of the site, as well. In my case, I wanted the home page to use a specific header and footer, but NOT use a sidebar.

* It’s important to note that the home page file MUST be titled home.php – anything else, even page_home.php as I had tried to use, will not fully work.

On the interior pages, I wanted to have unique headers on each page – each one having a different slogan under the “Hello! Welcome to iDesign Studios” text at the top of each page, depending on which section a visitor is on.

There is also a difference on the header and footer of the site, depending on if you are in a main site section – take the Portfolio page, for example – vs the more personal About Me section (which includes my bio and resume, etc.)

How to Resource Link…
Creating Your Own Page Templates

Individual Templates For Categories and Posts, Too!

While there is a readily available Page Template option when creating Pages – there is no similar option when creating Posts. I admit I had to do a bit of digging around on Google to find a solution to this problem, but I’m glad to say that I found it!

This one involves a bit of PHP scripting (explained very well at the link below) – but basically, by knowing your category ID’s, you can specify posts contained in different categories to use specific page templates.

This means that I was able to keep the header and sidebar from my Portfolio page along with my individual Portfolio posts, as well. Take for example the main portfolio page vs an individual portfolio post. By clicking through on the site, you’d really have no idea if you were viewing a Page or a Post, which was what I had hoped for.

How to Resource Link…
How to Set Up Custom WordPress Category Templates

Multiple Dynamic (Widgetized) Sidebars

Even more important than having individual headers and footers, I wanted to have separate sidebars, as well.

For example, on the main About the company page, I wanted to highlight one of my client testimonials, as well as link to additional information about myself (bio, etc.). On the Testimonials page, I wanted to include a PHP code that would automatically list all of the Testimonial posts so you can easily navigate from one to the next, etc.

Although I could just as easily have hard-coded the content of each of the sidebars in PHP, you have to admit that using widgets are easier. I could make updates anywhere as long as I have a web browser (without having to download/upload updated PHP files, etc.)

On each of the page templates, I’d link to the individual sidebar files. Where the real work comes in, though (which enables all of my sidebars to be widget ready and editable in the WP admin area) is to make some updates to the functions.php file.

How to Resource Link…How to Create Multiple Dynamic Sidebars for WordPress

Seamless Pages and Posts

Then comes the integration of WordPress pages and posts. On most blogs it’s quite obvious which is which. However, in this case I didn’t want to highlight content as being specific posts or pages – I wanted it all pretty much hidden.

With careful organization of my page and category structures (as well as the help of the Redirection Plugin) you’d never know the difference.

For example, if you tried going to http://www.idesignstudios.com/category/portfolio/ – instead of getting a chronological listing of Portfolio posts, you would be redirected to http://www.idesignstudios.com/portfolio/ which is the page I have setup with a general introduction to the portfolio, as well as a specific order of my work samples, etc.

Two additional plugins that proved to be essential for this project are Exec-PHP and Deactivate Visual Editor. Both plugins combined enabled me to add PHP code to my pages and posts from within the WordPress admin area. You can see this in action in the FAQ page, for example, where the questions are automatically inserted onto the page, just by including the “get_post” tags as demonstrated in the link below.

How to Resource Link…
Template Tags – Get Posts

Putting It All Together

There were so many individual elements involved, but combined, the new site takes “WordPress as a CMS” to a new level.

With some of the automated features – such as the PHP code mentioned above to automatically list Testimonials and FAQ’s – all I have to do is add a new post whenever I have a new client recommendation, for example, and it’s automatically added to the main Testimonial page and sidebar.

I haven’t made use of the Feed options for the site yet, but by using posts for some of the more frequently updated content (especially the Portfolio section), this will be a great way to keep clients and prospects updated about company news and updates.

This was a truly great project that I learned quite a bit from. Nothing like really being able to spend time working on your own projects, where you can learn new techniques that you can later utilize for client projects, as well.

This is yet another demonstration of exactly why I love web design and development so much! It’s a never-ending learning experience, and it just gets better every time!

From the Experts – Complete Resource Lists

For the developers out there, here are some of the resources that I found to be invaluable while re-developing my site with WordPress.

These guys explain the techniques better than I could – and they helped me tremendously – so I figure a little bit of link love is in order!

• WordPress Codex Template Tags
• Creating a Static Front Page in WordPress
• Creating Your Own Page Templates
• Template Tags – Get Posts
• How to Set Up Custom WordPress Category Templates in Four Easy Steps
• How to Create Multiple Dynamic Sidebars for WordPress

Then come the plugins! Since WordPress is Open Source, there is a big community supporting the software. Many talented developers create plugins that extend the software’s functionality.

With several thousand plugins currently available, the possibilities are seemingly endless!  You can do so much with plugins but for this particular project, there are a few that were essential.

• Exec-PHP
• Deactivate Visual Editor
• Redirection

Big thanks to everyone involved in creating the posts and plugins listed here – without you, my site wouldn’t have been possible as I had envisioned!

If You’re Not a Developer and This Is All Greek To You…

Yes, it’s time for the obligatory shameless plug!

With the resources above, web developers reading (especially those versed in WordPress) should have no problem putting together a similar site.

But, you’re not all tech types (I don’t think…) So, if you need a web site of your own, or realize it’s finally time for an upgrade, but have no idea where to start… I hope you’ll keep me in mind!

Please check the Services page on the main site for details. I’ll be happy to put together a FREE detailed proposal with several options to choose from – just fill out the Quote Request Form or send me a quick message on the Contact page.

I look forward to hearing from you!

By the way, I offer “Design Only” and “Development Only” services that are great for other web designers / web developers who prefer to focus only on one or the other, and outsource the rest…

Michael Martine of Remarkablogger just published a new eBook today…

• Starting a Business Website and Hiring a Web Designer
  

Beginner’s Mind

Michael Martine is a Blog Consultant, and has a great deal of experience teaching computer, blogging and other technical skills to beginners. He utilizes his teaching abilities in this book, where he explains in plain English all of the information necessary to starting a business web site.

This book is for a person who needs a website for their business, but who either has no experience getting one or isn’t sure what’s the best way.

For a beginner, it’s overwhelming.

When you start a business website, you want to feel confident you’re investing your money and getting a return on that investment. You don’t want to gamble with your money and leave the results to chance.

Topics Include…

• What you need to know about web hosting and domains
• What you need to know about hiring a web designer
• What type of web site you should choose

Building Your First Web Site – A Beginner’s Guide

Martine’s latest eBook covers all the crucial starting points you’ll need to know about to be sure that your first web site is a successful one.

As a web designer / developer myself, I’ve had clients come to me to re-design a site that just didn’t work well for them. A site that they paid money to a not-so-qualified web designer to create for them – and isn’t up to par.

If you’re just getting started on the web, this book will be a great read for you – and as it explains, you can save literally thousands of dollars by doing it right the FIRST time. As in not spending money for a so-so web site, that a few months later realize isn’t doing you any good – and that you’re going to have to start over from scratch to do it right the second (or third) time.

Not Actually JUST for Beginners

Although the book is aimed at beginners getting ready to build their first web site, it can also be very helpful to people who have a little bit of experience with a site. Such as for people who already have built a site (one of the ones mentioned above – yes they have a site, but it’s just not a good one).

If you’ve already built a web site (or more), the book covers basic information that you might already know. However a lot of the information will be beneficial to you when going to fix your site – to make sure your next site IS successful and all that it can be.

Technical Information… In Plain English

Whether you’re getting ready to start on your first web site (or even preparing to fix an old one), there’s a good chance you are completely unsure as to what options are available to you, what to expect, etc.

Michael starts off the book by explaining the some of the technical aspects behind starting a web site, such as…

• What is a Domain?
• How to choose a Domain – should you consider Keywords or your Company Name?
• What is Web Hosting?
• Information on Hosting Terminology, explained in plain English
• Recommended Web Hosting Companies
• What Type of website should you choose?
• What is a CMS (and which one is right for you)?

Help With Hiring a Web Designer

Then onto my favorite part of the book – Hiring a Web Designer – including information such as…

• The two things you NEED to know when hiring a Web Designer
• What are the right Questions to ask?
• Technical Expertise to look for in a Web Designer
• “What Else” qualities to look for in a Designer
• How to Find a good Designer
• Personal / Word-of-Mouth list of Recommended Web Designers
  I’m on the list and in some VERY good company, as well!

Get Your Copy TODAY!

If you have been considering starting a web site for your business, but have been overwhelmed by the options, this will be a great read for you!

Heck, if you are a web designer or developer yourself, this is also something you might want to show potential clients, just because it is a great brief as to what they can expect. I know first hand that it does make things easier when your clients are well informed as to the entire web design process.

• Learn more about “Starting a Business Website and Hiring a Web Designer” over on Remarkablogger

I wanted to follow up on my recent post highlighting the Save the Developers campaign, which is focusing it’s efforts on getting everyone to upgrade their outdated web browsers – specifically Internet Explorer 6.

Internet Explorer 6 Woes

I’ve been making several design updates to this blog, which is still in the Soft Launch phase while I tweak a few design elements, etc.

I have access to an older computer with IE6 for testing purposes – of course, even though this blog utilizes valid XHTML / CSS, it looks terrible on IE6!

On a personal note, this post marks the launch of version 1.2 of this WordPress theme. I’ve still got several tweaks in the works. Next stop? v 1.3

Finally – Transparent PNG’s!

As far as the IE6 issues with this blog… well, there are too many to count! But one major issue that has been holding me back is IE6′s inability to use transparent PNG’s without an IE6 hack, or creating two separate stylesheets (one for IE6 and one for everyone else).

So far I’ve just avoided the issue and not used transparent PNG’s, so as to not have to deal with the excess hassle in trying to make it work for IE6. I’ve been using GIF’s if I need a transparent image, or done work-arounds with JPG’s instead.

Business…

Of course, I want my main business web site to be as accessible as possible, regardless of the end user’s web browser. So that site has been setup to accommodate IE6 users with fully validated code.

All sites that I create for my own clients are fully accessible with the latest browser versions and IE6.

There’s no way around that! Business is business, and it’s important to get your message across to as wide an audience as possible.

… vs. Pleasure

But, with this being my personal blog, I have made the decision to send a different message to my audience, by taking the stand for web standards!

I will be fully promoting the Save the Developers cause by NOT worrying myself over compatibility and display issues with IE6.

I have installed the script provided by savethedevelopers.org. IE6 users will see a little graphic at the top of their screen, urging them to upgrade. Hopefully at least one or two people do take the opportunity to upgrade their browser!

This will save hours, if not days in trying to make a fix for an out-dated browser that does not comply to the current web standards. Not to mention, I can finally fully utilize the transparent PNG’s that I’ve been wanting to use for the longest time now.

Together we can make a difference!

If you are a web designer, I hope you’ll join me in promoting this cause!

Please feel free to post a comment below with your web site or blog link if you are promoting the Save the Developers campaign by urging all IE6 users to upgrade their browser and installing the Save the Developers script on your web site or blog.

Maybe this time next year, we can get that number of 30% IE6 users down to 10% or less!

Thanks to @womanchild on Twitter for posting this link. I love the concept!

Save The Developers is promoting a campaign for everyone to…

Say NO to IE6!

Our current campaign focuses on assisting users in upgrading their Internet Explorer 6 web browser. This campaign will result in former IE 6 users having a more enjoyable experience on the web while (hopefully) creating a less stressful and complicated environment for web developers by hastening the retirement of an outdated browser.

A Massive Time-Suck

My goodness, the countless hours that could be saved if IE6 wasn’t still such a popular web browser. It just does not comply to all of the current web standards, making life difficult for web developers all over the world.

What looks good in just about all of the other web browsers – IE7 included – often degrades terribly on IE6. Which is a major time-suck for web designers / developers everywhere.

As web developers, we have to appeal to the masses and spend the time trying to make it work across the board. We either have to loose features or have to come up with crazy hacks, etc. All because so many people are still using IE6, so therefore we still have to cater to it.

Current Statistics

According to W3Schools – February 2008 statistics show that:

• 30% of online users are still using IE6
• 22% are using IE7
• 36% are using Firefox
• everything else is 2% or less

I’m glad to see the Firefox numbers rising, but am really disappointed that IE6 is still so popular. I would have thought the percentage of IE7 users would have at least been equal to the percentage of IE6 users.

Clearly there really is need for the Save The Developers campaign.

Please Upgrade!

So, if you are still using Internet Explorer 6 – or know anyone that does…

Please upgrade your browser! You can upgrade to Internet Explorer 7, Mozilla Firefox, Apple Safari or Opera. Anything BUT Internet Explorer 6, LOL.

IE8 is in the works, btw… the beta is already out, though I have not tried it yet.

Just for the Record…

Firefox is my browser of choice, although I’ve recently discovered Flock – also by Mozilla – which will likely soon be my new favorite.

Flock – known as “The Social Web Browser” – has all of the same standards support as Firefox. However it incorporates many tools that help integrate the browser with several of the more popular social media sites such as Twitter, Facebook, Flickr, Del.icio.us, etc. New post on this coming up soon, btw.

Anyway, go check out savethedevelopers.org… If your a web designer / developer, please promote it! If you’re a web user and still using IE6…

Please upgrade! Thank you!

Follow-Up Post: Taking a Personal Stand

I wrote the post below a couple weeks after publishing this one. I hope you’ll join me – at least on your personal sites (I understand we have to deal with IE6 at least for client sites…)

• Save the Developers! Taking a Personal Stand!

About a year ago, I wrote an article for the main site that outlines The 6 Phases of the Web Site Design & Development Process. As part of my business web site, the article is slanted to how I personally help clients through the process of creating a web site.

Here, however, I wanted to create a more generalized post. Same basic idea, however this version can be utilized by anyone, regardless of who they hire to design their web site.

I hope this helps when considering building your own site!

The Web Site Design and Development Process

There are numerous steps in the web site design and development process. From gathering initial information, to the creation of your web site, and finally to maintenance to keep your web site up to date and current.

The exact process will vary slightly from designer to designer, but the basics are generally the same.

1. Information Gathering
2. Planning
3. Design
4. Development
5. Testing and Delivery
6. Maintenance

Phase One: Information Gathering

The first step in designing a successful web site is to gather information. Many things need to be taken into consideration when the look and feel of your site is created.

This first step is actually the most important one, as it involves a solid understanding of the company it is created for. It involves a good understanding of you – what your business goals and dreams are, and how the web can be utilized to help you achieve those goals.

It is important that your web designer start off by asking a lot of questions to help them understand your business and your needs in a web site.

Certain things to consider are:

• Purpose
  What is the purpose of the site? Do you want to provide information, promote a service, sell a product… ?
• Goals
  What do you hope to accomplish by building this web site? Two of the more common goals are either to make money or share information.
• Target Audience
  Is there a specific group of people that will help you reach your goals? It is helpful to picture the “ideal” person you want to visit your web site. Consider their age, sex or interests – this will later help determine the best design style for your site.
• Content
  What kind of information will the target audience be looking for on your site? Are they looking for specific information, a particular product or service, online ordering…?

Phase Two: Planning

Using the information gathered from phase one, it is time to put together a plan for your web site. This is the point where a site map is developed.

The site map is a list of all main topic areas of the site, as well as sub-topics, if applicable. This serves as a guide as to what content will be on the site, and is essential to developing a consistent, easy to understand navigational system. The end-user of the web site – aka your customer – must be kept in mind when designing your site. These are, after all, the people who will be learning about your service or buying your product. A good user interface creates an easy to navigate web site, and is the basis for this.

During the planning phase, your web designer will also help you decide what technologies should be implemented. Elements such as interactive forms, ecommerce, flash, etc. are discussed when planning your web site.

Phase Three: Design

Drawing from the information gathered up to this point, it’s time to determine the look and feel of your site.

Target audience is one of the key factors taken into consideration. A site aimed at teenagers, for example, will look much different than one meant for a financial institution. As part of the design phase, it is also important to incorporate elements such as the company logo or colors to help strengthen the identity of your company on the web site.

Your web designer will create one or more prototype designs for your web site. This is typically a .jpg image of what the final design will look like. Often times you will be sent an email with the mock-ups for your web site, while other designers take it a step further by giving you access to a secure area of their web site meant for customers to view work in progress.

Either way, your designer should allow you to view your project throughout the design and development stages. The most important reason for this is that it gives you the opportunity to express your likes and dislikes on the site design.

In this phase, communication between both you and your designer is crucial to ensure that the final web site will match your needs and taste. It is important that you work closely with your designer, exchanging ideas, until you arrive at the final design for your web site.

Then development can begin…

Phase Four: Development

The developmental stage is the point where the web site itself is created. At this time, your web designer will take all of the individual graphic elements from the prototype and use them to create the actual, functional site.

This is typically done by first developing the home page, followed by a “shell” for the interior pages. The shell serves as a template for the content pages of your site, as it contains the main navigational structure for the web site. Once the shell has been created, your designer will take your content and distribute it throughout the site, in the appropriate areas.

Elements such as interactive contact forms, flash animations or ecommerce shopping carts are implemented and made functional during this phase, as well.

This entire time, your designer should continue to make your in-progress web site available to you for viewing, so that you can suggest any additional changes or corrections you would like to have done.

On the technical front, a successful web site requires an understanding of front-end web development. This involves writing valid XHTML / CSS code that complies to current web standards, maximizing functionality, as well as accessibility for as large an audience as possible.

This is tested in the next phase…

Phase Five: Testing and Delivery

At this point, your web designer will attend to the final details and test your web site. They will test things such as the complete functionality of forms or other scripts, as well last testing for last minute compatibility issues (viewing differences between different web browsers), ensuring that your web site is optimized to be viewed properly in the most recent browser versions.

A good web designer is one who is well versed in current standards for web site design and development. The basic technologies currently used are XHTML and CSS (Cascading Style Sheets). As part of testing, your designer should check to be sure that all of the code written for your web site validates. Valid code means that your site meets the current web development standards – this is helpful when checking for issues such as cross-browser compatibility as mentioned above.

Once you give your web designer final approval, it is time to deliver the site. An FTP (File Transfer Protocol) program is used to upload the web site files to your server. Most web designers offer domain name registration and web hosting services as well. Once these accounts have been setup, and your web site uploaded to the server, the site should be put through one last run-through. This is just precautionary, to confirm that all files have been uploaded correctly, and that the site continues to be fully functional.

This marks the official launch of your site, as it is now viewable to the public.

Phase Six: Maintenance

The development of your web site is not necessarily over, though. One way to bring repeat visitors to your site is to offer new content or products on a regular basis. Most web designers will be more than happy to continue working together with you, to update the information on your web site. Many designers offer maintenance packages at reduced rates, based on how often you anticipate making changes or additions to your web site.

If you prefer to be more hands on, and update your own content, there is something called a CMS (Content Management System) that can be implemented to your web site. This is something that would be decided upon during the Planning stage. With a CMS, your designer will utilize online software to develop a database driven site for you.

A web site driven by a CMS gives you the ability to edit the content areas of the web site yourself. You are given access to a back-end administrative area, where you can use an online text editor (similar to a mini version of Microsoft Word). You’ll be able to edit existing content this way, or if you are feeling more adventurous, you can even add new pages and content yourself. The possibilities are endless!

It’s really up to you as far as how comfortable you feel as far as updating your own web site. Some people prefer to have all the control so that they can make updates to their own web site the minute they decide to do so. Others prefer to hand off the web site entirely, as they have enough tasks on-hand that are more important for them to handle directly.

That’s where the help of a your web designer comes in, once again, as they can take over the web site maintenance for you – one less thing for you to do is always a good thing in these busy times!

Other maintenance type items include SEO (Search Engine Optimization) and SES (Search Engine Submission). This is the optimization of you web site with elements such as title, description and keyword tags which help your web site achieve higher rankings in the search engines. The previously mentioned code validation is something that plays a vital role in SEO, as well.

There are a lot of details involved in optimizing and submitting your web site to the search engines – enough to warrant it’s own post. This is a very important step, because even though you now have a web site, you need to make sure that people can find it!

Note to self… write post on SEO/SES.

The Bottom Line

All in all, your web designer should work closely with you on a very similar process to this one. A good working relationship with your designer, including an open line of communication, is important to ensure they are creating a successful web site that will help your business grow.

Shameless Plug

I’ve personally been designing and developing web sites for a full decade now. So… if you’re ever in need of a web site and happen to like my design style, please don’t hesitate to contact me! You can also read more on the specific details of my own personal web design process on the FAQ page.

By the way… if you found this article helpful – and I hope you have! – please subscribe to this blog, because there are more informative posts on the way!

I am proud to announce the official re-launch of iDesign Studios!

This has been in the works for quite some time now, and I’m very happy that the new site is finally live.

The latest version of the web site takes on a much different look and feel than the previous site. It also includes a great deal of new content…

Specifically a new FAQ section with a few articles which give additional information on the web design process, and what you can expect when working with me. I have also added a testimonials section, which include recommendations from some of satisfied customers.

Most notable is the addition of a shopping cart, using CRE Loaded software. This enables us to include detailed information on each of our services, as well as making my rates readily available to the public. This is new, as potential customers previously had to contact me in order to request a proposal for services. My thoughts for this addition was to enable visitors to the site to learn about my services, with minimal effort (ie. not having to complete an online form just to view rates, etc.)

I hope you’ll take a look at the new web site!

• iDesign Studios

I would love to hear your thoughts on the new design as well as on the content, etc. Both positive and negative critiques welcome!

Please post a comment below to let me know what you think.

I look forward to hearing from you!

Today’s Link Love has my fellow techie web designers and developers in mind!

If you are haven’t already visited Smashing Magazine – I urge you to go and run to it! Right now… ok, not right now, right after you finish reading this post and checking out the blog a bit more, LOL.

Then go over to Smashing Magazine and be sure to subscribe it, bookmark it, whatever… This site contains an insane amount of valuable resources and information for web designers. I’m honestly in awe of the amount of helpful information they offer.

Today though, I’m focusing on CSS. I found two fantastic articles with tons of tips and tricks. I am constantly working on increasing my web development skills, and the two posts below will certainly help me achieve this in regards to CSS.

There are so many cool things listed in the two posts below that I wish I could just take an entire day to experiment with them. I’ll have to settle for incorporating them bit by bit on projects as I work on them. I’ve already got a few specific ones in mind for this blog.

Smashing Magazine

• 70 Expert Ideas for Better CSS Coding
• 53 CSS Techniques You Couldn’t Live Without

Are there any great CSS resources that you can’t live without? Please share with the rest of us by making a comment below!

I recently came across an article written by Andy Budd last year – 7 Habits of a Highly Successful Web Designer. It’s a very good read, and I found it to be quite motivating!I personally have quite a few of those habits well established. For example “Loving what you do” and “Never stop learning” – I took a bit of a break from the learning part, but am now back into the swing of things as far as keeping my skills up to date – this is a constantly evolving process.

Others are items that I am slowly working on. For example “Networking” – I’ve been a bit slow on the take, but I’m finally getting into web 2.0, and utilizing various social media, such as this blog, or social networking sites such as Facebook and LinkedIn.

When reading, it all sounds like common sense, but there are things that you may have overlooked. Having it all written out for you serves as a very good reminder.

I’ve definitely bookmarked this post so that I can check back on it from time to time, and make sure that I am still on track.

FreelanceSwitch and GoMedia are hosting a calling card competition. I have to admit this one looks like fun, even though it is a print project. The idea is to use one (or more) of the free vector art samples from GoMedia and incorporate it into a calling card. This is basically a more personalized business card – at least in terms of style.

The calling card defines YOU, not your business. The contact information listed is very brief (if any). From what I’ve seen, it tends to be limited to just your web and email addresses – as opposed to a business card which lists your mailing address and phone number(s) as well.

The deadline is November 17th… lets see if I can come up with something cool enough to submit before then. It would be nice to have a more ‘fun’ personal card. But then again, I hardly ever use my business cards to begin with. Besides that, how do you go about deciding if you want to hand out the business card or the calling card, lol?

Anyway, some good food for the mind by giving myself another design project. I’m certainly not expecting to win (there will only be 2 winners out of what I’d imagine to be thousands of entries). But still, it does sound like fun.