12 HTML5 Powered E-commerce Sites for Your Inspiration

, , ,

For years, online purchase is an important part of our life. E-commerce merchants are always dedicated to making their websites with attractive visual effects and user experience. To achieve this, many web developers and designers turn to apply HTML5 to their commercial projects.

ecommerce-website- title

What does HTML5 bring to E-commerce Websites?

HTML5, the new language of the internet, brings about lot of revolutionary change to the web development world. It aims to providing native browser support for video, audio, and new forms of user interaction without the third party plug-ins.

With those new features of cleaner, simpler, consistent and easy coding, HTML5 has great impacts on E-commerce websites. It brings to websites with canvas drawing, faster data storage, native slider controls, video support with interactive text, geolocation, improved drag and drop, etc. All these help to make your online store more appealing with better usability and accessible for customers quicker and easier.

The HTML5 powered E-commerce websites are also supported by iPhone, iPad and other mobiles where Flash E-commerce websites cannot reach. Therefore, you may also consider using HTML5 on your site if mobile is a big part of your e-commerce strategy.

Showcase of 12 E-commerce Websites Using HTML5

Here, I’ve compiled 12 e-commerce sites powered by HTML5 for your inspiration. These search engine friendly online stores implement the HTML5 with CSS and JavaScript to richen the layout, images transition effects and etc. The attractive designs bring customers a fascinating user experience. Ok, it’s your time to explore the code for an insight into HTML5 powered e-commerce website. Enjoy browsing!

1.   Get plenty

ecommerce-website-1

Plenty is a web store selling jeans, clothing and accessories for men and women. Based on HTML5 structure and CSS3, Plenty store features a simple design with big photography slideshow. It takes a great usage of the HTML5 tags of <header>, <article>, <nav>, etc.

2.   901

ecommerce-website-2

By Sophie  May 18, 2012

Web Navigation Design: Tips and Examples to Better Usability

, , , , , ,

Website navigation is a key element to help visitors browse your site easily. As the gateway to different areas within your website, navigation design should give users a sense of orientation. Having an effective navigation design with perfect functionality will make the website easy to navigate, as well as ensure visitors a better user experience.

website-navigation-title

There are various ways to present your website navigation options. Types including top horizontal bar navigation, vertical bar/sidebar navigation, tabs navigation, breadcrumb navigation, tags navigation, search navigation, drop-down menu/ fly-out menu navigation, footer navigation and etc are all common use navigation designs. Whatever type you use, your navigation design should be eye-catching and aim to leading users to what they are looking for. In this case, you need to follow some rules while designing your website navigation.

5 Tips of Effective Website Navigation Design

As the roadmap to guide website visitors, website navigation design plays a crucial part in influencing the viewer’s preference. So how do you ensure that your users are able to quickly and easily find the information they need? Here are 5 tips to follow to design your website navigation effectively.

Keep it simple

If your website has a large amount of content, visitors are easy to get stuck. To avoid such confusion, the website navigation should be clean and straightforward for users to find information they want fast. In this case, you need to remove all the obstacles that may impede your users, and keep the text in the navigation bar precise and recognizable without long phrases.

site-navigation-1

This is the home page navigation design of Fundo los paltos. Here on this website, the navigation design is functional and simple without any unnecessary words, presenting visitors the most relevant products or sections clearly.

Maintain the consistent

Another important tip to keep in mind is the consistent of your navigation design. The website navigation should be placed in the same location on every web page. And the design should be kept in the same color, style and type. If your website navigation are designed to jump from the left to right or change in colors while visitors browsing your site, it will make your visitors feel frustrated. Moreover, consistency for classification is also very critical for successful navigation.

site-navigation-2

Take the navigation design of Keith cakes as an example. Whatever page you go, the site navigation will maintain the same as the home page design, including the location, the color and the style.

Give some context

The clear and unambiguous navigation design will remind readers where they are and where they are going. The way to achieve this is to create classifications with links to the homepage as well as to change the color of the link when the mouse rolls over. That is to say, the classification name of the page the reader arrives in should be highlighted in a different form from the others.

site-navigation-3

The navigation design on the site of Delibar applies this approach perfectly. When visitors turn to another classification, the button features a subtle JavaScript effect that smoothly moves it up in a different color and size.

By Sophie  May 15, 2012

Latest Sans Serif Fonts For You To Adapt

, , , ,

image 1

Web designers and graphic designers make complete use of typography/fonts to communicate messages to the visitors or customers. The styles of fonts play a major role in attracting and reaching the targeted consumers. The designers use the fonts in extreme creative way to enhance its beauty and style.

Advantages of Sans Serif Font

Sans serif is one of the most commonly used fonts in the field of digital publishing. It is easy to reach and is understandable in any digital banners and computers. Graphic designers use sans-serif type fonts in headline or in sub headlines. The major advantage of this font is it does not have an embossing finish at the end of each letter in a word. Moreover, the modern and elegant look in this font types help the designers to use in various sizes. These sans-serif types of fonts are used in web designs, banner designs, pamphlets, brochures, and even in presentations.

There are several latest sans-serif fonts available in internet. They are downloaded instantly with just a click to the font you prefer. Here listing some of latest sans-serif fonts that you can use in your graphic designs.

Museo Sans

image 2

This is one of the latest kinds of Sans serif fonts. It is low contrast, sturdy, highly legible, geometric sans serif type that suits for all kinds of text use and display purposes perfectly. It is available in 10 forms with 5 in italics. This fully featured font is based on popular Museo. You can download fonts immediately from the invoice page after you have the option paid as you like. It is used for all commercial and personal projects. download

Anivers

image 3

The font name Anivers is resultant from the word anniversary that was created to rejoice the anniversary of popular Smashing Magazine. The latest form of this font is improved in a great way. Though the Anivers fonts are small, it is rigid and comes under reliable family. The features of this open type font are comes in bold, regular, italic, and small caps. It can also easily crunch numbers. download

Mayberry Pro Semibold font

image 4

By Claudia  May 14, 2012

Showcase and Tips to Design a Facebook Fan Page

, , , ,

After the decision of listing on NASDAQ, Facebook clearly has become the hottest social media platform in the global internet. With more than 8 hundred millions active users per month, it has become a must go place for internet activity. For individuals, enterprises or organizations, Facebook is indispensable part of their whole marketing strategy.

Facebook Fan Page Cover

Facebook is where amazing happens; it is not only a place to make friends, but also provides lots of tools to achieve desired effects for individual or companies. Taking the best advantages of Facebook API tools, users can create beautiful and attractive Facebook presence. The most commonly used is Facebook fan page.

Facebook fan page is the place to attract people to like you. You can create different tabs in fan page to provide specific information. For each tab, you can build non fan page for strangers and fan page after he/she likes you. It gives immense opportunities to communicate with its huge database of potential customers.

So in this post, I’ll give you a showcase of excellent custom fan page tabs. These page tabs, without any exception, receive million plus likes from the community. I would click the like button so hard that Facebook’s servers would poop their pants. You can get inspired of how to use fan page to make people like you and promote your business. After the showcase, I draw up some points to make your page stand out from the crowd.

Desigual

The fan page tab for Desigual is cool. As an apparel brand, the page tab is bursting with colors and freestyle drawings, which creates an entertaining and easy mood like shopping in mall. With rich content provided on fan page, it guarantees the long stay of any visitors.

Facebook fan page 1

Red Bull

I’m a sport fan; Red Bull has one of my favorite fan pages. The page is full of passion and energy, it’s just like I drink a bottle of Red Bull. The page style is absolutely coordinate with the company spirit. After clicking the like button, I was impressed by the rich content like live web TV, video and games; I can also keep up with the latest news of sponsored athletes.

Facebook fan page 2

By Sophie  May 11, 2012

Tricks for an Effective Website Call to Action

, , , , ,

Almost every website needs call to action. It is manifested by a button and encourages an action or response from your target audience.

 call-to-action

Having an effective call to action is an important part of online business. It directs and urges visitors to perform your desired action of purchasing an item, filling in a contact form, subscribing to a newsletter, downloading a trial product and many more. Website call to action is also a useful tool to measure the effectiveness of your website and improve the website conversion.

5 Tips of an Effective Call to Action

Call to action is an indispensable way for a website to generate leads. But if you don’t apply the call to action wisely, you may fail to achieve your purpose or even force your visitors to go away. So, how to create a functional call to action in web design? How to make your call to action grab the visitors’ attention and inspire them to click?

Here are five tips for you in designing a strong call to action. These techniques will not only fulfill your objectives and get your website audience motivated, but also trigger for your Internet marketing success.

1.   Have prominent position

No doubt, if you place your call to action in an area not be noticed, you will lose a large amount of conversion. It is obviously that the placement of call to action in web page is critical to draw users’ attention. Having a prominent location such as in the central of the layout, above the fold section, at the top of the web page will make a big difference.

call-to-action-1

Take Pinterest as an example, you can see the call to action button located at the top of the web page. Placement of “Request an invite” and “login” at such distinguished area works very well. Visitors will notice the buttons at the first glance once they arrive at this website, and they probably will take action by clicking.

2.   Possess a personal space

To make your call to action stand out, you need to respect its personal space. In other words, you can leave proper white space around your call to action button without burying it in noise. Whitespace can distinguish a call to action effectively and grab visitors’ attentions.

call-to-action-2

By Sophie  May 8, 2012

Engaging Your Visitors with Eye Movement

, , , , ,

What’s drawing visitors’ attention first on your site? In a website design, every detail has a purpose. It is very important to help readers quickly focus on the important page area, a call to action, a header or even a product description.

As eye tracking research shows, visitors tend to visually “graze” information and send it to their brain for processing. That’s why we need to apply eye tracking knowledge in our web design and perfectly manage visitors’ attention.

Image is a commonly used element in web design. If you add large images or other visuals on your web page, remember that visitors will mainly begin their eye movements there and then start searching the next important part. In that case, the best way to take the most advantage of image is to use human face. Human face not only expresses certain emotions, but also has the ability to subconsciously direct a reader’s attention. Especially for those human faces leading to a fixated region will boost a rational approach toward maximizing user performance on your website.

How Does Eye Movement Grab Visitors’ Attention?

First, let’s take a look at two images in web design.

eye-tracking-1

This is a baby who is looking at us. When seeing this image, our attention is focused on baby’s face, or we can say eyes, which results in our neglect of the much more important information on the right area.

eye-tracking-2

On the other hand, when you look at this design, your eyes are unconsciously following the baby’s eye direction, leading your attention to the header and the product information.

Now, you may notice that how human faces well applied in web design will force a reader to immediately follow his or her visual movement. When implementing such eye movement in design project, we will easily create a visual flow in our websites and easily guide users to their ultimate goal we set out for them.

Controlling users’ eye movement in engaging images is one of the bases of web page usability. However, the visual movement not used properly will cause user confusion, or even lose conversions.

Look at the examples below.

bad-eye-movement

By Sophie  May 2, 2012

Special Mother’s Day Cards for MOM with Love

, , , , ,

“I want to thank you, Mother, for your patience… your encouragement… your strength… your generosity… your unswerving love…Happy Mother’s Day!”  This is what I want to say to my Mom on this Mother’s Day.

mothers-day-cards

As Samuel Taylor Coleridge said “A mother is a mother still, the holiest thing alive.” This famous English poet reminded us that Mother is the sweetest and best gift of almighty. She always devotes herself to making us happy. Since Mother’s Day is coming, you may take this chance to speak out your love loudly! Send darling Mom a special Mother’s day card. Give her warm greetings to convey your appreciations. Show Mom how precious she is and how much you love her. Even to some people who find themselves desperately short of words, expressing feelings through special Mothers Day cards is the best way to show your love.

Mother’s Day is a good opportunity to show Mom her importance to you and to the rest of the family. To do so, I have compiled the following cool Mothers Day cards for you to make your Mom feel as special as she is. Enjoy!

1.   Elegant Flowers – Mother’s Day Cards

Thousands of years, flowers are personifying beauty, pleasure and perfection. They give us a wonderful world no matter we are rich or poor, in which we feel so happy. Therefore, sending mother a Mother’s Day card with beautiful flowers will remind her that she means the word to us.

As you can see below, an elegant rose in orange and pink or a bright bouquet of flowers bursting from a pink vase adorns a beautiful Mother’s Day card. You may also add your own sweet note like “May your day be full of beauty” to show Mom how much you care this Mother’s Day with gifts from the heart.

mothers-day-cards-1mothers-day-cards-2

mothers-day-cards-3mothers-day-cards-4

By Sophie  April 26, 2012