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.

High Resolution Means A Return Of Classic Serif Typefaces

In the last decades sanserif type faces have become the go to type format for use in online environments. However, the higher definition screens that are today becoming standard for mobile devices mean that designers can again explore serif type. This has opened up a whole new world for those who enjoy the more delicate, classical styles of old school serif type.

There can be no doubt that long form articles benefit from serif typefaces. They are more stylish and are much easier to read and the explosion of great content on the Internet means that the forgotten art of typography is now undergoing somewhat of a renaissance.

Old school legibility was based on a certain set of well understood rules – the header of any article should be set in sanserif type and the body of the copy would be set in serif typeface. Legibility was always supposed to be improved when using serif type. Today however, it is a case of different strokes for different folks (literally). A whole new world of typefaces has been opened up.

Although san serif typefaces continue to be popular with digital devices (take a look at Apple’s ‘San Francisco’ typeface) there is no reason to suppose that the old school ‘body copy’ will not make a comeback. At this point the digital media is still skewed towards sanserif typefaces, however this may change in the short to medium term – the fact is that everyone if now a designer. Typeface design has become everyone’s business.

Those folk who still believe that classic typefaces should rule the roost are by no means sidelined – these are typefaces that have stood the test of time. Typefaces like Arial and Calibri will still continue to rule the roost for the foreseeable future – however the winds of change may be blowing though the air of legibility.

It has always been a truism that the only constant is change. When typefaces were originally developed they were constrained by mechanical developments – such as the restrictions of the printing press. Today the situation is very different. Without the restrictions of the hot lead that made up the individual letters of the press we are now free to explore the science of typography in a way that has never been possible.

Of course some typefaces will fall by the wayside – however thorough experimentation new classics will undoubtedly make their way onto the new medium of the electronic press.