This is Part 3 and final of the complete redesign of my website – Design by Satori

This is part 2 of this series. You can view Part 1 here.

I decided to split the main screen in 2 sections, after the “slideshow” on the billboard. One section will cover copy about myself, talents, skills, etc. and the right sidebar will include “Services” and “Design by Satori featured in”.

The sidebar will change according to whatever page I’m on and display information with links for easy navigation. For example, if on “Portfolio” page, the sidebar will include:

• Web Portfolio – with copy and my best samples
• Before & After Design Portfolio – section with jobs I took over and redesigned sites for clients
• Logo & Branding Portfolio – samples of my work along with copy of logo and branding
• Brochures Portfolio
• Print Portfolio
• Graphics Portfolio

For the “Portfolio” page I am currently using thumbnails but after reading some more on Smashing Magazine, I reached the conclusion that thumbnails should be eliminated and large pictures of the design work should be displayed without leaving people guess what every thumbnail would be.

An explanation of each project will be a nice add-on (and that will give me some more tags and keywords that would please the All Mighty Google). Of course “Calls to Action” with “Contact” information would be present next to each project, allowing the web viewer to immediately take action once convinced the work is up to his/her standards.

In conclusion – the below shows where the change will occur:

Existing Design

Proposed Design

Another area that I think needs to exapand is the “Resources” section due to my belief that people will see you as an expert if you are giving away free resources and hopefully come back for more. More come back visits, translates into higher traffic and higher traffic means more exposure in seach engines and thus more clients.

Speaking of displaying my best work, on the existing site, on the “Portfolio” page, I am using a piece of javascript code called Lightbox. It is an awesome code that allows you to view pictures and chuncks of text on a very cool pop-up window, while the background goes dark. It is customizable and I highly recommend it.

This can be seen in action here and a screenshot below:

The new site will also include many links to my blog – Defactomind.com that should help also Google page ranks. This concludes Part 2 of this series. Click here to go to Part 3 and final of the “Web Redesign”

It’s been almost a year since my last redesign of “Design by Satori” and it’s time for another one. By the way -I highly recommend redesigning your site once per year or at least updating chuncks of text in your web copy at least 4 times per year. This will maintain Google rankings not to mention the nice surprise you will give your web viewers – showing that you care about your site and the way you present it to them.

I have decided to share with you the pain of redesigning a website, especially if you are like me (looking at tons of websites for inspiration, trying something, don’t like it and start all over again).

Well the present site was a bit too dark. Here’s a shot of it here:

In fact, here are all my versions since I decided to redesign the site every year (sometimes twice):

Version 1

Version 2

Version 3

The structure of the present site is sound and does not contain a bit of tables. Well…almost. I used 2 tables when I encased the “Contact” forms, casue I was too lazy to figure it all out. The rest of the site is all developed in CSS. In fact these are the “weapons of choice”:

• CSS – using Notepad as editor
• FrontPage – also used as editor (I know it’s old and few use it but I’m so used to it, I just can’t get rid of it…)
• Dreamweaver – here and there (mostly there…)
• Photoshop CS4 – there are no words to describe this great piece of software; after 7 years of using it I still feel I barely scratched the surface of its capabilities.
• My trusted Canon EOS Rebel XSi – to take great photographs
• Photomatix – a piece of software I just bought and played in HDR a couple of times – I like it so far

What don’t I like about the site? Not very many things but the overall comments were: “It feels like a socialist propaganda website…the red stars next to your menu items do not help either” or “It’s nice but too dark. If this site represents you…well, then you must be trubled…”

Based on this I started the work and here’s what I came up as a battle plan:

1. Copy – I will use the same text, but replace large chunks of it and make it more as a freelance site as oposed to a design agency site. The “Main Page” needs to be re-writen and make it a bit more whimsical and not so corporate. The more I was reading the text the more I felt like another corporate drone3 and wondered how I even conceived that dry copy.

I re-wrote the entire “Main Page” and dipped into my “writer ego” with new copy. Once I finish the site, of course you’ll see it and understand what am I talking about here.

2. Structure – I will maintain the structure and change only the main page, creating more “Calls to Action” and emphasize on the ‘Portfolio” page. I will also use the 960 grid for websites, which I like and I think it makes sense, accomodating all browser rezolutions starting with 1027 x 768. For those who have less than that – sorry, that’s where the web rezolutions are for more than 87% of the web surfers so I”ll have to cater to them.

I also needed more links for possible clients to contact me via my social edia accounts (Twitter, Facebook, Linkedin, Flickr, etc.). OVerall – I really need to up the number of links from this main page to all the others (within the site), plus to this blog and hope to climb in Google page ranks.

3. Design – I wanted something cleaner, less dark but artsy enough that my designer skills still can shine through. I decided on a white background with eerie clouds like here:

I also decided to repeat the theme (of dark blue clouds) in the “footer” to grab attention. The header will contain a menu with simply <ul> items instead of sprites coded in CSS to display “cool” but unnecessary graphics. So – text links – best for search engines.

I love smart billboards so I decided to include one above the fold with changing images very 3 seconds (enough for viewers to see it, allow just enough time to think and move on to the next one). I am still having some problems showing PNG transparency in IE but I have some ideas how to circumvent it. Of course Firefox displays it correctly, but I have no time to whine about the IE shortcomings.

For font I decided on ‘Arial” throughout the site. I think it looks cool (especially in headers) and people are used to it.

4. Development – Of course I will stick with CSS (nothing beats that) and hopefully I will learn a thing or two about using it in forms. I still use some CGI scripts with my forms and getting rid of an old and used thing it’s a bit hard, espcially when I have so many balls in the air.

So that’s the plan. I have no time limit on this project. I work on it whenever I have time, between the blog, clients, web promotion, reading marketing and design books and working on a joint venture with another gentleman for a brand new game.

In part 2 of these series I will delve more into the design and development part, so stay tuned.

Flash is often labeled as the SEO death sentence for websites. Equally perceived as bad is also Ajax but by employing other techniques you can bypass the short comes of both Flash and Ajax and still make your website SEO friendly. Well…almost.

Flash is still a powerful technology that can deliver an enhanced user experience. That is why, aware of the poor engine support, Adobe creators released a software development kit that converts Flash files (SWF) into HTML documents. To some degree this effort has paid off and Google is now able to index Flash files, using their own software. 

HTML vs Flash

You can test to see how a Google search for a Flash file looks like by typing “keyword filetype:swf”. Replace “keyword” with whatever word you are looking for. Keep the rest “filetype:swf” exactly as is.

Even in that case, the Google spider is still pretty confused about the file hierarchy. This makes achieving good SEO very difficult.

Whenever competing with straight HTML on the same keywords, Flash will always rank lower, so why bother?

Another element missed by the Flash to HTML conversion is the usage of meta tags. Although not as popular as it used to be, meta tags are still taken in consideration by other search engines (Google not included), and if you have even a 1% chance of listing with them, why not take advantage of it?

The combination of Flash and HTML is called a Hybrid page and Bobby Van Der Sluis wrote an awesome article addressing this particular issue on http://www.alistapart.com/articles/flashembedcagematch/

Single Flash sites have the following disadvantages:

1. Poor indexing power with search engines.
2. It breaks the browser’s “back” button rendering it non-operational.
3. Is not able to provide unique URLs for bookmarking or sharing purposes.
4. Requires all alternative content for the entire site to be embedded in one HTML page.
5. Prevent direct navigation to content
6. Takes longer to load

Flash has evolved tremendously over the past 5-6 years. In fact there are specialized design companies that will build entire websites using only Flash.
Although Flash can wow and can be quite enticing, there are still major disadvantages of using Flash vs. HTML and there a way to go in this “battle”.

Just as in sports (coaching, offense and defense) your website should also employ this 3 pronged approach. Apply it vigorously and you got yourself a winning website.

Just in case you need a FREE website opinion, drop me a line and I’ll do my best.

Back to the 3 pronged approach – what do I mean by “coaching, offense and defense” exactly.

Your website should do the following:

What Your Website Should Do

1. Provide corporate information

This information should educate web visitors on what you stand for; your company’s philosophy. This section should include phone numbers, contact forms, FAQs, product specs, updates, patches, free materials, downloadable brochures, etc.
This is your “coaching” prong.

2. Market and sell services and products to new customers

You are not really selling but in fact you are doing a lot of brand reinforcing so your name can be easily recognized next time a potential customer is on the market for your product or services.
This is your “offense” prong.

This section could be split in 2 items:

a. Selling a Tangible Product

In this case your website should be equipped with an ecommerce feature along with ecart solutions, payment options, guarantees, terms of service, etc.

The ecommerce feature depends a lot on what type of product you are selling. If you sell cupcakes over the web you are probably already aware of what an ecommerce solution can do for your business.

On the other hand if you sell live puppies, an ecommerce solution would not be indicated for obvious reasons. In that case you’ll have to invite visitors to your website by using tons of information displaying your expert opinion in the area you have selected as your business.

b. Promoting Services

Many companies sell their services over the internet. Think of consultants who charge for the time spent with their clients or the subscription you pay to access knowledge reservoirs meticulously constructed in form of blogs, ebooks or white papers.

3. Provide Support to Existing Clients

Welcome feedback and act upon it by providing support and FAQs to your existing client base. Other elements included in this section of your website are:

• News and Press Release
• Testimonials
• Client Lists
• Contact Information
• Corporate Blogs

This is your “defense” prong.

Analyze your website and look for these 3 elements, if they are applicable. Your existing and future clients will appreciate you, your company, your products and services.

The practice of displaying bread crumb links on every page of a website gained popularity ever since Yahoo started adding them to their directory.

Bread crumbs represent the path of where you are coming from and where you are going within a website. They allow the web visitor to always know where they are within your website and most importantly to jump to previously visited web pages,

Several years ago, the Wichita State University revealed that bread crumbs account for 6% of total navigation. Although the “Back” button was considerably more (about 30%) the study showed that people tend to use the bread crumbs more (if they are available) in order to retrace their steps.

Web Bread Crumbs

Usually you’ll see bread crumbs displayed on the top of a web page, often under the horizontal menu. Their structure is horizontal and looks like this:

Home Page > Services > Logo Design > Logo Portfolio

Bread crumbs can be found as 2 different types:

1. Hierarchical bread crumbs
   As shown in the example above, they are independent of the way the web visitor reached your website and landed on a particular page.
2. Path based bread crumbs
   The links are dynamically created through programming and are displayed mirroring the browser’s history or the “Back” button functionality.

Bread crumbs are useful especially in complex websites that are several levels deep. I recommend them in all types of websites regardless of their complexity because of 2 reasons:

1. No matter how simple your website is, by using bread crumbs it will still show your web visitors that you care about them on how they navigate the site.
2. You’ll have the opportunity of including several keywords that will appear above the fold on every page of your website and that’s a good thing – just ask Google.

Before you venture into design territory and build your website make sure you have all the necessary tools and mainly a plan. Without it you will go back and forth from coding to Photoshop to Dreamweaver to CSS files in a merry go round while wasting a lot of your valuable time.

Methodical Web Design

1. Map out the structure of your site
   Decide the pages, titles, and the folders where you’ll store them. Establish parent directories and subdirectories. For instance, I am currently working on redesigning my web design & marketing site for Satori Solution Inc. I know I will have a public-html directory on the root of the website so I have created several folders under this that will store separate files. It is easier to keep track of everything. All my css files I have them stored into a css folder. All the images (jpg, png and gif) are under the image folder, and so on.
2. Use Logical Names for Files & Folders
   Stop using the same old “contactus.html) name coding. This will not score you brownie points with Google. In fact that is lame and web surfers will not even know that this particular page even belongs to your website. Instead, use a meaningful name like yourcompanyname-get-in-touch.html or contact-us-yourcompanyname.html. Your webpages will be indexed in no time by search engines and they will make sense when they are posted on the web.
3. Replace spaces with dashes for your webpage titles
   That’s right – spaces are automatically replaced with that ugly “%” symbol every time it finds a space in the title of a webpage. That is why you should even replace the title of a pdf file that you might want web visitors to download with something like that: http://www.designbysatori.com/how-to-promote-your-business.pdf
4. Test, test & test again
   Once you are finished with the entire site, start testing. Test it from different computers, different resolutions, and different browsers. I have made the mistake back in my young designer years of launching a website without fully testing it in Mac based browsers and after uploading it I was asked by an advertising shop (who of course was a Mac shop) how come they are not seeing the website correctly. Some other time I designed a site as if 800 x 600 was the only resolution available. Of course it looked great to me, but when I switched to a wide screen laptop with a 1280 x 768 pixels, everything looked tiny and very unappealing. So test links and menu items. Take your time and test everything.
5. Publish only when done
   Once you have completed the testing stage, let the site “cool down” a bit. Go back and revisit to make sure you have everything in place and you are ready to upload. DO NOT put an “Under Construction” sign on the temporary site. This is something you’d do back in the 90’s. It doesn’t fly anymore and it looks silly. Leave it as is, with the splash page provided by the hosting company. Usually GoDaddy or JustHost (I am sure many others do the same) have an already splash page letting people know that particular site is hosted with them.

Of course there is a lot in between, but here I just wanted to give you 5 easy pointers that you might forget. I hope that helped and hopefully you’ll get them done right.

Happy webbing!

3 Marketing Spices Every Business Should Have

Designing good web pages is a very challenging process. That is in part due to the fluidity of the medium the design is constructed upon. 

In other words, just because you want something to look a certain way doesn’t guarantee it will. When you design a brochure for print, you know that everyone has pretty much the same capacity of seeing the design as it was constructed.

Not the same for the web. Why? Because…

when you view a website on a monitor screen, the number of variables impacting the viewing experience rises exponentially. Here are some of them: screen resolution and size, browser characteristics, monitor calibration and operating system. All these variables distort the way the website is seen on the screen.

One of the most important issues for a web designer is deciding what the central or focal point of a web page should be and how much space should occupy.

In order to determine the middle of the screen (aka. The focal point of attraction for any web surfer), divide your screen in 8 rows by 10 columns. The area of intersection between row 5 and column 8 is your focal point.

Plan on putting there the most important piece of your web page. That could be a picture of a product you want to sell, a Call to Action of some sort or simply a block of text you really want the visitors to see and read.

Check out ibm.com or dell.com and you’ll see that all the action is happening exactly in this area.

Here’s what you can do to spice up this important area of your web page:

• Use strong, contrasting colors. This is the perfect place to layout a form with a strong call to action.
• Put a picture; lifestyles are best to be used here. Please stay away from the same dull executives shaking hands over the latest deal. Select one person instead, facing the action or the content. Never have the subject looking directly at the visitor; it will distract him.
• Use bigger text for headlines, bigger than usual or even different fonts. Make them stand out next to regular body text.

Some other quick tips to focus your visitors attention on your webpage while maintaining functionality:

• Have contact information on every page. Don’t let visitors wonder or search for that information, not even for 5 seconds. You risk on losing them. Even if you have a “contact us” page it is still better to post your contact info on every page without making them click on a specific page.
• Put testimonials on the right hand side of the page, where the eye is usually trained to look for this information.
• Use the right column to put newsletter links, registration options and other call to action.

Designing a web site in less than 30 minutes?

Every time when you conduct an internet search for web design and/or development you get hit by an avalanche of software packages, web experts, design companies and freelancers. All hard at work, trying to impress you with their portfolios, creativity and willingness to go the extra mile to build that perfect website for you.

That is all fine; after all – I belong to one of these groups. What is disturbing for a designer like me is the existence of so called web design packages that claim to be able to build a website in 30 minutes or less. But truly disturbing is the actual existence of a professional company that would consider buying one of these packages and claim they have an effective web presence. During my career, I have heard many of my potential clients wondering what the big deal was about building a website. “My next-door neighbor’s kid can whip one in no time”. He can probably do it in 30 minutes or less too, but is this the right way of developing your digital image? Remember – this is what web visitors see before they even get to your place of business. Do you care how you are perceived by these potential clients? If the answer is “no”, I doubt you are too interested in growing your business.

What if your business card looked torn and full of stains; or your suit when you show up for a client meeting? I doubt the clothing manufacturer would spend 30 minutes or less to make everything you were wearing. Why would you compromise your “cyber” image and put something forth that would just not represent the true core of your business?  

In this day and age, a website is crucial to your image, to your brand. More and more people are surfing the web before they make a decision where to shop. Why would you jeopardize your chances of being selected just because you “overlooked” the web site “thingy”? In my opinion a decent website can be constructed, soup to nuts, in approximately 7 to 10 days, of course depending on the complexity of the project.

At least 30% to 40% of this time should be dedicated to the discovery process.
This includes but not limited to:

• Gathering all the necessary data from the client
• Conduct interviews with the client about the scope of the project
• Decide on keywords, color palettes, structure, internal and external links
• Draw sketches for the site and landing pages
• Collect art work, pictures, newsletters, brochures, etc.
• Decide what text gets included where

Once this is completed, the development work starts. For this you need to have basic understanding of HTML and CSS at the minimum. The more complex the site is, the more skills you are required to pour into this project. That includes but not limited to JavaScript, php, Flash, etc.

The point I am trying to make is that in order for a web site to be successful (effective and eye appealing) 30 minutes is just not enough time to even put a great website idea on paper let alone build one. I agree that “content is king” but a “good looks” is queen to the king and they should compliment each other. Let’s face it – unless you really need something badly, like renewing your car registration on the web for instance, you won’t stick around on these awful government sites. But you need it and you keep on digging for the necessary information regardless of how poor the design is. In that case content is more than king – it’s got supreme powers(!).

If you care about your sales team, you should include your website as part of the staff, in a digital way. You need to care about your website, grow it, promote and expand on it as much as you can. Today’s Internet web surfers are savvy shoppers and they know what a polished website should look like. They are much more likely to buy from the sites that look and feel professional. The same “keyboard cowboys” also know what a generic, unimpressive website looks like, so make sure yours is professionally done. You need to do this right and 30 minutes will just not cut it. You barely can cook a decent meal in 30 minutes; how will this work for your site?

The business of digitally projecting your brand and image on the web is a serious one and can only be done the right way. Unless you want to look like your competition and create the same cookie cutter site like million of other ones.

Final advice – look for a professional company that cares about your business. Look for a freelancer who has the necessary knowledge and understands your needs; develop a long relationship with him/her and you will have a successful website that will bring you traffic and profits. Leave the 30 minute for the ones who are not that concerned with their business and want to play “designer” on the internet.