Archive for category: Website Design

Getting Started with Web Typography & Fonts

Typography is the art of organizing type into a legible, aesthetically pleasing and design-appropriate design. In printing this can be set in stone; the reader can not alter the way.

Users on  the internet on the other hand have a lot of control about how your web typography look, and behave. All modern browsers now allow users to define font type, size, and even color. So on the internet you have a very powerful tools, and choices to make for your readers.

That does not imply, obviously this as a designer you are able to use print typography principles in your web designs. If you need to refresh your information, we will talk a  bit more about web fonts, and typography.

Web Fonts/Typography

• Services such as GoogleFonts make it Simple to download and embed a huge library of fonts

It was that if you wanted to use a font in your web designs, then you had to adhere to a couple of fonts common to most computers and browsers. Your options have been Times, Georgia, Helvetica or any form of Courier fonts. You can’t use any other creative fonts. All websites had the same typography and fonts selection (It was very bad back then :-))

Happily this has all changed in the past few years with the advent of services like Typekit , and Google Web fonts For the very first time, a broad assortment of fonts can be obtained for use on you websites and the web design industry is very happy using these tools to make better web designs.

OK, now we have another small issue, How can you choose a font for your design from thousands of fonts available?

Less is more: Pick 1 base font, and a single screen font, and attempt to adhere to that. Because there are thousands of fonts available, it does not mean You Must use them all

Stick to fonts intended for purpose : There is no point using a screen font to your paragraph backup as screen fonts are designed to be utilised in tiny bursts: they are perfect as headlines, but not optimized for studying huge passages.

Select appropriate fonts : Be certain that you choose fonts that are acceptable to your subject matter. A script font may work to signify a letter, however if you are using it on a 31, it is not likely to provide a professional opinion.

CSS3 Typography controls

On the browsers, you will have a lot of professional controllers for both positioning and letter spacing, Some rules you can use in CSS includes line-height, letter-spacing, font-size, weight, and color. To control monitoring, utilize letter-spacing. You may even control the distance between phrases using the real estate, enabling you to open your text up .

Use <span> Tags a lot

You can  use <span> tags to wrap any text in an elemnet so that you can define spaces between it and other surroundings. You can also define a special CSS rules for this specific text using span classes.

The exact same best-practice principles apply to spacing online as in print, so it is well worth reading up on how to pick a productive degree of leading, monitoring etc.. Look at employing a grid that will assist you align the baselines of your kind into a structure that is transparent to help both legibility and enhance design coherence. This tutorial on the Computer Arts station should be convenient.

Column width

The diameter of a text column may powerfully impact on its readability. In print, columns are generally set to include anything between 45 and 75 characters (that is roughly 9 to 15 words broad). This is thought of as the width for text, allowing the reader to move .

The exact same general rules apply online, therefore aim to place your content in columns no longer than about 80 characters wide. Remember You Could set your column width utilize the CSS code.

 Related: chick fil a pickles for sale, moze mat dieta dva cestovne pasy, hunting clubs in arkansas, when is the water clearest in destin, where is brushkana alaska, daniel grant obituary, paul michael hatch, citadel portfolio manager bonus, limbaugh funeral home obituaries, city of madisonville ky property taxes, best mm2 player leaderboard, 45 rockefeller plaza business directory, what time do concerts end at td garden, st margaret’s hospital, epping opening times, what did calvin goddard contribution to forensic science,Related: austintown township zoning map, homes for rent monticello, ar, felice sampson, gracias dios por mis hijos y mi familia, suncorp super netball salary cap, dana loesch advertisers, divine savior academy staff directory, holby city zosia baby, where can i buy a fuel everywhere gift card, donate luggage to foster care los angeles, bank of england interest rate meeting dates 2022, coleman funeral home silsbee, texas, len ainsworth grandchildren, glasgow gangland news, why was sprite remix discontinued,Related: harry ellsworth sykes, pretty village pretty flame confederate flag, karen valentine obituary, caesars rewards 5x tier credit multiplier, studio flats to rent in birmingham no deposit, how to grow in the prophetic anointing, 4g lte home internet providers, sarah krauss engaged, ursinus field hockey coaches, john reid wrva email address, vsp customer service jobs, florida man december 3 2008, cumulative feature archaeology example, houses for rent andalusia, al, portland police cessna,

Testing UI and Conversion Rate Optimization

Website owners always ignore their websites, and user metrics. They never check their Google analytics, and almost never know how they are getting customers if any. But not all website owners think this way. Successful websites all have something in common; there is always a marketing team analyzing the website, and analyzing user metrics. These metrics show a lot of important information like:

• How many visitors you have daily?
• Where do these visits come from?
• How long do they stay on your website?
• What pages they visit, and is there any page have a lot of exits from it?

One day a client who has a very successful e-commerce website called us, and he said that a lot of people are visiting his website, and even go to the checkout page, but then they leave the page without completing the order. He monitored his website for more than a week and he noticed a big drop in the number of orders done from the website.

After having a quick look on the website, at first we didn’t find anything that may cause people to leave the checkout page. And because there are a lot of elements (UI design, Marketing targeting, Audience, Products) that play a big role in user decisions, we started with the basic questions:

• Are you targeting the right audience (i.e. the audience that will buy your products)?
• What about the website speed, is it very slow specially in the checkout page?
• Does the website throws random errors to some users that may cause this issue?

We checked all these points, and the website didn’t have any of these issues. The website was loading very fast, he was using the same ads that always work very good, and the website is working as it should without any errors.

Next we moved on to use a very useful tool for A/B testing called Heat maps. Heat maps is a system that will take screenshots of your website to tell you where are your visitors clicking. It look something like that:

A heat map of Google search results page

As you can see from the above heat map, the red areas are the areas which get a lot of clicks. Heat maps help us to check the user flow in our website. where do they click? Do they see the add to card button? Do they enter their data in the checkout page or leave without entering their data?

Using heat maps in the website we discovered a lot of useful information that helped us a lot:

1. Some people couldn’t see the add to card button so they use the phone to make the order
2. The card page was very good on desktops, and tablets, but on mobile, users had to scroll a lot to get to the “go to checkout” button
3. People who go to the checkout page always fill their data before leaving the page
4. Some people click a lot of times on the phone field which means some people have some difficulties writing their phone numbers

We optimized all pages for mobile and desktop. We made the buttons a lot bigger with a very bright colors that no one can miss. We changed the card page on mobiles so that users won’t have to scroll a lot to go to the checkout. but, we never found what was the issue in the phone number field. It was working as expected from all devices we tried and people still leaving the checkout page.

Finally we knew what was wrong with the checkout page

Now the time for the next step, a video recorder program that not only show you where people are clicking on your website but also record the screen so that you can see how visitors use your website as you were with them. Finally we knew what was the issue. After watching a lot of sessions we have found that a lot of people with ipads, and iphones use the Arabic keyboard, and our client was using a plugin to validate the phone number field. In iphone, and ipad, if you are using the Arabic keyboard and switch to the numbers to enter your phone number. it will write the numbers in Arabic also not in English. The plugin wasn’t able to validate the Arabic numbers and was throwing an error to the user “PLEASE ENTER YOUR PHONE NUMBER” and sure the user wasn’t able to know what to do, so he simply exit the page.

We modified the plugin code so that it detects if the numbers are in Arabic and validate them correctly and Surprise; the conversion rate have gone up again like before and every one is happy again.

Lessons learned from this case study

1. Always use analytics tools to monster your website
2. Make sure your website is accessible from any device and by all people
3. Make sure your website is looking good on mobile devices
4. Always perform A/B testing to increase your conversion rate optimization
5. Heat maps are great to get an idea about your website UI, and your visitors
6. Session recording is a great tool to see your website as your users see and use it
7. Conversion rate optimization requires a lot of expertise not only in web design, but in also human behavior, and online marketing

Note: This case study was a lot longer than written in this post but we tried to keep it short. This CRO project was done over a month of work to get all things right and increase the CRO again.