The hover effect or "mouse over" back in the early days is quite common in websites these days. Unfortunately it's one of those bad habits that harm the user experience. I guess in a few years we'll be laughing at hovers, like we now laugh at frames and tables. 

 

Touch is here to stay

As we speak about 200,000 touch screen devices are purchased in the US alone every day. This includes Android smartphones, iPhone and the iPad. You can easily imagine that in a couple of years touch screens will be the norm and mouse based interfaces will be considered "business tools". Instead of creating multiple versions of your web application why not consider getting rid of mouse-only features ?

 

Even if people continue to use computers at the same rate as they do today in the future, and even if you don't plan to deploy your application on mobile devices you still need to forget about the hover. The average user will soon forget that you can expect something to come out if you place your cursor in a link. The reason is that users won't be running into hovers on the majority of devices (and the most part of their browsing time).

 

Drop down menus

This is one of the major annoyances in the web for quite some years now. When evolutions in CSS popularized the use of drop down menus, a lot of designers tried to imitate the behavior of desktop applications. Unfortunately they forgot a very important aspect of desktop-like menus. Once you click, they stick! The sudden disappearance of sub-menus made surfing an adventure since users were expected to hunt menus around the page. Have a look at this great study on the topic: Users Decide First; Move Second

The iceberg effect: only one ninth of the iceberg is visible from the surface

 

If it's not visible it doesn't exist

From time to time I've happen to surf Facebook with a friend or two. The majority of people I know are not aware of the additional options when hovering over some areas of the page. This is not a surprise as hover destroys the principle of what you see is what you get.

 

Can you imagine a car or a cd-player with hidden options ? I guess not. Then why should we design web interfaces that way ? Can we realistically expect people to scan the whole screen with the mouse, just in case the designer had the idea to hide some elements ? Most people have a quick look at the page and if something doesn't appear there they just assume it doesn't exist. Of course they are right to think so. Nothing else requires you to imagine where parts of it's functionality are hidden but the web of today.

 

Organize information the smart way

The best way to de-clutter an interface and therefore avoid the need for hiding things, is to organize information in a human friendly manner. If you build your information structure in a simple and efficient way, everything can be "hidden" in the next page. The best example I can think off is the apple homepage.

Apple is a multinational company selling a huge variety of products and services, from smartphones and mp3 players to business server operating systems. Yet, in the main menu of apple.com website there are only seven options plus the link to the home page. Let's take the "Mac" section for example. Instead of having a drop down menu with sub-options like MacBook, MacBook Air, iMac and so on, you are given these options only once you are taken to the "Mac" section. Each page has as few options as possible, yet you never feel that something is missing.

Apple.com's main menu: Only seven options in a website with a vast amount of information 

Use "click and drop"

This is a relatively new technique to the web. When you click on a button, you are presented with some options regarding your further actions. This is a great way to hide things like advanced search options. In the picture on the right you see an implementation in the main menu of startupdonut.co.uk.

 

In this case, a user with a touch screen device can navigate as good as the mouse users and all the extra options are well hidden until you click topics button. An excellent use of the "click and drop" technique is anywhere you need filtering. For example, search results, viewing a list of products or like in our example, viewing blog posts tags.

 

Clicking "topics" on the main menu of startupdonut.co.uk opens up the list of tags

Don't forget lightbox

Lightbox is a nice solution when you want to give some information to the user quickly without sending him to another page. By clicking on a button you display a box on top of the page which can be an image, some HTML, or an iframe. You can use lightboxes for things like displaying notifications, showing the terms of use in a registration page, giving the user a quick preview of a shopping cart or for zooming images in a gallery. In the example on the right you can see the way facebook implemented it for sending a quick message.

 

The most common implementation of lightbox: Sending a message on facebook

I've made some new additions to Mainframe over the last couple of months so I guess it's time for another release.

 

Changelog:

• New: More classes for messages.
• New: All the templates from the 960.gs in a /resources folder
• New: A great tutorial to help you get started
• Updated: Updated the demo page
• Fixed: Some bug fixes for Chrome

 

 

Content Delivery Networks are one of the latest trends on the web. The idea is simple. Instead of having a single server in a central location, place lots of servers of smaller capacity in a variety of locations. This allows you to avoid bottleneck and reduce delivery times.

 

 

Some major web companies (most notably Google and Microsoft) have started offering public CDN services to open source projects. A lot of developers advise to use public CDNs in your websites to serve javascript libraries like jQuery and Prototype. Before you make haste to take advantage of this new trend keep the following in mind.

 

Your websites will be depending on the CDN

Although CDN providers have an advanced infrastructure and are generally considered very reliable, they cannot guarantee 100% availability. In fact even commercial CDNs cannot do that. Given the fact that we are talking about free services here there will be times when the CDN will be offline. If the CDN goes offline so do you.

 

You are as slow as your slowest part

If a CDN is performing at high speeds then everything will be ok. However consider the following example. If a page from your application takes 4 seconds to load and a javascript library takes 6 seconds to load from the CDN then the loading time for the user is 6 seconds. So while a CDN is often used to offload a site and increase loading speed it may result in the opposite if it's not in the peak of it's performance.

 

The client will have to open a connection to a second domain instead of using the already existing connection to your one. Also the client will be forced to make a second DNS lookup to determine the CDNs IP. 

 

Unsuitable for intranet applications

If you are developing a web-based intranet application then using a CDN will reduce performance. Instead of loading the files from a central location within your Ethernet based network you will be loading them from a much slower internet connection. Also your application will become dependent on your internet connection, therefore disabling the biggest advantage an intranet applications.

 

Offline development becomes painful

There may be times when you'll have to develop your application offline for a variety of reasons. Whenever you go offline you must change you code to temporary use local files. This can be a real pain depending on the structure of your application. 

 

JavaScript is cached anyway

JavaScript files are cached by the client's browser. The only real benefit of using a CDN is for first time users. Are you willing to take the CDN risk just for the chance of increased speed on the single first pageview? I guess that depends a lot on your bounce rate but you get the point.

My latest experiment. A redesign of my website using a literature magazine as a source of inspiration. The idea came to me while I was reading this magazine in a local cafe.I thought that the newspaper and magazine industries have been existing for decades now. Thousands of talented people have evolved the science of text layout in printed media. The web is not very different from that. If you think about it, both the web and printed press give you a flat surface where text is displayed.

 

What I see all over the web is a lot of people trying to create a great layout for their website or blog. I don't recall seeing anyone looking back in the past. This has been done over and over before. Why reinvent the wheel ?

 

I used a two column layout to achieve better readability. Mainframe CSS framework handled the layout through the 960 grid system. On the server side, I moved from Drupal to a custom made system based on CodeIgniter which will power all the websites I'll build from now on.

The inspiration

 

 

 

The result

 

 

 

After some real testing on real production websites I've made some fixes and a few additions to the Mainframe CSS framework. What is it ? Read the release post for a bit more information here.

 

Changelog:

• New: The .hidden class
• New: Photoshop PSD & PNG templates for the fixed versions of the layout
• New: Documentation & changelog
• Updated: Updated the demo page
• Fixed: Some bug fixes with strong tag & cleaners
• Fixed: Lists were not showing up correctly (reset bug)

 

Please note that I'd love to have some feedback on this. My gmail is bibakisv@... Don't hesitate to drop me a line with your observations and ideas.

One of the biggest challenges in web development is making multilingual websites. The easy part is having common functionality across all available versions. The hard part is making sure you don't have blank spots. And that means that if you got an English-French website, you shouldn't have French words appearing in the English version and vice versa.

 

 

The oldest solution I can remember used in PHP is the use of constants. For example instead of writing Home page in your HTML, you write __HOME_PAGE__. Then you got a file for every language with constants that you include in every "visible" PHP script. An if block takes care of including the proper constants file for the currently active language. The major problem of this technique is that if something is left untranslated you get ugly __CONSTANTS__ all over the place. There are few things that can make a website look more amateur.

 

In CodeIgniter there is the language class that takes care of this issue. Instead of using constants you simply do $this->lang->line('Home page') to get the translation for the words Home page. Then you got files in the "application/language" folder with all the translatable items.The problem with this approach is that when something is left untranslated you don't know how to find it easily.

 

I recently took over a multilingual e-shop platform project for an agency. A great friend and colleague there came up with a solution for this which is to extend the language class and add the ability to the line method to add marks before and after a string in case there is no translation available. For example Home page becomes !-- Home page --!.

 

Although this time we are more organized and flexible since we can for example enable/disable/customize the !-- --! marks you will notice that practically we are still in the footprints of the ugly constants trick. We still get !-- Ugly --! stuff in our website in case a translation is forgotten. The worst part is that we still have to scan the entire site by hand and hunt down every little !-- untranslated word --!.

 

To overcome all of the above problems there are two simple things we can do. The first one is to add semantics to all strings we want to translate. This way Home page is different from home page and we can ease the guy/girl translating our content who won't have to figure out when a word starts a sentence or not.

The tower of babel

 

The best part is that we can have all the items we want to translate gathered automatically without the need for spot marks (!-- --!). To achieve this you need to follow these steps

 

1. Create a simple two column table in the database called translations (id INT, item VARCHAR 1024)
2. When the line method of the language class finds an item that doesn't have a translation available make a check to see if this item is stored in the translations table.
3. If it is not stored then create a line with the exact text you use in your language files. In our case this is $lang['Home page'] = '';
   Insert this line in the translations table.
4. Create two pages. One called something like 'translations' and another called 'translations_clear'. The translations page should run a simple select query to get all the items and just display them in the browser. The translations_clear page should just empty the translations table.
5. Run a spider against your page to make sure all links are visited. Any decent offline browser should do the trick. Windows users can use Httrack and linux users wget.
6. Visit the translations page after the spider is done. You will get a page with all the items inside an array ready to be translated. Simply copy the entire page to your language file and start translating.

This way you can have web pages that are translated in one step, right before you fire your FTP client for the final upload. Also when something is added later but is not translated you won't get __UGLY__ stuff in your page. You don't have to use CodeIgniter to use this technique. All it takes is that you use a function to fetch the translated items.

One of the problems that came up with the rising dependency on Google and SEO in general is the use of www. On the one hand there is no reason to use www anymore. 100% of modern browsers use the HTTP protocol by default so you don't need to specify that you need to access the web part of a domain. It makes your site's address larger and harder to remember, more ugly, less likely to fit alongside a logo. Also many suspect that it has an effect on your keyword density, therefore harming your search engine rank just a little bit.

 

On the other hand most of the users still keep the old habit of typing www.site.com in the address bar. I try to redirect to the "clean" version of the domain on all my sites. Even if the user uses the www he's not harmed at all.

 

 

In fact most of the times nobody even notices. One way or another there is a solution to this. Whether you want to get rid of that 90s annoyance or you want to keep your domain a classic www there is an easy way to do this in codeigniter.

$hook['post_controller_constructor'][] = array(
 'class'    => 'Utils_hook',
 'function' => 'redirect_to_base',
 'filename' => 'utils_hook.php',
 'filepath' => 'hooks'
);

Class Utils_hook {
 function redirect_to_base(){
  $ci = & get_instance();
  $uri = $ci->uri->uri_string();
  // recreates the URL
  $location = substr(base_url(),0,strlen(base_url())-1).$uri;
  
  $active_base_url = 'http://'.$_SERVER['SERVER_NAME'].'/';
  
  if (($active_base_url != base_url()) && ($_SERVER['SERVER_ADDR'] != '127.0.0.1')){
   Header( "HTTP/1.1 301 Moved Permanently" );
   Header( "Location: $location" );
  }
 } 
}

I just completed an early version of a CSS framework which I think can ease a lot of the pain in modern web design. It's name is Mainframe.

 

The key features are

 

• CSS reset: all things are reset to what should be the "defaults". This includes fonts, borders, margin, padding and others.
• Some Internet Explorer specific CSS bugs and annoyances are fixed
• Mainframe uses "spacers". Clear classes with a bottom margin. Very convenient
• Some classes you can use to display errors, warnings and information boxes in a stylish way. I call these "AJAX helpers" because that's what I use them for.
• 3 predefined containers for your content. 12 columns at 960px, 16 columns at 960px and a fluid one at 100% of the page width. PSD files for graphic designers are under development.
• The 960 grid system.
• It is free to use and modify under the terms of the Creative Commons Attribution-Share Alike 3.0 Unported License.

 

Mainframe uses code from YUI Grids CSS & the 960 Grid System.

One of the most annoying stuff for CodeIgniter developers is having to include a header/footer/etc part in each and every view. CodeIgniter out of the box does not include template support (in the sence of a Joomla template or Wordpress theme). I have created a small library to assist you in using "templates" in CodeIgniter.

$this->load->template('template_name', $data); 
$this->load->view('view_name', $data);