burger style menu opener

Setting up a web development process

If we want to turn visitors into customers, giving them a hard time when they visit our website is probably not the best business plan. They come to us seeking a solution to a problem. Let’s not make matters worse with a badly designed website.

To anyone who’s never created a website, the rather daunting task is made easier when we break it down into different roles.

  • Content writer
  • Graphics editor
  • Designer
  • Developer

Whether one person in four guises, or a team of many, adhering to certain guidelines ensures our visitors have an enjoyable experience.

Each role is approached separately, however: you may find it helpful to add a coordinator to the list of roles, or at least create a coordination process.

the content writer

It's good to remember not all our visitors are Masters of literature, so writing in a natural, rather than academic style, will likely appeal to a wider audience. Personally, I prefer to align my writing style with the way I speak. Omitting the profanities of course.

When talking to complete strangers, which is what we do as web developers. I try to imagine I’m talking to a friend I’ve never met. I never explicitly state my credentials in order to impress. I’m much more comfortable letting them come to their own conclusion by reading between the lines.

Presentation

The typical paragraph style way of providing information, even when done in the style I've just outlined, will not touch all the bases. We all have our optimal way of absorbing information. Then there’s the skim reader to consider. All websites have this type of visitor.

Visibility

Not everyone has twenty twenty vision, while causing people to squint or zoom to read text is a capital offence with no chance of mercy. To avoid incurring the wrath of the visibility gods, I always use a minimum font size of 16px and ensure that the text contrasts well with the background.

If you want a larger text size on desktop displays, the developer can code the text to size accordingly

Headings

HTML provides us with 6 headings ranging in importance, with h1 being the most important and generally only used for the page heading. The second heading (h2) is ideal for each page section. The rest are used for subsections.

As well as improving readability and presentation, using heading tags in the html helps those using screen readers.

font-families

If so desired, we can use a single font family for all the text, but normally I choose a font: for the headings, paragraph, and any decorative text I may use. Using variable fonts allows me to differentiate separate elements with slant and thickness.

Catch All

Presenting the same information in different ways ensures a better understanding and gains more attention. Let’s take skim readers as an example.

Scrolling down a page at breakneck speed, in the hope that what we’re looking for jumps out, is probably something most of us are guilty of. So how are we going to grab the attention of the skim reading fraternity?

The answer is simply bullet list, graphics, and color. But only the first one concerns use at this stage.

Bullet lists

Bullet lists summarizing the discussion are a great way of catering for those with neither the time nor inclination to read long passages of text. Graphics relative to the topic also gain the attention of those who have better things to do.

Obviously if our little attention grabbers have created an interest, our visitor may decide the section worth a closer look. Bullets and graphics carry the added benefit of giving our readers a gentle respite from the monotony of the moment.

Speak with your audience on equal terms

After reminding ourselves that our visitor is wanting a solution and hasn’t landed here to have us lecture them. I’m sure you’ll forgive me for this, but don’t use don’t, or any dictator type words.

Explaining the negative impact, even with humor, is a much more subtle way of achieving the same ends. Consider these three offerings. Two of them allow our readers to think for themselves.

(i) Don’t buy hosting from GoDaddy.
(ii) I can certainly recommend GoDaddy hosting to anyone with a total disregard for their sanity or financial well being.
(iii) GoDaddy are notorious for luring people with their promotions, then charging an arm and a leg when it comes to renewal time.

    Section summary

  • !
    Speak naturally
  • !
    Engage your audience on equal terms
  • !
    Separate different areas with headings
  • !
    Present the same content in different ways
  • !
    Use content related graphics

graphics and graphic design

The concern here is relevancy. Reading the section and creating or finding an image that summarizes the context. The unwritten rule, often a judgement call, is that the graphic should attract rather than distract.

Graphics with colored backgrounds tend to be too distractive if used in the wrong place. Transparent background images blend in more effectively.

Using Pixabay as an example, I refined my search to XXXX. this usually returns images with white or plain colored backgrounds, which I then remove and save as png or webp format.

While free image editing programs are available, they often require upgrading to remove certain limitations. Personally, for removing backgrounds, creating icons and other graphics, I use Youzign.

When creating graphics I rarely add text to them, I find this restricts usage and it’s not always possible to match the font families with the rest of the website design. I can add text overlays using HTML. This allows me to reuse the graphic but with different text.

    Section summary

  • !
    Ensure the graphics are relevant
  • !
    Maintain color scheme integrity
  • !
    Use grapics with transparent backgrounds
  • !
    Design graphics to be reusable

the design process

At this point we have the color scheme, text and graphics. Now it’s time to arrange them.

Go easy on the reader

White space

Trying to absorb information from a page with every available pixel filled up is not what life’s about. So giving some thought to empty space allows us to take in what they’re reading.

Line length

Today’s wide screen devices give us a lot of real estate to play with, but that doesn’t mean we have to use it, particularly with lines of text.

Trying to follow a thin line the width of a small island with your eyes is no easy task. Forcing a reader to absorb the context of the message at the same time is only going to get you crossed off their Christmas card list.

As a benchmark I use a 16px text size at normal screen size, and try to keep the number of characters, including spaces, to less than eighty.

Consistency

Theme colors

Even something as simple as colors can turn around and bite us if we allow them to run wild. They have to be tamed if we hope to make full use of them. To do this all we need is a color wheel.

Using opposites or tri colors we can ensure our colors stand out when overlaying each other. Then add a few lighter and darker shades of each, and that’s our color theme taken care of.

Treat your colors as if they were the blood running through your veins. Adding new colors to your theme is like adding toxins to your blood. The only exception being those in images you have no control over, but even then, I try to abide by the rule.

Using colors consistently helps a visitor identify what type of information they are indicating.

Looking at the bullet list below, notice the bullet color and that the bullets are related to a summary of this mini section. Scrolling down further, you’ll see a similar styled bullet list. What do you associate that list with?

Structure

Some structural changes occur naturally, such as between sections. otherwise the structure remains the same. By structure I mean the way the same parts are laid out on different pages.

Compare the banner at the top of this page and the one on the home page. You’ll notice that the text and image are different, but they still occupy the same area, and the font family is the same. In other words: you know you're still on the same website.

Changes between sections

Moving between different sections, such as web design and cloud computing, does allow us a little wiggle room. Even then I prefer to tread carefully. I may alter the structure of a component, or the color, but never both.

Why is structural and color integrity important?

Imagine what it would be like if everytime we moved to a new page, we had to check if we were still on the same website. I’m not sure if that’s the best way to gain admirers. So I think I’ll stick with allowing visitors the pleasure of knowing exactly where they are.

Responsive design

Layout

Achieving responsive design is left to the final build. At this stage our only concern is how it should look on each screen size. The range is from everything stacked in a single column, to everything laid out in a single row.

Scrolling up and down is unavoidable, but sideways scrolling is not considered user friendly. To eliminate this horizontal scrolling, we arrange the layout according to screen size, such as mobile tablet and desktop.

Navigation

We can use a slide out navigation bar for all screen sizes that opens when our visitor clicks on the navigation icon. However: it’s more common to also create a top navigation bar for larger screens.

    Section summary

  • !
    Design for the reader
  • !
    Maintain color and structural integrity
  • !
    Allow the reader time to absorb the information
  • !
    Adapt for all screen widths

Building our website

Now it’s time to make all our dreams come true.

Regardless of what it is, section, heading, paragraph, list, or graphic, it is an element and needs styling and positioning. They can be standalone or placed inside other elements. To achieve this we use HTML to create the elements, and CSS to size, position and color them.

Keeping things semantic

All these are semantic elements and understood by screen readers. We can style them any way we want.

A div element is not understood by screen readers. They’re used purely for styling and positioning. To help screen readers, I always try to put divs inside semantic elements.

List elements

Html list elements will most certainly require some attention. Out of the box they’re pretty boring and desperately in need of some tender loving care, either by putting divs inside them, or creating list-like blocks from basic “div” elements.

Designing for a fast page load

CSS frameworks

If I were lazy and didn’t want to write a lot of CSS, I could include a CSS framework, unfortunately these files are huge and contain a lot of code I’m never going to use. I would then have to add more CSS to adapt them to fit my needs.

The need for a global style sheet will still exist, but only for styles, such as color, that are used on every page.

CSS custom variables

Having to go through every page and change a color because the designer has decided on a change, is no way to live your life. It’s much easier to create a global palette and refer to it each time a color is used. Then you only have to change it once, on the global stylesheet.

Variable fonts

Loading various styles of the same font used to involve separate journeys to bring them back. Now, with the concept of variable fonts, we can reduce the number of journeys.

    Section summary

  • !
    Use semantic markup
  • !
    Only use non semantic elements for styling and behavior
  • !
    Add CSS to the head
  • !
    Avoid frameworks
  • !
    Use variable fonts
  • !
    Use CSS custom variables

Congratulations, you're ready to begin

Now you fully understand the concepts of user experience, it’s time to organize a team based on their existing skills or eagerness to learn. I often do this alone, but find it much easier to adopt each role as I go along.