E-commerce & Internet Marketing Blog: Tips and tricks in internet marketing. Latest trends in web design.

Internet revolution in e-Estonia (by Reuters)

Reuters visited Estonia and considered that it’s really e-Estonia starting from Skype that’s the fisrt big e-solution coming from Estonia and ending with many other great web solutions developed in tiny hihg-tech country e-Estonia.

Watch the Reuters video

Watch the video by Reuters and get some inspiration!

If you have some resources then you just need some ideas, one really innovative developers team + little bit luck and you might grow from one-man business into something really big!

Welcome to high tech e-Estonia!

Draw the web site’s structure diagram & draw the web pages’ layout

Once you have gave a deeper thought about the goal of your website (read about “First steps planning your web design” by Carlo) you need to think about how the web pages (with text, image, video, input forms, etc. content) will be structured.

Good starting point would be to first try to think of what message you want to give the visitor straight away on a front page? Don’t forget that first very few seconds are most critical part when website visitor decides weather to leave of continue browsing.

Then you should think about the menu structure - what should be in main menu, what should be in sub-menus.

It’s always a good idea to graphically visualise the structure of the website (mindmap/flowchart) as that will make your web designers life much easier and higher the chance that you’ll get exactly what you need from your web development team.

Example hierarchy mindmap of example planned web design.

Example hierarchy mindmap of example planned web design.

Of course you can just use a pen and paper to draw the web site structure, scan it and send it to your web designer. This example mindmap was drawn using free web based and easy to use tool DabbleBoard (even no registration needed) and often we use open source freeware mindmap software called FreeMind but it might be easier to use a paper and pen for those who are less computer-literate.

Most web development companies including us will also provide you the service (we offer it for free for fist 2 hours) to create the website’s structure, hierarchy and functionality documentation.

Now you should think about the web design layout. Where should be the main menu, sub-menu or maybe separate menu for products/services. Where should be banners, advertisements, search box, login area, breadcrumbs etc.

It’s again a good time to take a pen and paper and draw the main page and any other pages needed. Again pen and paper + scanner is just fine, too but if your a Mac user then there’s a perfect software called Keynote and if you’re Windows user then open source freeware OpenOffice’s  Impress or not so free MS Office’s PowerPoint will be good choice.

Click on the image to see full size.

Click on the image to see full size.

Please, note that the minus of the Horizontal menu is that you should decide the amount (maximum +/- 1 or 2) items there will be. The vertical menu can extend downwards therefore it’s more functional. Of course there’s always drop-down menu option for horizontal menu but main menu items are limited. Vertical menu can have submenus when main menu clicked and also drop-right or drop-left menus.

When you have drawn and written a bit more detailed structure of your website it’s always a good idea to have a short phone call to go it all through all together.

Edit:

Mockingbird: Online wireframe tool - Create and share clickable mockups of your website or application with Mockingbird, an easy and fast wireframing and prototyping tool.

First steps planning your web design

Web development planning goals

What is the goal of the website?

Of course you have to start from here. Is the goal to get the visitor to click “buy now” or “order now” button on e-commerce website and reach the “Thank you! Payment successful” page or just fill a form and end up “Thank you! Information submitted!” page so you have some sort of information about the visitor and can do the sales via phone, e-mail or face-to-face.

What are the visitor’s immediate needs?

Your company’s goal can be different to your visitors need on your website. One of web 2.0 ideologies is to design website so that customer finds what he’s looking for as a first thing not to try to push agressively what you want to say -  annoying advertisments, pop-up windows and long navigation path before the content what visitors most probably search for at you website. If it’s an e-shop then products must be the first thing to promote and if providing services then all services should be mentioned on the front page and must be easily found from main menu(s).

The most immediate information that visitors want to find is weather the product/service they’re looking for is offered. After that the potential customer wants to know about the prices, quality, customer service quality and see some examples of work or try the product for free. Also, people want to get guarantee (Escrow payment if service provider or using secure payment methods where dispute can be created when product/service doesn’t meet the needs).

In part 2 Runo writes how to Draw the web site’s structure diagram & Draw the web pages’ layout

Why it’s better to develop web in open source (MODx, Magento, Wordpress etc.)?

Open source web designSimple - if you order from X web development company or even worse outsource your CMS and shopping cart for example from freelancer in India who will use his Z content management system then what will happen if that X web design company or freelances one day disappears? Unfortunately that happens to really often. Now you have your website coded so that no web development company will be happy to develop your website or will quote you maybe up to 10 times higher compared to if your web would been developed in open source platforms. Your new web developer needs to spend hours to learn the new code and sometimes parts of the code may be even crypted so you pay the new web developer £££ just to tell you that it’s cheaper to start from scratch so in most cases in such a situation it’s a better idea to start the whole development from scratch on open source.

What is open source?

Open source freeware software means that the source code is not crypted and anybody can see how it’s coded, use it freely, improve it, develop on it. That means that there are many developers who have improved it during many years and big amount of very talented developers are committed to work on these projects so they get always better and better by time and it’s always free for you to upgrade if new and better releases come out. And then there’s a huge community of fans who have developed huge amount of add-ons, extentions and extra modules for open source projects.

Minuses of open source web solutions

Many open source solutions’ user interface is too complicated for end user as they are developed by geeks and they have often TOO MUCH in it so end user can find it bit hard to find the right place to do the needed task. Let’s take for example even Linux which is open source operating system - most end users don’t like it but it’s best choice for your websites server hosting. It’s cheaper, better and you can run the best PHP/MySQL based open source applications on it compared to more expensive and absolutely not better Windows and ASP.NET.

Best example of too overloaded and slow open source CMS is probably Joomla. I have compared best open source CMSs including MODx, Wordpress, Drupal and Joomla in this post: Why MODx is best content management system. From e-commerce the good example is definitely Magento.  It’s huge, most resourceful so it needs really good server with lot of memory and skilled web developer to make it run fast otherwise your customers can make a cup of tea before the next page loads. And it’s more expensive to develop e-commerce web in Magento as it simply takes bit more time to get everything working properly in Magento. But from other hand is not bad at all if to leave out the speed and development time as Magento is leader number 1 e-commerce platform. We can develop on Magento almost any functionality you can imageine and we can even integrate Magento with your any other CRM or accounting software. Magento is growing fast and it’s powerful!

So, to summarise all above - open source is just the first best choice you make when starting the web development. But it’s also important to choose the right open source framwork on what to start the development. Shortly we can tell you that MODx is best for CMS and any custom built website, Wordpress is best for blogging and news websites and Magento is best if you need multifunctional e-commerce website (if not then simple shopping cart can be done in MODx, too).

Some dark humor from real life

We just got yet another customer who cried that previous Indian developer didn’t deliver anything during 4 months. Well that’s the sadest scenario that you can read from this The Daily WTF post: “Maybe I Needing Later

We really do get one-two new customers each month who need us to fix and improve their websites coded very poorly and without any documentation by small outsourced company nobody ever heard so we either deny the job, there will be lot of hours working out how everything is built or we start from scratch using of course best open source software.

How and why to develop website in a new server while old website is still live at old hosting until the new website is ready

Customers often want us develop new website to their domain name customer.com but until the new website is finalized, tested and the content added, the old website should still be live.

I’m going to explain the easiest way to do so without extra time (=cost for customer) spent on transferring new website to another hosting server and also configuring more complex web solutions to work properly in different server with different settings once it’s ready. Of course it’s also possible to develop your new website at existing hosting server’s subdirectory customer.com/new-website but that has some minuses, too:

  1. It takes some extra time to make the website work later in root directory (and can be much more time consuming if customer’s hosting company doesn’t offer shell access as most of them do if you don’t have dedicated hosting).
  2. Downtime of the website while taking the old web down and setting the new one up in the right location is in progress.

So, here comes the best solution - create new hosting in a new server for customer.com - of course now you don’t see the new website before DNS entries are changed and customer.com is not pointed to your new websites hosting from domain registration control panel (from the place where the domain name was registered). So now there are two hosting servers set up to host customer.com but everybody still sees what’s in the old hosting server = old website because if you type customer.com into your browser it turns to DNS and the DNS tells the browser that this domain should be looked up from the old server’s IP address. Now you as a developer (and customer as the one who want’s to see the development and add content before new website goes live) need to tell your computer NOT to look from internet in which server (IP) customer.com is hosted but to open customer.com from the new server (for example e-Stonia main server’s IP is 92.63.140.173).

Web design at new hosting

How to tell your Mac OS to look for customer.com from 92.63.140.173:

  1. Open terminal: from “Finder” take “Applications” -> “Utilities” -> “Terminal”
  2. Type into terminal:
    • sudo nano /private/etc/hosts (you will be asked for administrator’s password - type it in)
  3. Add one more line at the bottom of the file:
    • 92.63.140.173 customer.com
  4. Hold down control key and push letter o key to save the file. Now press enter on the filename prompt and hold down control key and push key x to exit the editor.
  5. Type:
  6. dscacheutil -flushcache
  7. Close terminal window, close your browser, re-open it and type in customer.com and you should see new website that is in development.

How to do it on Windows XP:

  1. Open from Start menu “Programs” -> “Accessories” Notepad and take from “File” menu “Open”
  2. Go to folder “My Computer” -> “C:” -> “WINDOWS” -> “System32″ -> “drivers” -> “etc”
  3. From “Files of Type” drop-down choose “All files”
  4. Open file “hosts” and add one more line at the bottom of the file:
    • 92.63.140.173 customer.com
  5. Close your browser, re-open it and type in customer.com and you should see the new website that is in development.

With Windows Vista and Windows 7  just click Start – search for “Notepad“, right-click on it and select “Run as Administrator“.

When web development is done and the new website is ready, customer.com will be pointed to the new hosting name servers from domain registration control panel and everybody will start seeing new website when they type customer.com into their browser.

Communication - a key to customer satisfaction in web development

English communicationIf you are working in the web development field you have probably come across the situation when you have created a nice new web page – it has the looks, it has the functionality, it has everything you’d wish for and most importantly everything the customer wished for but yet the customer rates it 3 out of 5 if not worse. You have put a lot of effort in creating the web and getting a good result so customer disappointment can be really frustrating not to mention bad for the business since happy customers recommend you to others and return to you whenever they need services offered by you, unhappy ones tend not to or may even spread a bad word about you. So how to avoid this – read on.

A few posts earlier I talked about written planning – the two main reasons it is important is to eliminate the risks to fail and to avoid arguments with customers on whether or not they’re getting what they paid for. OK, so you sat down together and wrote down every single little thing the web is supposed to do and are safe now on that side. But it is impossible to define what the web will have to look like. Of course you can put down the main design features like what colors should be used, whether to use top or side menus and so on but when you draw up the design solely based on that information it may look not so good to the customers eyes because tastes differ and what looks amazing to one’s eye may look appalling to other’s. A common mistake made is having the customer show you a website they like and creating a new one based on that but you want to create something new and eye catching not to copy someone else’s work and produce something you can already see all over the web. To avoid this it’s best to get the customer to do some homework and find as many webs as possible they like something about. Since people tend to be lazy by nature you have to encourage them and explain that they don’t need to create a full feature list for all the designs they find nice but make just a short list with one or two sentences about every site. For example:

www.example.com - I like the top menu on this site

www.example2.com - This page has a neat clean look

www.example3.com - The header looks smart and the usage of photo fading is great

If you get something like this it’s already a good start. Then it’s time to do some homework on your side – go through all the sites and have a look what was considered good and tasteful, try to combine the features from different sites in your mind or if you are not very talented designwise have your designer do that. After that you can go back to your customer with questions and suggestions. Now you can already put down quite a good plan on what to use and what can be discarded as not suitable with other ideas. At this point it is a good idea to compose an e-mail to the designer with as much information as possible. Include all the links with the customers initial comments, your own understanding of the comments based on discussions with the customer, the addresses of all available materials, the deadlines and everything else you have. Why an e-mail – the designer sits ten feet away from me? While IM chats and Skype/phone calls are good to discuss things not to mention face to face communication it is harder to track everything discussed later on. Things may go unnoticed or chat logging may play tricks and correcting mistakes later on is always more expensive than avoiding them.

Now that you have that plan your designer can draw a mock-up of the site to be. After such preparation it is quite probable that you can get it right or almost right with the first try. Since most projects have limited budgets it’s a good idea to show the design to the customer as often as possible to avoid having to redo large amount of work.

Don’t be afraid to make suggestions for as long as you are able to explain why some ideas are not that good and why something else might look better the customers usually take your ideas into consideration. Even though customers initially tend to have a “clear vision of what they want” they aren’t designers themselves and just putting all their ideas into a design usually results in poor designs no one will be satisfied with. All great products are born in collaboration and by the end of the day – that’s what you both are after.

Get 0208 landline on your Skype phone

When Three first launched it’s Skypephone more than a year ago then I clapped my hands that finally I feel that I need to upgrade my phone - I can chat for free on my phone, I can make free Skype calls worldwide and I can receive for free calls to our 0208 SkypeIN online number. Unfortunately I figured out very soon that calls to 0208 SkypeIN number doesn’t arrive to my Skypephone.

Now, last week I found workaround for this problem. You just need to keep your Skype account with SkypeIN landline number loged in at home or office and also run the Skypephone manager software in same PC.  Skypephone manager will answer automatically all Skype and SkypeIN landline incomming calls and will put the call in hold until it calls to another Skype account that you run in your mobile phone. When you answer the call, it will make conference call so that basically for you and caller it seems that the landline number is in your mobile.

So thakee your home or office SkypeIN landline numbers of any country with you on the move with any mobile with Skype.

Nominate MODx best open source CMS @ Packt 2009

Winner of most promising open source CMS 2007MODx won in Packt Open Source CMS Award 2007 first place at most promising CMS as it was still quite in a baby stage but seen that something good will come out of it. In August MODx Evolution 1.0 released and before the end of 2009 MODx Revolution 2.0 will release so let’s help MODx revolutionise the open source CMS World.

In making their decision at Pact they are asking the judges to consider performance, usability, accessibility, ease of configuration and customization, scalability, security and community contribution. We believe that these are the elements that make up a fantastic CMS and MODx rocks on all these elements.

You can vote MODx as best overall CMS and best PHP CMS til 11th September and the links to do it are below. MODx will be automatically chosen and you just need to enter your name, email address and click “Nominate” - takes 10 seconds and it’s worth of the time as MODx really deservs wider recognition as best CMS.

Nominate MODx as best overall CMS 2009 & nominate MODx as best PHP CMS 2009.

Edit: Pact Open Source CMS Award Finalists

Overall Award Finalists:

1. DotNetNuke
2. MODx
3. SilverStripe
4. WordPress
5. XOOPS

Best Open Source PHP CMS Finalists:

1. Drupal
2. Joomla!
3. MODx
4. TYPOlight
5. WordPress

Please, vote for MODx in final now!
http://www.packtpub.com/overall-open-source-cms-award-finalists
http://www.packtpub.com/best-open-source-php-cms-finalists

Importance of detailed written planning of web development projects.

Web development error fixing cost vs timeDetailed planning is most important. Every singe functionality that you want to see in website should be defined beforehand as the cost of developing it is cheapest before development starts and the price increases when development has begun as it was not planned by programmers when they decided how to build database, what frameworks / ready scripts to use, what technologies to use etc. Once the development has finished the price increases even more as time passes programmers forget the exact structure of the code as they start dealing with other projects.

Risks to fail

Web functionality development risksThere are always risks that project fails in certain amount. In worst scenario it’s not possible to deliver but in most cases deliverable doesn’t satisfy 100%. Most of the risks are eliminated by proper planning. If everything that is required is written down before coding starts then most of the risks are eliminated.

After planning comes communication. As programmers tend to speak more tech savvy language and customer often isn’t able to define properly his/her needs many requirements are not understood or are understood wrong.

If everything is planned properly and made properly clear between each other then there’s left quite a small amount of risk for process of programming and common sense.

Why MODx is best content management system?

MODx Web 2.0 CMS and frameworkThere are thousands of open source different content management systems around the web, I have used more than ten different CMS systems mainly Drupal, Wordpress (great for blogging but can be also used for CMS) and Joomla but sice I found MODx two years ago I never use any other CMS if customer doesn’t want for sure use something else.

So, why it’s so much better than others? It’s SEO CMS!

Most important thing for us as internet marketing specialists is that none of other CMS’s aren’t really grasped in depth with search engine optimisation issues and MODx seems to be the first one taking it seriously. It has built in search engine friendly URLs so it takes less than a minute to have pretty URL’s that search engines will love. There is automatic (Google) Sitemap XML generator snippet that will update Sitemap XML automatically when you make any changes and URL normalization (canonicalization)  plugin that will enforce the use of unique URLs for every document to prevent duplicate content that can result beeing penaltised by some search engines. MODx has strong W3C web standards support enabling developers to build XHTML 1.0 Strict websites just as easily as coping the code from one place to another as it doesn’t have any templating engines, confusing layout rules or defined blocks like for example Joomla has. And you can edit highly customized META content of every page separatelly.

It’s fast!

MODx vs Drupal or even more MODx vs Joomla will bring into my mind also speed issue. It has powerful caching of all pages and there’s even no need to run speed test to understant that same website at same server loads way faster when it’s built on MODx (test gave average 0,03KB per second ) rather than Joomla as the slowest (0,11KB per second) or on Drupal (0,05KB per second).

Easy to use!

It’s easy to use! Just test drive it here or see screenshots - you just have your whole content on the left side visually apealling Ajax document tree logically structured exactly depending on customer’s needs. Just click on the pages you want to edit and you have different areas of your webpage different TinyMCE rich text editor editable.

Developer friendly = short deadlines and cheap development prices for customer.

And it’s also great and really easy to use for developers and advanced users. MODx as framework gives developer as much control as needed and has API and dbAPI, developers can build with ease any custom solutions with MODx. To customer it gives ability to get fast and cheap complex very dynamic solutions not just standard CMS with one main editable area + menu.

MODx started at 2004 by Raymond Irving, Ryan Thrash and Jason Coward and soon will be launching MODx version 1 called Revolution. MODx is winner of the 2007 Most Promosing Open Source CMS Award.

It’s good to be MODx developer - only positive suprises since we started developing our projects on MODx.