Cool Tools For Designing Your eCommerce Site

Connected Business eCommerce uses some of the new technologies brought about by the emergence HTML5 and CSS3 to improve your and your customers' web experience. eCommerce merchants looking to further personalize their site. Here are some tools you can use, which requires minimal understanding of web design and coding:

Font Awesome

Font Awesome is a collection of vector-based flat icons that can be easily customized in terms of colors, size, and effects through CSS. Below are just some of more than 400 icons from Font Awesome's library:

Click Image to Enlarge

And applying them is so easy. Setting up Font Awesome can be as simple as adding two lines of code to your website. Just download the files from their homepage, copy the folders into your website file directory then put this code inside the <head></head> tag:

<link rel="stylesheet" href="/folder-containing-the-files/font-awesome.min.css">

And just like that, it's ready to be used.

How to Use Font Awesome

FA icons use the <i></i> tag with specific classes to render the icons on the browser. Like for example if we need to call the icon for home we will use <i class="fa fa-home"></i>, see image below:

Click Image to Enlarge

As shown above, we can see the icon for representing home but in different sizes. This is possible because the icon is not a raster/pixel image - the browser actually sees it as a font or a text. Meaning that changing its size, color or effects is just a matter of manipulating its CSS properties. FA even created ready-to-go classes for some of the awesome uses for FA icons like:

  • default sizes

  • using icons as bullet points

  • animated icons that spins

  • rotate icons for 90, 180, or 270 degrees

  • flipped horizontally or vertically

  • stack two icons together to create and entirely new icon or send a different message

Just go to their Examples page.

CSS3 Generator

CSS3 went out just about the same time as HTML5 as they go hand in hand in improving web user interface (UI) experience. 

While there are guides and tutorials out there, CSS3 Generator allows you to see the CSS3 effect first hand and generate the code that you can copy to get the same exact result.

Click Image to Enlarge

Here are some of CSS3's new cool features:

  • border-radius - allows div or table containers to have rounded corners. Tip: To make a circle container - make a square div container and set border-radius half the value of its width and height. E.g. div {height: 100px; width 100px; border-radius: 50px;}.

  • box-shadow - allows div or table containers to have blurry shadows. Shadows may also be inset so the container would look like the element is shallow rather than floating.

  • text-shadow - allows texts  to have blurry shadows.

  • gradient - not long ago, gradient can only be obtained by making an image with gradient and using that as the background-image. Now, it can also be handled using CSS and here's a generator that makes it so much easier.

Click Image to Enlarge

Web Fonts

There was a time when websites are stuck with but few font faces to choose from because they needed to use only the fonts that generally live in every computer such as Arial, Tahoma, Georgia, Comic Sans or the default Times New Roman. Google, among others, developed a way to host fonts and allow websites to link to them (or download them) for free through a service called Web Fonts. They made an ever-growing collection of fonts from hundreds of talented designers. And now it's just a matter of adding a few lines of code to your HTML and CSS files and you're good to go. Here's how:

  1. Go to Google Web Fonts.

  2. Pick a font you want to use from almost 700 fonts they have in library so far. Look for the Quick Usebutton.

    Click Image to Enlarge

  3. Once you have decided on a font, click Quick Use and you will reach this page:

    Click Image to Enlarge

  4. Pick the styles that you will use with this font. Note, though, that every time a style is added, page load can be affected. So choose only those that you will actually use.

  5. Scroll to the bottom of this page and you will find the code generated that you can copy and paste into your HTML files.

    Click Image to Enlarge

Here are some of the popular fonts from Google Web Fonts:



 

 

 

 

 

 

Discover the power and versatility the Connected Business eCommerce has to offer. Contact us today to schedule a free product tour.

FREE PRODUCT TOUR