Tale Of Two Websites: 2

This article is a companion piece to the article “Tale of Two Websites”, if you have not yet read that article, you may read it here.

In “Tale of Two Websites”, we discussed five major pain points in web design. Here, we’ll cover how to address these issues to breathe new life into a struggling website. This article will be a bit more technical than the last, including hand-on demos and real world advice. To keep it practical, we’ll present the fixes from “easiest to hardest” rather than by importance.

Most of these changes can be done purely with CSS (some require minor HTML as well). While CSS may seem tricky at first, it is more accessible than you may initially think! In fact, the hardest part is often finding out how to edit your website’s CSS, as it varies site to site.

Because there are many many ways to create a website, there are many many ways to create and modify CSS. As a result, We will not be telling you how to find/edit your CSS, but rather how to make the necessary changes once you have found the CSS. Wordpress is one of the most popular website builders and commonly used by flight schools, here is a link to Wordpress’ CSS guide

As a brief refresher, the 5 major pain points are

• No/Poor Mobile View

• No Call To Action (CTA)

• Difficult to Navigate/Broken Navigation

• Lack of margins/padding

• Poor Font/Color Choices

For examples, we’ll refer to the previous article, linked here:

The "ugly" version can be found: Here

The improved upon version can be found: Here 

Due to the technical nature of this article, it is best to have a familiarity with:
HTML/CSS (including)

• classes

• divs

With all of that out of the way, let's begin!

Call to Action

The easiest/most impactful change that can be made is adding a Call To Action.

The first step is to identify a location for the CTA. To add the CTA you should add an actionable item, such as a link or a button for your users to click. This can link them to a scheduler for flight lessons, to another page for more details, to sign up for an email newsletter, it can really do whatever you want. I typically wrap my CTA’s in a Div for easier styling and for SEO purposes. 

These are the steps I took to add a CTA to the example sites.
1. Create a Div with a class like CTA 

2. Put the CTA text inside ex. “learn more here!”
3. add a button/link for the users to click on

4. add styling to the CTA class so that this div stands out on the page

• the styling I added to the CTA class:

  • A border

  • A background color

  • a different colored button (that changes color on hover to indicate intractability)

  • I also centered the text and rounded the borders

You can “comment out” lines by pressing Ctrl + / while your cursor is in that line. Play around with the various CSS lines and see how they affect the CTA.

Remember, the most important part of the CTA is that it clearly stands out and “calls” your user to do something.

Lack of Margins/Padding

First, a quick refresher on the box model. Everything on the internet can be thought of as in a box, this is the “content”. Every content has a margin, border, and padding, with default values of 0 pixels. Picture a fenced backyard full of grass (the content). The fence would be the border. The fence can be a meter thick brick wall (thick border) or a paper thin wall (thin border). Padding is what separates the content (the grass) from the border (the fence), for example a stone walkway could be a bit of padding between the fence and the grass. There could also be a stone walkway surrounding the perimeter of the fence, that would be the margin. 

Margins and padding are important because it provides “breathing room” for your elements, without them everything may feel cluttered and be difficult to read. This can most easily be seen on the Packages page of the ugly site, compared to the Services page of the pretty site. 

Here is another codepen showing how easily margins and paddings can be added.

Read more about margins and padding:

https://www.w3schools.com/css/css_margin.asp

https://www.w3schools.com/css/css_padding.asp

Difficult to Navigate/Broken Navigation

It can be hard to accurately judge your own navigation, as if you built it yourself, you likely know where everything is. A good test is to sit down with a friend and “challenge” them to find specific pages. Choose a handful of pages that you feel your user should be able to easily find, and see if your friend takes the expected path, or has to poke around a lot to find the page. If the navigation isn't immediately obvious to the user, it can likely be improved upon. Difficulty is subjective, and as a result can be hard to pin down. Broken navigation, on the other hand, is more objective. 

Broken navigation refers to links going to the wrong destination or no destination at all (hitting an error page)

Here is another codepen.

In this example, we have two links, one works and takes us to the section while the other does not work but SHOULD take us to the details. Fixing this is as easy as fixing the “href” on the link element. In HTML links use the <a> tag. In the codepen there are two links. The href is where the link should go, in this example we link to the same page, but this href could just as easily be another site (for example <a href=”www.google.com”> This would go to google </a> would create a link to google with the text “This would go to google”)

You can see where your links are going without opening your website’s code by hovering the link. 

if this link said “atouab” instead of “about” it would be broken. Sometimes navigation issues are as simple as a typo in the url behind the scenes!

These next two issues are, admittedly, more difficult to fix than the previous 3, as they are usually decisions made at the start of the web design process. This can result in changes needing to be made in multiple areas and/or needing to make changes in areas that can have unintended consequences. But do not worry! The “pretty” site started as the “ugly” site, so these changes can definitely be made retroactively.

Poor Color/Font Choices

This one is also quite subjective as there are no objectively good/bad color pairings. However, there are objective metrics we can use, a big one being Contrast. It is important that elements have a high enough contrast ratio so that they are clearly visible on screens. Use tools like the WebAIM contract checker to see how your color pairings work together (note: if the colors are not near each other their contrasts don’t necessarily need to be tested. This would be more for text on background colors than it would for a left navbar vs a bar on the right. A good idea is to use a color palette, this way you have less decisions to make and can be sure that the colors work well together. There are many tools online dedicated to creating color palettes, if you have a specific color/colors you are sure you want to use, you can even generate a palette around your color of choice. Depending on how your site’s CSS is managed, this can be as simple as changing a few lines, to needing to change dozens of lines all around your website.

No/Poor Mobile View

Unfortunately, this one is also not the easiest fix. As mentioned in the first article, having a responsive/mobile view of your website is very important. So important in fact, that most web designs typically start with the mobile view and then expand on that for larger screens, as it is often easier to add more content given more space, than it is to cut content so that it all fits in less space.

If your site is cluttered and cramped on a desktop view, getting it down to a mobile view may involve an entire design rehaul. That extends beyond the scope of this article, so for now I will cover some CSS that is commonly used to ensure your site looks good on screens of all sizes.

Introducing: The Media Query.

Read more: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Media Queries allow you to assign “breakpoints” to your code. For example you can say “all of this code should only apply if the screen is smaller than an iPad” or “all of this code should only apply if the screen is larger than an iPhone”. This is a common technique used to design mobile views.

Take a quick look at this codepen, and see if you can make sense of it (I will explain in detail below)

So what is happening here? First we establish a default styling that will affect screens of all sizes. We set a couple defaults, but pay attention to background color: light-blue and h1 font-size: 24px. This means, unless otherwise specified, our site will have the light blue background and 24px h1. So if we open this site on a phone, tablet, or desktop, the background will be light blue. But what if we want the screen to be a different color on larger devices? Our media queries have us covered!

The line  @media (min-width: 600px) targets screens with a width of at LEAST 600px. 

 @media (min-width: 600px) {

      body {

        background-color: lightgreen;

      }

      h1 {

        font-size: 28px;

      }

    }

This means that for screens with less than 600px the previous code still applies (light-blue background), but if the screen is more than 600px wide, this new code comes in (lightgreen background), the font-size also changes.

This process can be repeated for as many screen sizes as you desire. Simply choose default behavior, and override it at certain screen sizes (in our example we add another query  @media (min-width: 900px)... This means that the lightgreen will only apply for screens between 601-899 px, as for screens above 900 the new CSS kicks in)

Wew… that was a lot. Hopefully the codepens helped (please let me know if you found these useful!). Take a minute to let it all soak in, and then go back to your site. Are you up for the challenge of making some of these changes?