Digital Marketing Blog

Four Critical Web Design Rules

  • By Brad Poirier
  • 11 Jan, 2016

"Content is King!" they say, but there are some other rules to consider

Four Critical Web Design Rules
Four Critical Web Design Rules

"Content is King! If you want a website to generate back-links and have quality content the search engines love, be sure to make it readable by both people and search engines. Search engines are working to give people quality results. Thus, they are looking for sites with quality content. So - by building site content for people, not only are you getting back to basics (information dissemination to people via the Internet), you are creating a site search engines will love. So, build sites for people - and the search engines will come.

When creating a new website or redesigning an existing site, there are four critical rules which should be followed to make the site effective, functional, loved by search engines - and successful.

1. Easy to Read

When building a website, the first thing you need to be sure of is that your website is easy to read. When you write content, remember that most web site visitors don't read every word of a page - in fact, they only scan pages to find what they want.

Break up Your Content

Break up your pages and use headers between major ideas so people scanning your site can find what they want quickly. Use meaningful headers between each paragraph or major idea - this helps with SEO. Headers should be created with the H1 through H4 tags for SEO. Always use good writing structure. Additionally, avoid long paragraphs that run on. You should break up any long paragraphs.

Color and Fonts

To help readability, use high contrast colors between font and background. Black text against a white background may seem stark, but it is very readable. To make a website easy on the eyes, try an off-white background and a dark gray (almost black) text color.

Things to avoid with content color:

    • Avoid vibrant background colors like purple or yellow. Such back colors make text difficult to read.
    • Avoid using an image behind your text.
    • Avoid using bright text colors on bright backgrounds.

Fonts Matter

One simple statement covers the font issue:

Simple fonts are the best; the more fancy the font, the harder it is to read.

Since many browsers only have the standard font set, use standard fonts. In reality, there is no "standard", but there are certain fonts that are installed on most browsers. These include Arial, Verdana, Tahoma and Times New Roman. Your readers will see something different than you see if you use other fonts.

Standard Compliant Browser for Development

When developing and testing your site, use a Standards compliant browser like FireFox. If you develop your site to be standards compliant, it will work in most browsers, including MS Internet Explorer (IE). It is recommended that you test your site using the latest and last browser versions of IE (IE6 and IE7). To run multiple versions of IE on the same machine, TredoSoft.com has a free installer that will install multiple versions of IE. It works great!

Keywords in Content

Of course, when writing content, not only should it be formatted to be readable, but it must also be consumable by not only people, but by search engines. One way to make the subject of the content known to search engines is to use the keywords that people use to search for your site in your content. Be sure to use keywords in your header tags, your first paragraph and throughout your text. The keyword density should be between 4% and 7% - but any more than that could 1) be hard to read and still make sense and 2) be considered spam by search engines and banned. Keywords should also be used in your TITLE tags and your Meta description.

2. Simplify Navigation

The menus and links make up the navigation that the visitor uses to get from page to page in a site. Always plan a site around how people will get from page to page. A visitor to your site should be able to get to what they want within three clicks of their mouse.

Multiple navigation points makes it easy to find things. Repeat the top menu and at the bottom. Also create a left or right menu.

Using links within your text to other areas on your site. You can create links so that they are good for search engine optimization (SEO). There are generally two ways to create links within your text:

    1. The wrong way: "For search engine optimization techniques, click here."
    1. The right way: "Good techniques for search engine optimization are important to use."

Using link text (anchor text) that describes what the link is about is the best way. Search engine web crawlers (programs that automatically index the contents of websites) visit your site, they "read" links. Spiders can index descriptive links into a subject or keyword category. Spiders have nothing to work with when reading a "click here" until it reaches the linked page.

This is Cross Linking - use it as much as possible when it makes sense to do so when writing your content.

3. Consistent Design

At most, one or two layouts should be used in your site design. As a reader browses your site, they should be able to get used to looking in the same place for your navigation, for your sub-navigation and for your content. That's all there is to say about that.

4. Lower Page Weight is Better

Page weight is the total size of a page on your site in bytes - code, text and images. Your site's page weight makes a big difference to your viewers. Lighter page weight is better for your readers because the page will download faster. The faster a page downloads, the faster they will get to the content.

What is Means to be Light

    • No large images.
    • Fewer images are better.
    • Optimize images for the web at no more than 72 dpi
    • Use as small an image dimension as possible for the given design.
    • Use a table td bgcolor attribute or a background-color style attribute for solid color backgrounds.
    • Make gradients horizontal or vertical (not diagonal) so that you can use a small image "strip" and repeat it.

How "Heavy" Should a Web Page be?

Certain studies show that 64K is a good maximum webpage size. 64K is a maximum, however it is still, in my opinion, really big! The smaller the page, the better. 25K is good, 15K is even better. There is a balance between design and function. It is a good idea to focus more on function.

Try putting pages on your web host server as you build your site so you can test it as you go. For pages online, you can test the page weight at www.quasarcr.com/pageweight/ to be sure you are on track.

Ways to make pages lighter:

    • Use linked style sheets
    • Use DIVs instead of TABLEs where possible
    • Use simple repeating backgrounds for effect

Summary

Visitors to your website should be able to find what they are looking for within about three clicks. Search engines should be able to navigate easily through your site. Making a site easy to read with consistent page design, and easy to navigate will make it easy to find information. When people can find information, they are more likely to refer your site or link to it - which is exactly what you want to encourage. You will be on the way to building a readable and hopefully successful website that is loved by search engines if you follow these principals.

 

Article Source:   http://www.ArticleGeek.com - Free Website Content

Breeze Digital Media News & Resources

By Brad Poirier 18 Oct, 2017

Deadlines. Employees. Networking. Accounting. Advertising. HR. – The Party Planning Committee.

As a small business owner, you likely wear many hats.

“Wait, now I have to wear a marketing hat also?”

Well the short answer is no, you don’t have to. It really depends on how competitive you want to be in your industry.

Your big competitors invest lots of time and money into marketing their business, but that doesn’t mean you have to. Outsourcing your digital marketing to a digital marketing agency can both improve your lead quality and improve your overall ROI.

Let me explain.

By Brad Poirier 15 Aug, 2017
We are a visual society, so you should be using at least one of these options on your website.

Just like website design ranges from no use of images to the overuse of them, same is true with icons today. More than ever, some webpages are being cluttered with icons, that often add no context to the page or just add nothing to the user experience.

When is it good to use an icon on your website? Here's a few criteria I follow plus some resources for putting icons on your website.
By Brad Poirier 13 Jul, 2017
What’s more important to you: A shiny trophy for being number one on Google or a boat load of new clients coming your way.

Yes, we have said before that the number one position on Google gets 33% of the traffic for that keyword, but what do you see coming up as number one now-a-days?

Local Directories come up first. Do a quick Google search for anything local business related, for instance "restaurants near me". I did this search, and not one result on the first page was from a local business website. ALL of the first 10 results were local review sites such as Yelp, TripAdvisor and OpenTable.

Now to be fair, there were three local results that appeared first, in what we call the Google Snack Pack. Before the website results, Google displays three locations from Google Maps, which is also very important. For websites though, it was all local directories.
By Brad Poirier 18 May, 2017
There's pros and cons to this type of Facebook post. The pro, well, you're making an attempt to create business. The cons? How do you set an expiration date on that? Even if you indicate one in the post, there could be that customer that just says "oh, I didn't see that". Further, how do you keep track of it? Are you going to write down on a sheet of paper every time someone comes in and says "Hey, I saw this post on Facebook". Also, not everyone wants to mention that. People want to present coupons and get a deal, they don't want to announce that they're getting a deal.

There is a much better way to accomplish what you are trying to do. You may have seen it, used it, tried it, but here's how to get the most out of the post type called "Offer". Watch the video below to see an example or read below.
By Brad Poirier 10 May, 2017

Chances are the website you’re using for your business is using Wordpress. Why? Because right now,  Wordpress powers 26% of the web   ...worldwide. That’s an overwhelming market share. In the past, my experience using Wordpress has been for some personal blogs, never as a commercial website. For the past few years working as a web designer, I have been using a version of  Zurb’s Foundation Framework   to develop websites. I’ve stayed away from Wordpress for many reasons, which I’ll explain below.

I figured though: If Wordpress powers 26% of the web, it can’t be all that bad though right? Wrong. Sure, Wordpress has it’s advantages, namely in the blogging area. It still is the go-to platform of choice for blogging. Here’s the thing though: Wordpress was never meant to be a website builder. It just evolved that way. What started off as an independent project grew into the global name it is today. The entire platform though, is supported mainly by community members. Try calling a Wordpress support number. Nope. Doesn’t exist.

To really put Wordpress to the test though, I had to actually go through and build a full site, not just a blog page. Well certainly, I wasn’t going to waste my time at work building a client’s website on Wordpress. I decided to build one for myself. I have a photography hobby, and so I chose to build a photography portfolio. 15 hours later, I have an OK performing website with 3 pages setup plus some gallery pages. I am a professional designer and it took me 15 hours to get it somewhat polished.

I logged my experience every step of the way, and so here’s all of my pain points and some of the positives that came out of this experience. Overall I can tell you, though, it’s about as horrible as I expected it to be. I am more certain now than ever, that I never want to develop websites using Wordpress. I can see why large Wordpress sites are expensive to develop. Development costs are almost entirely billed by time. The longer it takes your web developer to get from blank to finished, the more it will cost you. (FYI, my development time and costs are substantially lower than industry averages)

By Brad Poirier 07 Mar, 2017
Did you know that the average consumer checks your website at least two times from two different devices before they journey into your location? Over 60% of searches start  from a smartphone device , but there is still a great amount of desktop and tablet traffic coming in. Why is that? Some of that desktop traffic is the original, organic traffic yes. However, a lot of it is a returning customer. Perhaps you're a kitchen remodeler , someone searches for "kitchen remodeling" and they find your website from their smartphone. They're not ready to buy yet though. So they bookmark or they email their significant other the web address. When they get home, they venture to their desktop or start using their tablet to continue the research.

Most (amateur) web designers only pay attention to the desktop view. Sad face: many web designers still build websites that are desktop only, they're not building responsive websites that are mobile-optimized. The worst part is they're often designing this on a 20" or larger monitor. Of course it's easy to design a great site when you have 20" of a digital canvas to work with. The real Picasso comes out when you can take that same great experience and display that on a 4" screen, AND to optimize it for as slow as a 3G connection. There's a big difference between your site being mobile-friendly and mobile-optimized. Mobile-friendly usually just means making sure the content is formatted to scroll up and down and no content stretches beyond the width of the smartphone screen. Mobile-optimized is taking the same content from your desktop and optimizing it for a mobile experience. This is important now more than ever, as Google has started to ONLY SEO Index your mobile site and not your desktop site.

So that's the why I design websites using four screens. You might interested in knowing what are the screens I design with, and how I use each one of them to turn your website from blah to Yahhh! I only build websites that are responsive. I check how the content looks and how the content interacts along the way. Below are the screens that I use to check this with and more importantly, the order in which I do this.

Screen #1 - Smartphone
You might be shocked to think that the first screen I check my work on is a mobile device. If you were a bakery and 60% of your revenue came from donuts, would you start your morning by prepping the cookies and pastries? You start with your money maker! Well, since over 60% of all Google searches start from a mobile device, why would you start with the device that people aren't using as much? I'll tell you why, it's because you're working with an amateur designer. Or perhaps you're working with a legacy designer who won't budge. When I design in a mobile-first environment, I can truly focus on that experience and maximizing it's potential. We focus on getting the most important information right away. For most businesses this means placing a "TAP-TO-CALL" style button at the top of the page. Nothing is more frustrating than having to remember the number in your head and quickly double-tap-your-home-button to get to the phone dialer and attempt to get every number in there correctly. If location visits are important we also make sure there are easy-to-find buttons for loading your bulit-in GPS navigation.

What do you think the next screen is going to be?

Screen #2 - Tablet
Did you guess that correctly? It's only natural to work my way up the screen size. Now that I've mastered the experience for mobile, I can open up canvas a little here and work on the tablet view. Tablets today range from about 7"-10" and yes there are those two outliers that are around 13" , but they're still a tablet, at least according to the internet browser being used. A growing trend for the tablet view is using what we call the "hamburger" menu. That's the 3-line menu button you might see in the upper right or left hand corner of the screen. We layout the navigation in both the hamburger format and the traditional horizontal navigation. It all depends on the business and the goal of your website. That's why we custom design all of our sites starting with a 1-on-1 consultation . Since a tablet is still inherently a mobile device where the user interacts using only a touchscreen, we still are focusing on easy, tappable buttons. Consumers are used to tapping on items with their tablets, we make it super easy for that to happen. Gone are the days of only making links available from within the text. Consumers need clear call-to-action buttons to guide them along their buying journey.

Screens #3 & #4 - Laptop & Large Monitor
Technically I'm designing and coding everything on my large monitor, but the testing is being done on multiple screens. However, when I start to design for the desktop, I'm using my laptop which dual outputs to a 21" cinema display. This allows me to have the freedom of design but to see how it will interact on a 13" monitor (which is about the average monitor size for a small laptop). The most important content is "above the fold". So if it's not designed right, some of the content that looks good on 21" would normally get cut off on a smaller screen. We make sure that doesn't happen. The desktop design is where it does get a lot more fun, and more roomy. It's like trying to pack a bunch of moving boxes into a cargo van when you've been using your 1988 Corolla earlier that day. Ahh, you can breathe a little. However, use this space carefully. Remember, with great space comes great responsibility. I've seen many web designers who came from a graphic design background. It is honestly a natural progression, but it's an entirely different approach. Use a white space or negative space is critical here. So if you're used to working with that graphic designer who loves using tons of colors and turning text into metal like beveled art and everything else that came with cheap Photoshop work from 10 years ago, they're in the wrong arena. You have about 5 seconds to capture someone's attention before they'll decide to leave the website. Now, a lot of that comes from excellent copywriting and headline writing , but bad design choices will confuse the consumer and cause them to leave and go to the next result in line.

So there you have it. The method to my madness. Some people look at website design and say why not , I look at website design and say why ? Rule of thumb: Just because you can do something, doesn't mean you should. I'm on the web all day long. I can easily spot a badly performing website, in terms of conversion. Today, you're website is all about conversion . Your business can't afford to run a wiki-pedia website. It needs to be a lean, mean, lead-generating machine. This applies to all business websites.

What are some examples of good and bad website design that you have seen?
More Posts
Share by: