Comparing Using the Right Matrix

By - Posted under: Branding, Design, Guide, Web on March 28, 2013
20130319-044404.jpg

In a business world where the customer is paying for a service, it is inevitable that a comparison will be done based on value, quality of service, scope of service, and most importantly, price. Unfortunately, a lot of people are comparing only the prices, and normally they will go for the medium to low range as they feel that it is the easiest thing to do.

Find out more →

5 Things to Consider When Developing a Mobile Website

By - Posted under: Design, Web on January 27, 2012

Do you incorporate a web tracking for your website? Have you looked at the traffic data recently and investigated how many percent of your web traffic is from mobile devices? If the answers are a resounding NO, we highly recommend Google Analytic, a free web-based tracking application, and start analyzing the traffic to your website.

IDC reported that in 2010 the shipment of smartphone worldwide was 302.6 million units. Then, according to Facebook, there are 350 million users actively using mobile apps (such as Facebook for iOS and Android devices). Chances are that these 350 million users are using their mobile devices to browse the Internet too. During the Christmas 2011 period, there were 6.8 million iOS and Android devices being activated, an increase of 353%.

I am not sure about you, but boy, I think that is a huge number and we should cater to people using mobile devices. Approximately 20% to 30% of the traffic to our website, including the blog, are from mobile devices. Furthermore, we don’t want to ignore the mobile device users because who knows? They might turn out to be our customers. Hence we place a high priority on mobile devices accessibility.

If you haven’t started thinking on mobile website, it is time to start now to better provide accessibility to your visitors browsing through your website on a mobile device. You definitely don’t want to lose any potential customers just because they are using mobile devices. But before you embark on doing and/or start converting your existing website to work on mobile devices, there are 5 things that you will need to consider:

[Note: By mobile devices we are referring to smartphones such as iPhone, Android phones, Blackberries and etc. iPad and other tablet are excluded and will be labeled Tablet.]

#1: Provide More Space

Mobile devices have smaller screen property. A typical smartphone has 3.5 inch to 4.7 inch screen size, so visibility can be an issue. Thus spacing between element is important because if they are not generously spaced, then the whole website will look cramp and viewing on such a small screen will be extremely difficult.

20120116-152612.jpg[snapshot of our website when view on iPhone]

20120116-152619.jpg[snapshot of our website when view on iPhone]

The screenshot above is from our blog and website when viewed on iPhone (3GS, if you must know). Notice the space in between to make reading easier and the visitor can find the information they are looking for.

#2: Resize Everything!

Your website has a 1024 x 768 pixel picture that your are proud of. Furthermore it has a slider to display your products and services and that plays a pivotal role in attracting the attention of your visitors.

That’s great. But it won’t work on mobile devices. As mentioned before, mobile devices have smaller screen size compare to the laptop, netbook, tablet or desktop, so if the image or element is too big then there will be a lot of scrolling involved.

To make things easier to read and more user friendly on small screen, resize the elements or pictures that will fit the screen. If you go to our website main page on a mobile device, you will notice that the jQuery slider will automatically resized to fit a mobile device screen. Furthermore, the navigation menu on top will be resized as well.

Another good example will be the Verge website. When view on mobile devices, the pictures, div and etc are all resized and designed to fit the screen, as shown below.

20120116-152630.jpg

#3: Easy Navigation!

Think of navigation menu, like the one on top that provide links to different part of the website. On an ordinary website, the menu can be horizontal, taking up the whole screen, or some flashy Javascript or Flash menu. When you use this kind of navigation menu, it will be cramped when viewing on a mobile phone, or it won’t work at all.

If you look at the Verge mobile website (as shown below), you will notice that the navigation menu is big and stacked vertically to maximize the viewing area of the screen of the smartphones. We recommend that fancy menu be scaled down to provide clear label so that visitors can navigate on the mobile website easily.

20120116-152636.jpg

A “Back” button is easy to understand: everyone knows what is a back button, so there is very less chance of confusing your visitors and reducing the chances of the visitors being lost at the maze if the website.

#4: Focused Content

For a full sized browsers, you can have many elements on the screen, with sidebar, or even 2 sidebars. The main aim is to show off the design and also provide more information to the visitors. But for mobile devices, you need to rethink on the layout. The rule of thumb is: show the focused content to your visitors, and arrange the other information at the bottom so that visitors can find the information that they are looking for easily.

Some might recommend to hide the information that is less important, but I think we shouldn’t assume what the visitors are looking for. Maybe the information of the sidebar will provide the visitors the information that they are looking for and making them your customers.

20120120-025502.jpg

20120120-025510.jpg

If you need to remember one thing about this, just remember this: vertical scroll. Stack your content vertically and place your most important content all the way at the top.

#5: Branding! Don’t forget about that!

This is applicable for everything that you do, including your corporate identification and your brand image. Fitting your website onto a mobile device with a small screen size doesn’t mean that you will need to sacrifice your branding.

A good example will be Burberry website. When you browse Burberry website on a mobile device, they don’t lose their branding. It is still beautiful and speaks loudly about the Burberry brand.

You can compromise many things in order for the mobile website to work, but never ever compromise on your branding.

20120116-152651.jpg

20120116-152712.jpg

This is a long post, and since you have been reading until here and also we are still in the Chinese New Year spirit, I will throw in a bonus.

#6: Oops! Honey, I shrunk the site!

Since you are shrinking your website, remember to shrink the other important thing: file size.

We believe that any website shouldn’t be bogged down with large file size. It is ridiculous to ask the visitors to load a 50MB files just to see a page. It is wasting a lot of bandwidth and even on a broadband, it will take quite some time to load. It is highly recommend that a website should load (almost) instantly. Most importantly, most mobile devices browse the Internet by using their mobile data plan. So when you are designing a mobile website, it is important to consider the file size and design it for lower bandwidth consumption.

Also, it is advised not to use Flash for the website. For slower laptop, Flash will actually take up a lot of resources and it won’t work on iOS devices. Instead, consider using HTML5!

So there you have it, the 5 things (6, actually) you need to know when designing your website for mobile devices. Happy coding!

If you have a question or need help with website design or just want to chat, do drop us a call or email us.

Why You Should Invest in HTML5

By - Posted under: Design, Web, Web App on January 3, 2012

Many people still haven’t updated their website to HTML5. Reasons are aplenty, such as it is still pretty new, Internet Explorer (IE) is still not supporting it, it’s a huge cost to convert the existing website to HTML5, HTML5 is a myth and it’s not working, HTML5 is not adopted worldwide yet, and etc.

But there are plenty of good reasons to start implementing HTML5. This is not only aimed at web developer or web designers, because businesses with an online presence should think of their long term strategy for their web as well.

Below are the 10 reasons to change your web to HTML5 or to start using HTML5.

Reason #10: Accessibility
HTML5 makes creating accessible sites easier for two main reasons: semantics and ARIA. The new (some currently available) HTML headings like <header>, <footer>, <nav>, <section>, <aside>, etc. allow screen readers to easily access content. Before, your screen readers had no way to determine what a given <div> was even if you assigned it an ID or Class. With new semantic tags screen readers can better examine the HTML document and create a better experience for those who use them.

ARIA is a W3C spec that is mainly used to assign specific “roles” to elements in an HTML document – essentially creating important landmarks on the page: header, footer, navigation or article, via role attributes. This has been well overlooked and widely under-used mostly due to the fact that it wasn’t valid, however, HTML5 will validate these attributes. Also, HTML5 will have built in roles that can’t be over-ridden making assigning roles a no brainer.

Reason #9: Video and Audio Support
Forget about Flash Player and other third party media players, make your videos and audio truly accessible with the new HTML5 <video> and <audio> tags. Getting your media to play correctly has always been pretty much a nightmare, you had to use the <embed> and <object> tags and assign a huge list of parameters just to get the thing visible and working correctly. Your media tags just become these nasty, huge chunks of confusing code segments. HTML5′s video and audio tags basically treat them as images; <video src=”url”/>. But what about all those parameters like height, width and autoplay? No worries my good man, just define those attributes in the tag just like any other HTML element: <video src=”url” width=”640px” height=”380px” autoplay/>.

It’s actually that dead simple, however because old evil browsers out there don’t like our HTML5 friend, you’ll need to add a little bit more code to get them working correctly… but this code isn’t nearly as gnarly and messy as the <object> and <embed> tags:

<video poster=”myvideo.jpg” controls>
<source src=”myvideo.m4v” type=”video/mp4″ />
<source src=”myvideo.ogg” type=”video/ogg” />
<embed src=”/to/my/video/player”></embed>
</video>

Reason #8: Doctype
<!DOCTYPE html>
Yup that’s it, that is the doctype, nothing more, nothing less. Pretty simple right? No more cutting and pasting some long unreadable line of code and no more dirty head tags filled with doctype attributes. You can simply and easily type it out and be happy. The really great thing about it though, beyond the simplicity, is that it works in every browser clear back to the dreaded IE6.

Another example to show how HTML5 has a much cleaner and simple code is this: the reference link code for stylesheet in HTML4.01 needed to be defined for “type” (in this case, text/css), and the code looks like this:
<link rel=”stylesheet” type=”text/css” href=”css/style.css” />

With HTML5, the code is clean and simple:
<link rel=”stylesheet” href=”css/style.css” />

There is no need to define the “type” anymore in HTML5 because when the “rel” is defined for “stylesheet”, it is understood that it is “text/css” type.

Yup, that’s it!

Reason #7: Cleaner Code
If you are passionate about simple, elegant, easy to read code then HTML5 is the beast for you. HTML5 allows you to write clear and descriptive code, semantic code that allows you to easily separate meaning from style and content. Consider this typical and simple header code with navigation:

<div id=”header”>
<h1>Header Text</h1>
<div id=”nav”>
<ul>
<li><a href=”#”>Link</a></li>
<li><a href=”#”>Link</a></li>
<li><a href=”#”>Link</a></li>
</ul>
</div>
</div>

So this code is pretty clean and simple? But with HTML5 you can clean this up even more and at the same time give your markup more meaning:

<header>
<h1>Header Text</h1>
<nav>
<ul>
<li><a href=”#”>Link</a></li>
<li><a href=”#”>Link</a></li>
<li><a href=”#”>Link</a></li>
</ul>
</nav>
</header>

With HTML5 you can finally cure your “divitis” and “classitis” by using semantic and HTML headers to describe your content. Previously you would generally just use div’s for every block of content than drop an id or class on it to describe its content but with the new <section>, <article>, <header>, <footer>, <aside> and <nav> tags, HTML5 allows you to code your markup cleaner as well as keep your CSS better organized and happier.

Reason #6: Smarter Storage
One of the coolest things about HTML5 is the new local storage feature. It’s a little bit of a cross between regular old cookies and a client-side database. It’s better than cookies because it allows for storage across multiple windows, it has better security and performance and data will persist even after the browser is closed. Because it’s essentially a client side data base you don’t have to worry about the user deleting cookies and it is been adopted by all the popular browsers.

Local storage is great for many things, but it’s one of HTML5 tools that are making web apps possible without third party plugins. Being able to store data in the user’s browser allows you to easily create those app features like: storing user information, the ability to cache data, and the ability to load the user’s previous application state. If you are interested in getting started with local storage, check out Christian Heilmann’s great 24 Ways article from last year — Wrapping Things Nicely with HTML5 Local Storage.

Reason #5: Better Interactions
We all want better interactions, we all want a more dynamic website that responds to the user and allows the user to enjoy/interact your content instead of just look at it. Enter <canvas>, the drawing HTML5 tag that allows you to do most (if not more) interactive and animated possibilities than the previous rich internet application platforms like Flash.

Beyond <canvas>, HTML5 also comes with a slew of great APIs that allow you to build a better user experience and a beefier, more dynamic web application — here’s a quick list of native APIs:

Drag and Drop (DnD)
Offline storage database
Browser history management
document editing
Timed media playback

Reason #4: Game Development
Yup, that is correct, you can develop games using HTML5′s <canvas> tag. HTML5 provides a great, mobile friendly way to develop fun, interactive games. Furthermore, Zynga, one of the largest game developer for Facebook with popular title such as Farmville, has announced that they are porting their games to HTML5.

If you’ve built Flash games before, you’ll love building HTML5 games.

Reason #3: Legacy/Cross Browser Support
Cross browser compatibility is always the biggest nightmare for website designer. The modern, popular browsers all support HTML5 (Chrome, Firefox, Safari, IE9 and Opera) and the HTML5 doctype was created so that all browsers, even the really old and annoying ones, er, IE6 can use it. But just because old browsers recognize the doctype that doesn’t mean they can use all the new HTML5 tags and goodies. Fortunately, HTML5 is being built to make things easier and more cross browser friendly so in those older IE browsers that don’t like the new tags we can just simply add a Javascript shiv that will allow them to use the new elements:

<!–[if lt IE 9]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>

Reason #2: Mobile, Mobile, Mobile
The adoption of mobile devices continues to grow very rapidly and this means that more and more users will be using their mobile browsers to view your web site or application. HTML5 is the most mobile ready tool for developing mobile sites and apps. With Adobe announcing the death of mobile Flash, you will now count on HTML5 to do your mobile web application development.

Mobile browsers have fully adopted HTML5 so creating mobile ready projects is as easy as designing and constructing for their smaller touch screen displays — hence the popularity of Responsive Design. There are some great meta tags that also allow you to optimize for mobile:

Viewport: allows you to define viewport widths and zoom settings
Full screen browsing: IOS specific values that allow Apple devices to display in full screen mode

Home Screen Icons: like favicons on desktop, these icons are used to add favorites to the home screen of an IOS and Android mobile device

Reason #1: It’s the Future!
The number one reason why you should start using HTML5 today is this: it’s the future, start using it now so you don’t get left behind. HTML5 is not going anywhere and as more and more elements get adopted more and more companies will start to develop in HTML5. HTML5 is essentially just HTML, it’s not scary, it’s not anything you really need to figure out or relearn — if you’re developing XHTML strict right now you are already developing in HTML5 so why not take full advantage of it’s current capability?

At Zymora, we have adopted HTML5 for quite some time, and the number 1 reason why we love HTML5 is the fact that the code is cleaner and easier. If we need to make one change on the HTML code, we used to spend hours and hours finding it and making sure that it works. Now, with HTML5, we could find the code easily

iPod Turned 10 and What Does It Got to do with Web Design?

By - Posted under: Design, News, Web on October 24, 2011

Original iPod

Exactly 10 years ago today, Apple Inc. introduced the iPod. It wasn’t the music player that had the largest capacity. It wasn’t the music player that offered the best music quality available. But it was the music player the revolutionized the music industry.

How did Apple do it?

It was the design. It offered what others didn’t offer.

For example, the Creative Labs Nomad was better as it had bigger capacity, and it offered great sound quality. But it was huge, chunky, and got too many buttons and options. And then there was Sony which was pushing hard for the MD format, where users had to download the music, insert the MD drive into the PC, synchronize the music, insert the MD drive into the music player, and again, there were many fancy functions.

What Apple did was the complete opposite. It offered very simple design, simple functionality, and offered iTunes to provide “one-stop” music purchase and synchronization. Want to play music? Press one button. Want to select different track? Scroll the wheel. And then people caught on because of how iPod was beautifully made and offer seamless and simple music purchase and listening experience. It became a big hit, and online music store started to boom.

So how do we translate that into our daily life? How do we translate that into web application?

Functionality

A visitor that comes to the website need not select so many options. As a designer, our main aim is to provide the simplest navigation experience that we can offer, without users clicking pass some secret code to find the information that they are looking for. It is technically cool to offer a website that offer functions such as background color, music track, different elements, and etc. But the million dollar question is: do the visitors need this? Most often than not, they don’t. Making it too fancy will actually make them feel visually impaired.

It is extremely important to know what are the main function of the website. Is it to promote a product or service or is it function to provide information of the product or service? Is it function to provide video or music, or is it function to provide news about the video or music?

Once the main function of the website is defined, then it will be easier to start designing the website as we will know what we should include (features) into the website and how the design should flow.

Simplicity

Like functionality, we should offer a simple yet elegant website design that offer easy to find information. For example, the menu must be clearly labelled for the sake of easy navigation.

Less is more – Robert Browning (1812 – 1899)

If we look at Apple product, for instance, we see the iPhone that offer less buttons. In fact, they removed the keypad, they removed the call or end call buttons. All they got was the big home button at the bottom.

Some websites cramp all the information into main page, or some show very little information and users have to click through many links to find out what they are looking for. The ideal way is that on the main page, when the visitors scroll from top to bottom, they already have an idea what the website is about and what kind of information they can expect.

Features

As for features, that’s always a struggle in terms of web design. But we have to draw a clear line that features do not equal to functions. A website can have many features that offer the visitors a unique browsing experience, but having too many functions will spoil the visitors browsing experience.

It is important to remember the distinction between product functions and product features.  Functions are the “product’s answer to the set of user tasks”; features are the “user tools” inherent in the product used to perform the functions (Wood, 1995).  Placing a telephone call is a function; the dial tone and the touch-tone keypad are features used to accomplish the function.

So we need to distinguish the difference between a function and a feature. Once we get that out of the way, we will be able to provide specific one or two functions but with many features.


Page 1 of 212