Online Typefaces: Why Do Some Work & Some Don’t?

There’s no question that your reading experience with an online article or website will vary greatly from one page to another. There’s a lot that goes into the design or experience that takes place with any website, and while typography is one of those things that all too often gets overlooked it actually makes a huge difference when it comes to the overall readability experience with a website.

Despite there being literally hundreds of different typefaces and variations available out there, there’s a reason that certain ones like Times New Roman, Sans Serif, Helvitica, Arial, and Courier are ones that virtually everyone knows while there are dozens upon dozens that no one knows about and most people have never even heard of.

 

Spacing

One major issue is the spacing between letters. One reason that Times New Roman is so often seen as the perfect default is because they have exceptional spacing between letters. You won’t find an “m” or “w” touching another letter right beside it. Even multiple wide letters like “o,” “m,” and “a” can all be placed together without worry about them blurring or appearing unclear.

Aside from spacing between letters and words on the same line, having this stability from line to line also makes a huge difference when it comes to reading a web page from top to bottom and making sure there isn’t any confusion between letters. It’s a small consideration that makes enormous differences.

 

Clean Graphics

Some fonts simply try to be too fancy or showy. Clean graphics might look as unique or showy as other ones, but from top to bottom they are generally the better choice. If a letter isn’t extremely clean in its composition, then how are readers supposed to enjoy the reading experience?

Unclear graphics mean a reader has to stop and re-read, try to figure out what is being said. A good page has flow and having to stop, review, stop, review, stop again means a jerky motion when reading the page and that is not going to be good for the reader and it is not going to leave behind the feelings of a good experience at all.

 

Habit & Standards

Finally, some typefaces keep their lofty position because they started out as one of the best fonts and widespread standards have kept them there. Everyone knows Times New Roman, so why change if it still works? Sometimes the answer comes with inertia.

Web Typography: Getting More People To Read Your Online Content

 

Typography is a topic that doesn’t come up nearly as often as it should, especially when looking at how we read things online. Steve Jobs talked about typography’s early cousin calligraphy, and how that was such an influence with Word Processor programs to follow for Apple and Microsoft, but the sort of typography used on modern websites actually has a huge effect on how we read online content.

 

Size Does Matter

When it comes to font type, size does matter. While all caps is frowned upon and there is certainly a limit on how tall text can consistently be without losing its readability, anything 8 pt or less is often going to turn readers off. This is hard to read, requires a lot of concentration, and isn’t going to make a good impression.

12 point font is better than 10 in the majority of circumstances and depending on how the font is designed, sometimes even a 13 or 14 point font can be a great way for getting attention and keeping it.

 

Contrast Matters Even More

Contrast is critical. There’s a reason black text on a white background is the standard default: it’s extremely easy to read and the epitome of contrast. There’s no problem reading it whether the person is color blind or not, there’s no blending. This type of contrast can be created (to some extent) with other colors, and it is a necessity to make a web page truly readable by any reasonable standards.

 

Spacing Matters As Well

Spacing is also extremely important when it comes to making sure a web page is readable. You don’t want words running together because it’s hard to see where the spaces are, and likewise a space after a period should be more than enough to separate two sentences. There’s also the north-south element with not wanting lines to cram together. A paragraph should look evenly spaced, not smashed together like a squished loaf of bread.

 

Use White Space & Headers

No discussion about web typography would be complete without talking about the use of white space and headers, where appropriate. Giving a full page of text extra readability by using bolded headlines that stick out and white space between paragraphs makes all the difference in encouraging a web browser to read as opposed to glancing at it and then looking for something else more visually appealing.

Improve Website Conversions With These Design Elements

 

When it comes to website design, a lot more thought should go into it than simply deciding whether or not it is ascetically pleasing. Believe it or not, but the design elements implemented into a website’s design can play a critical role in determining how well or poorly a website can convert. Let’s take a look at some of the different design elements that can dramatically improve your website’s conversions.

 

Make Your Call To Action POP

One of the most critical design changes that you can implement into your website has to do with your call to action. You want your call to action to be both prominently placed on your website (above the break/fold) and you want it to stand out. The best way to get your website’s call of action to stand out is by placing it inside something highlighted or inside of a container of sorts. This will effectively make your call to action completely stand out from the rest of your website which will draw more attention to it. The more people that see your call to action, the more conversions you are going to make.

 

 Color Theory

The colors you choose to use on your website and on your call to action can have a significant impact on your conversions. To figure out which colors work and convert the best, you will simply need to do some A/B testing. A good place to start is to think about how color impacts the way you feel and what it does to your mind state. The color that is chosen to be placed in a specific area of your website can have a dramatic impact on your conversions due to the way that it makes consumers and visitors feel.

 

Directional Cues

When it comes to drawing attention to your call to action buttons on your website such as your “Buy Now” button, pay attention to how you are cuing your visitor. One of the best and most effective cues is a directional cue. These cues work to immediately tell visitors where to look and what to click. This can help increase the success of your conversions because more consumers are not only going to be aware of your call to action buttons, but they will be able to find it much easier than without the directional cues in place.

Psychology Of Color In Web Design

Color, everywhere that you see it evokes an emotion. This emotion may be good or bad but it’s there, ever present. When you open up a web page, you see it in all its glory. The color should lead  your eye down the page and it should evoke a feeling of enjoyment.

Color is a very psychological thing that can make you feel happy, sad, energetic or lethargic. It can make you want to continue looking at a page or it can make you feel like moving on to another web page.

If a web page doesn’t hold your attention, chances are that it’s either too busy, or the colors are all wrong for your personal taste.

More and more web designers are recognizing that color can greatly influence a web page visitors behavior. They are learning how to play on this and influence their potential customers by playing up the mystery of color.

The psychology of color influences our everyday lives. It influences how we dress, how we perceive others and even how we choose which vehicle we might buy.

Color is an integral part of life and it can have great influence over our choices in life and business., It can start or stop a conversation. It can grab and hold someone’s attention and it can evoke the right emotion to influence a sale.

Color can stand for your brand or product and it can make people remember you. It can encourage people to take action and it can help others to come together to decide which products they will show on their web pages.

Color can be subtle or it can be pushy and it can draw the eye upward or downward and invite a person to follow along. Color has more power than many people realize.

Each and every time you look at a color, it evokes a specific emotion or thought in your brain. Color can help your body to release hormones that make you feel happy or sad.

A great web designer will know which colors their customers are attracted to and will include said colors in the web design to attract even more customers.

Certain colors are more attractive to women than men and will be more likely to attract men or women as potential customers. Great web designers are finding that the psychology of color can have a great influence upon their website designs.

Why Mobile Design Is Now More Important Than Desktop

As an increasing number of consumers and Internet users are beginning to utilize mobile devices more than ever, mobile has become much more important than desktop design. Everything is now being done on mobile devices.  From checking emails, doing research, to shopping online. Because of this, it has become increasingly important for website owners to focus on implementing effective and responsive mobile design. In this article, we will be going over some of the main reasons why mobile design is so important.

What Is Mobile/Responsive Design?

A mobile/responsive design is essentially a website that properly scales to mobile devices of all sizes. It is a website that has been constructed so everything from the content to the overall structure remains the exact same on every device. Thus, allowing for a very consistent experience regardless of what is being used to view the website.

Reasons Why It Is So Important:

  1. Mobile Usage Is Increasing Every Year.

The main reason why this kind of design is so important is because an increasing number of people are beginning to utilize mobile as their primary form of looking things up online and even shopping online. In fact, over twenty percent of Google searches are now being performed on some type of mobile device whether it is a smartphone or tablet. Also, around a quarter of all emails are being opened on a mobile device.

 

  1. Google’s Push.

Another reason why mobile design has become so important is because Google is making a big push to get all of it’s website’s optimized for mobile users. This is because Google knows and understands that mobile is the future. Because of this, they want their users to have the best possible experience. Google knows that a user is going to have a poor experience if a website is not properly optimized for mobile devices. Thus, it has made it an actual requirement for website’s to be completely responsive and optimized for mobile if you want to rank well. The bottom line is, if your website is not completely optimized for mobile traffic, your website’s rankings will suffer.

 

  1. Increase Conversion Rates.

Besides making users happy, having a responsive website is also going to be able to effectively increase your website’s conversion rate. The reason is simple. If a website is not properly optimized and rendering correctly on a mobile device, the user is very likely to bounce off of it onto one of your competitor’s optimized websites. Also, they may even be unable to check out or convert into being your customer due to not knowing how to navigate the poorly optimized website.

As you can see, there are plenty of reasons as to why mobile design has become increasing important. Not only can it have a tremendous impact on your conversions, but it can have a significant impact on your rankings as well.

3 Tips To Make The Most Of Your WordPress Blog

You’ve covered the basics, your WordPress blog is up and running and you are dutifully posting blogs regularly. However, you just don’t seem to be attracting many (if any) visitors to your site.

These 3 simple tried and tested tips should help increase the amount of visitors to your site:

  1. Optimize

SEO or search engine optimization is a means to make your post more visible to search engines improving your ranking on a results page. SEO techniques should be used in every one of your posts. There are a number of different plug-ins that you can download to make the SEO process easier. Principle SEO techniques include:

– Adding new, unique and relevant content or blog posts regularly.

– Identifying keywords and phrases that should be used in the title and body of the post.

– Adding a meta description that is hidden text and messages.

– Inserting images with alt-tags.

– Optimize the URL.

The more SEO techniques that are used, the better the search engine ranking should be.

 

  1. Share

Sharing your posts is one of the best ways to increase the visibility of your WordPress Blog. You can choose to tailor the content that you wish to share and which social media platforms to use. The best way is however to select the Automatic Share option that will do this for you whenever you publish a blog post.

This will allow the social media platforms to extract relevant information using the meta data and other information contained in your post. There are different settings that can be applied to the automatic share option.

 

  1. Links

Add links to other pages (both landed and posts) on your WordPress blog as well as links to other pages on the internet. Links should always be relevant to the article to have the greatest impact.

Depending on the length of the article, at least two links are optimal (one internal and one external). For posts longer than 500 words, links should be added every 200 to 300 words.

Always ensure that a link to your homepage is contained in the body of the post. You can also choose to have a snippet of your post appear on the homepage with a “Read More…” caption to direct readers to the actual post.

You can apply these three tips to current posts and other content retrospectively as well as new posts you submit to your WordPress blog.

The Benefits of SASS style over CSS

When designing and setting up a website from scratch, coders can choose to use traditional CSS or the newer Sass style. Sass style is winning people over because it provides quite a lot of neat features that can help with the web designing that is currently popular.

Here are a few reasons why it might be time to switch over to using SASS style.

1) SASS is Easier To Individualize

Style sheets can become hard to manage after a while and that is when the user has to keep track of things on their own. With larger projects, this becomes rather difficult and the time spent looking for style sheets increases.

Instead of dealing with that, Sass style enables users to have all of the style sheets individualized based on their own specifications and requirements. This means a person can separate the style sheets into something manageable and easier to track down. This is fantastic for larger projects with many style sheets on offer.

2) SASS Style Pages Load Faster

The HTTP requests are not going to increase because of the style sheets. Using the traditional CSS method, there is a certain lag that accumulates. The Sass style does not let this happen because the style sheets are separated. Load time is lightning fast.

3) Better Framework

A site and its coding need foundational support or things won’t run. You might have to start from scratch every single time the site is being made and that is cumbersome. Who has that much time these days? You want the site to start functioning after being designed and the framework  matters for this.With the Sass style, the framework is already established and it is organized as well.

These are the main benefits that come along with the Sass style and all that it provides. Instead of relying on the traditional CSS option which does not work as well, it is smarter to think about using this style. It is compact and neat, which is perfect for coders who want perfection.

How Design Consistency Helps to Create Brand Consistency

Your brand image is a collection of all the things that come to mind when someone thinks about your company. Is your brand youthful or mature, serious or funny, casual or formal, aspirational or homely? Depending on who you are trying to attract, the look, feel and tone of your brand will make all the difference.

A lot of brand owners invest in expensive logos and header graphics for their websites, but then let themselves down with inconsistencies in other areas. For example, they may want to present a youthful image, but use a boring Serif font on their website. Or, they might have blue and yellow as their primary brand colors, but then fail to use either of those colors in their mobile app.

Clear branding is essential to ensure that people know whether they can trust a website as representing a specific brand. Many organizations struggle with this – local stores may have one logo for their shop front, but then use a different logo on their website because they couldn’t get the domain name they wanted for their online store – this is counter-productive. Getting consumers to trust your store is hard enough without adding the potential confusion as to whether the website really is anything to do with the store that they have come to know and trust.

Using the same design across all channels – social, mobile, print, web and bricks and mortar – makes it easier for customers to recognize and trust your brand. Everyone knows the Nike Swoosh and recognizes the Coca Cola writing (even if it has changed over the decades), and even in smaller niches, there are certain colors or patterns associated with video game companies. Mythic Entertainment has a sound that is played during the splash screen of their video games – and that sound is one that video game enthusiasts recognize even if they don’t see a logo with it.

Employing the same consistent branding everywhere you have a presence will help to cement your brand in the minds of the people it matters to. People will come to know your brand and respect it, and because they know what they are going to get, they will be able to more confidently recommend it. Branding is a long term battle, not something that you achieve overnight. Think about what you want to portray, and work towards it over time.

5 Important Web Design Trends In 2016

You may have already heard about the importance of responsive web design for 2016 and beyond. The concept surged in popularity after Google released its Mobile Friendly Update last year. If you plan to rank your website higher in the search engines, you need to use a responsive web design for your site. There are many other important web design trends in 2016. This article provides information on 5 important web design trends for 2016.

1. Material Design – This is an alternative to the flat design which brings back some great graphical elements to your blog. It will allow you to stack and remove the elements as required. There are inbuilt animations that need to be created manually. Material design is responsive as well as minimal. You can turn off what is not needed and focus only on what is needed. It is based on 3D and considered a better choice for webmasters who want some stylish visual design for their blog.

2. Typography – Improvements in screen resolution has made it possible to get fancier with typography. We can expect to see it become more colorful and stand out in 2016. The use of serifs and handwriting are the two popular trends that will be seen in 2016. Serifs will help improve legibility of your blog. These fonts were removed earlier due to lower resolution screens. But screen sizes and resolutions are becoming larger now. Handwriting helps you develop a more personal web.

3. More Imagery And Less Text – Consumers look more at pictures and videos and less at the text. But the search engines want more text for SEO purposes. Hence, you will see blogs with more text-rich content on subpages and more image-rich on their homepages in 2016. Browsers are faster at rendering images today. Hence, the images will be larger with high resolution than before.

4. Tiles Are Replaced With Cards – Cards have taken web design to a deeper level by adding interactivity and functionality. They provide more information using hover effects. You can flip the card over and expand them too. Watch out for more of this in 2016.

5. Greater Focus On Social Comments – This is another web design trend to watch out in 2016. More and more websites will use social commenting systems in 2016. Visitors can comment on your site using their social media accounts.

How to Use Browser Resets and Other Useful CSS Snippets

CSS is a great way of dictating the style of your website. The idea behind CSS is that it separates content from style. The content is presented using HTML, CSS is used to tell the browser what the website should look like.

Writing CSS by hand is difficult, sometimes, because you do not know what browser the visitor is using, or whether they have got a style sheet that they tell the browser to apply to websites that they visit. Sometimes, a user’s custom CSS or default settings could cause issues with your own style sheet.

That’s where browser resets come in. A CSS browser reset is one of the most useful CSS snippets that you will ever come across. At the most basic level, the ‘clearfix’ is something that you should be using to ensure that your website looks right – and that spacing and padding is how it should be. However there are other things that you should apply as well. For example, if you want to get nice rounded corners, you can apply a CSS snippet for that.

Using CSS snippets is actually pretty simple. You just place the snippet in your CSS document, and then can apply it wherever needed. Alternatively, for small snippets you should learn the order of precedence. The first thing that is applied is anything in your external CSS stylesheet. Anything in that stylesheet is over-ridden by anything that is in the HTML document, wrapped in <style> tags. This, again, is over-ridden by any ‘style’ that is applied directly to an individual tag. Finally, a style that has !important appended to it will over-ride anything else.

If you remember these rules, you should not have any problems with styles being applied in the wrong order.

It is good practice to use a central CSS style sheet, since it makes it easier for you to modify things across your whole website. Make a new style for anything that you will use more than once. Don’t use font tags and tables unless you have a very clear and strong reason for doing so, because it is easy to get into bad  habits and make code that is hard to maintain, where thoughtful use of CSS would make your life a lot easier, and ensure a clean and consistent look across every single page of your website.