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

SOPA: What Is It & Why It’s Important

By - Posted under: News, Web on December 28, 2011

Have you heard of SOPA before? If you haven’t, then its time to sit up and pay attention.

This is important, not only for companies with businesses online or web developers, but also for consumers and regular internet users alike. In this article we will explain what is SOPA and the impact it can cause in a long term basis.

SOPA, which stands for Stop Online Piracy Act, is a bill tabled by US Senate together with PIPA, Protect IP Act.

Here’s what the government can do to foreign websites under even the most narrow reading of SOPA section 102 and PIPA section 3:

  1. Order internet service providers to alter their DNS servers from resolving the domain names of websites in foreign countries that host illegal copies of videos, songs, and photos.
  2. Order search engines like Google to modify search results to exclude foreign websites that host illegally copied material.
  3. Order payment providers like PayPal to shut down the payment accounts of foreign websites that host illegally copied material.
  4. Order ad services like Google’s AdSense to refuse any ads or payment from foreign sites that host illegally copied content.

Under SOPA, IP rights holders can proceed vigilante-style against allegedly offending sites, without any court hearing or any judicial intervention or oversight whatsoever. For example, SOPA establishes a scheme under which an IP rights holder need only notify credit card companies of the facts supporting its “good faith belief” that an identified Internet site is “primarily designed or operated for the purpose of” infringement. The recipients of that notice will then have five days to cease doing business with the specified site by taking “technically feasible and reasonable” steps to prevent it “from completing payment transactions” with customers. And all of this occurs based upon a notice delivered by the rights holder, which no neutral third party has even looked at, let alone adjudicated on the merits. If they get the assistance of a court, IP owners can also prevent other companies from “making available advertisements” to the site, and the government can prevent search engines from pointing to that site.

So how does a website get blocked under SOPA? The answer is a frightening “if your website has a few links that link to infringing websites, you are subject to the law and you will be blocked”. What’s more scarier than that is once they found out you are providing even just ONE infringing links, and you won’t be aware even if a complaint has been made. One comment from an unknown user is enough to get your website blocked, or even the whole domain. If you use any online services for backup or work related issues, you don’t even have to infringe any copyright material because if someone else do, the whole website will be shutdown.

The SOPA is an American law, but China, Syria and Iran has started long ago on Internet censorship. But once it is passed in USA, very soon other countries will follow suit and adopt it as the new Internet standard.

In summary, let me explain SOPA in a metaphoric manner: there is a DVD shop selling pirated movies in Tokyo city. The U.S government wants to destroy the roads, walkway, tunnels, and pedestrian crossing surrounding the DVD shop (but left the DVD shop untouched) to prevent American citizens from visiting the DVD shop.

Internet has been booming for many years, and many businesses, including many start-ups, manage to stay afloat or make an in-road to their demographic because of the freedom in Internet. Once this freedom is removed, Internet will not become what we know it because censorship will be happening all around the world.

We believe that SOPA should not even exist. Yes, the infringement on copyright material is a serious issue, and we do not encourage it. What we want is something to be done that won’t censor the Internet.

References:


Page 1 of 212