How do web designers make websites (basic coding examples)

Web developers use various different platforms and kinds of  code to develop websites. At base, all of them use a combination of HTML and CSS (short for Cascading Style Sheet). From there, depending on the projects preference and needs, designers might also use PHP and Javascript (to name two).

Web development & CMS

As of writing this, w3techs.com shows that Content Management Systems (CMS) are the foundation of 56% of the worlds websites. As far as popularity goes, 61% of them are built on WordPress™. The next 3 most popular platforms are Joomla™ (4.9%), Drupal™ (3.1%), and Shopify™ (3.0%).

Side note: We develop all of our websites within WordPress and we are Shopify Partners.

Some web development code examples.

Some raw examples of HTML.

At it's most basic level, a website is a file type (a .html in this example) that has an opening HTML tag, followed by a body tag, followed by some content.

code example-01

As a stand-alone HTML file, that would load a fully functional webpage. But it would be rather.... plain. To dress it up, web developers use CSS.

Some raw examples of CSS.

As you can see in the example above, the body lacks style. Typically, the style is addressed in a separate file called a CSS file. Its code is simple to follow (see below): the body is getting a background color of lightblue, the h1 (or heading / title of the page) is going to be colored white and center aligned, and the p tag (short for paragraph) will use the verdana font and be sized at 20px.

body {
background-color: lightblue;
}

h1 {
color: white;
text-align: center;
}

p {
font-family: verdana;
font-size: 20px;
}

Wrapping it all up.

The code itself is actually very simple. It just that there's a lot of it, and learning it all to dress up a site nicely requires practice. Most websites require many lines of code, and CMS systems like WordPress, Joomla, etc., require a combination of HTML, CSS, Javascript and PHP, which means they often have hundreds if not thousands of lines of code that usually (HAH!) work together well.

And there you have it. That's how web developers develop websites.

Examples of code courtesy of www.w3schools.com.

What is the difference between web design and web development?

According to my keyword research (SEO stuff!), the broad terms web design and web development are nearly interchangeable. Both boast near equal amounts of monthly traffic and both branch out into similar long-tail keywords. This hints that the general public might not see a difference between web designers and web developers. But if we were to get picky with definitions, there is a traditional difference that matters, well, it would at least matter if you were applying for a formal job.

(more…)

How to create a social media following.

Participate in online conversations:
Every post related to your topic of choice allows you to interact with people who are posting and sharing content with the same interests (for example, supporting the #bees trend). If you’re stuck with the how, try imagining you’re at a party bumping into people having conversations. Be real. Its easy to spot someone trying to self promote for sales. Be engaging. Share resources, talk openly. If someone is interested in what you have to offer / say, they’ll check out your profile. Some people will follow you. Some will even check out your website.

(more…)

How to optimize Headers H1 – H6 | SEO Tutorials

Here’s the easiest way to optimize your web page’s header tags: structure them as you would a book, essay or short article. Unsure how to do this?? Here’s some why and how.

(more…)

How to handle duplicate content, like duplicate pages, titles & headings.
SEO Tutorials

The definition of Duplicate Content.

Your content’s flagged as duplicate content by search engines when it’s found on other pages within your own domain or found on someone else’s website. I’d also like to add that the content doesn’t need to be identical in order to be considered a duplicate, similar is enough.

(more…)

What is a bounce rate and how does it affect landing pages?

Websites have been a favorite marketing tool for quite sometime now. Much of this has to do with the in-depth back-end metrics that analytics provide which allow us to track what happens when a visitor lands on a specific web page. One of the metrics analytics provides us is bounce rate. And it’s calculated by how fast a user leaves a website after it’s arrived. In this case, the quicker users leave websites, the higher the bounce rate is.

(more…)

Top 7 Small business web design mistakes.

A user-friendly website is your most powerful tool for your marketing efforts when you’re a small business owner. And a large part of this is making sure that users landing on your website have all of their questions answered in regards to your product(s)/service(s). If it’s designed wrong, you will be missing out on sales opportunities and a loss of revenue.

(more…)

Why does user experience matter in website design?

UX critically affects the success or failure of your website. If the user finds the website intuitive to navigate and the content easy to digest, it will positively assist your marketing efforts. If not, well…

(more…)

 

Colour theory and its emotional associations.

Being able to settle on a single colour for a design is a difficult task. Hopefully, you will have a better understanding of how colours affect our emotional response after reading this article.

Whether we want to admit it or not, we all have an in-depth psychological relationship with colours; it influences our emotions and behaviors. For example, sports team would alter the away team's locker room colours to directly affect them psychologically. And basic colour psychology is used by businesses to increase productivity with workers or encourage shoppers to spend more money.

As you can see, we use colours to stimulate emotional responses. But it should be noted there is no universal truth. Different cultures view colours in different ways and might respond differently to certain colours than another culture. Also, personal experience alters emotions pertaining to a specific colour. Regardless of this, what's important to understand is colours affect us and evoke specific responses. All we need to do is be mindful of which cultural and personal context we're working in.

Perception of temperature: By painting a room with specific colours you can alter their perception of the temperature. Using green and blues you can create a space that appears to be cooler, whereas by painting a room red or orange it has the opposite effect.

Acceptance: In the past, we have all been able to look up to the sky on a clear day and see the colour blue. We often associate blue with being good. It is one of the easiest colours to utilize to appeal to the majority of people.

Reduce analytical thinking: The colour red reduces how effective we think. You may already be aware of the fact when people wear the colour red we find them more attractive. Maybe that's due to red hindering mental focus. Also, athletes lose more often to an apposing team that wears red. ... And students exposed to the colour red before taking a test are likely to have lower scores.

Value: We often associate the colour orange with good value. Brands such as Amazon and Home Depot have incorporated the use of orange to influence our emotional perception to assist our response as a low cost supplier of costly goods.

Spark Creativity: The use of green has been linked with creative thinking, and we often associate green with growth and positivity. This most likely lends itself to spring, when the trees and plants start to grow and flourish. If you are looking to increase productivity in the workplace, you consider using the colour green around the office.

Calm down: We associate the colour pink as calming or draining of energy. Some sports teams in the past have painted the visitors locker room pink in order to lower the mental state before heading out onto the field.

Research has provided us with data that colours directly effect our emotions. Just remember there is no universal rule that says colours will affect us all the same way, but it may just provide you the home team advantage.

Below is a colour guide of existing brands and their associative colours.

Are you taking advantage of colours in your branding?

COLOUR THEORY infographic

What is UX / user experience?

The UX or the user experience is how a person’s attitude and emotions relates to a product or system.

The context for understanding where the UX / user experience fits in.

In recent years there's been extremely high competition in how people interact with computer applications, mobile apps and web development. And due to high competition, developers focus extensively on how to maximize our experience with the software with the least amount of effort on the users part. The ultimate goal is to ensure that product meets the following metrics listed below. Now, keep in mind, the following list operates on a sliding scale for each separate person rather than a yes or no checkbox.

The main factors outlining UX.

Purpose: Does the system fulfill a purpose? This may sound ridiculous, but, keep this mind: just because it's useful to one person, does not mean its useful to another.

Usability: The ease or complexity to use a system. Try to ensure anyone who uses the system can do so with little to no effort.

Availability: Does the system allow for non-conventional variables, such as accommodating persons with disabilities.

Desirability: The overall design and aesthetics of the system needs to be pleasing to help evoke appreciation and emotions. One example of this is how car companies change and update models every year. The goal is to have its users fall in love with the overall design, function and just about every aspect of the vehicle, including the brand behind it.

Brand Authority: The system has or evokes trust within the system. In order to offer a system that people can trust, the company behind it has needs to be to hold high standards and ethics people stand behind.

Accessibility: It needs to be easy to find and use the given system. Having a great product or service is a start, but people need to be able to find and access it. Also, is it easy to purchase?

Once all the of the main factors have been carefully considered, and you have your product or service in hand, it's time to test everything out and carefully evaluate the metrics you receive. When it comes to web development, it's often easily done with website metrics as you can track almost everything regarding a website from the amount of traffic to a landing page to where they came from, to what they searched to find you. Then, after looking at the data you've collected, you begin making alterations and tweak your efforts to produce the optimal results.