DEV Community: Fraser McTaggart

Carousels are the best!

Fraser McTaggart — Thu, 08 Oct 2020 11:32:44 +0000

The idea behind scrolling banners is that you can fill an important bit of website real estate with a large amount of information. The problem it, they don't work!

Stop wasting important space

The top of your homepage is without a doubt one of the most important spaces on your website. You need something to catch the users' attention. A lot of people think that carousels do this - but they're wrong.

Conversion rates are dreadful

Only 1% of the users interacted with the slider, and of that 1%, more than three quarters only clicked on the first slide. So users don't really click on the carousel, and when they do, they only really click on the first slide.

Listen to the experts

You have seen one on your favourite website. You thought it looks cool. I thought it looked cool. Well, sometime cool isn't what you need. You don't want Mr T doing your bookkeeping, do you? It's best to listen to the data, and the people that gather the data. Here are a few marketing experts ideas on the carousel:

We have tested rotating offers many times and have found it to be a poor way of presenting home page content.

Chris Goward, Wider Funnel

Rotating banners are absolutely evil and should be removed immediately.

Tim Ash, Site Tuners

Almost all of the testing I’ve managed has proven content delivered via carousels to be missed by users. Few interact with them and many comment that they look like adverts and so we’ve witnessed the banner blindness concept in full effect. In terms of space saving and content promotion a lot of competing messages get delivered in a single position that can lead to focus being lost.

Adam Fellows

So what should we do instead?

Focus on your primary offer.

It could be a sale on an online shop, an offer on development packages or a pet name generator - whatever you want the user to do, tell them! Create an impressive hero shot instead - and don't forget a call to action.

You can read more on my blog - mctweb.co.uk

Calling all self taught devs - how do you check the quality of your code?

Fraser McTaggart — Fri, 02 Oct 2020 18:52:10 +0000

How do you check the quality of your code? Have you joined forces with others to code review each other?

I'm curious as to how others approach the subject!

Which devs should I follow on twitter?

Fraser McTaggart — Wed, 30 Sep 2020 11:04:15 +0000

Who are your favourite devs that you follow on twitter?
I'm fairly new to twitter and was hoping to get some new developers to follow!
Perhaps I should follow you?
My twitter handle is @frasermctaggart

I currently follow Wes Bos, Jim Laurie (strapi), Sébastien Chopin (nuxt), Adam Wathan (tailwind)

Website Builder vs Web Developer - What should you choose?

Fraser McTaggart — Mon, 28 Sep 2020 18:21:26 +0000

Wix, Squarespace, and GoDaddy Website Builder are all very popular ways to create a website. I can understand why many businesses take this route. These tools allow anyone to create a website and get their business online. Why would people spend hundreds, thousands, and even hundreds of thousands to create a website?

There are lots of reasons! I like this analogy:

"Why do people still visit restaurants when they can have a microwavable tv dinner?"

Obviously, I'm slightly biased, however I urge you to do your own research and come to your own conclusions.

1. Human vs Machine

No DIY website builder is capable of doing market research, competitor analysis and keyword analysis. This is one of the first steps that any web designer / marketer worth their salt will take. You need to find out what works, why it works, and why something different may work. This can be specific for regions and different types of business. Content, layout, page structure, design and tone all need to be decided on with careful consideration. These are things that developers learn over several decades.

2. Leave it to the professionals

Sure, you can watch a youtube video and know how to rip out a bathroom and put a new one in. Does this mean you should? Probably not. There are some skills that you need to hone over many years to perfect. To add to that, websites and web development is changing at such an incredible pace. Look at amazon 10 years ago. The design has changed significantly, and the way it has been designed and deployed was unimaginable 10 years ago. Most business owners don't have the time to invest to learn about all of the things that are important in web development. Even web developers that have been doing it for a long time can fall out of touch if they don't keep themselves invested in learning.

3. Customer satisfaction

If you create a website with a website builder, more often than not, you will come back to a web developer further down the line. Just take a look at some of the reviews:

Trustpilot reviews for wix

"DON'T GET SIGNED WITH WIX YOU WILL REGRET"

"Horrible customer service"

"They make it very difficult to cancel your plan, I have been trying to get help for over a month and they did nothing but answering with vague emails."

"I am an idiot for not checking trust pilot. I looked around on google and this seemed to be the best way to set up a site for rookies."

"The online help is narrow and limited and I never seem to be able to get an answer to any problem I have. Performance wise, the Editor has become slow and buggy. I am now exploring a local web design company to transfer my sites away. I have invested around £1k with this lot so far but not any more. Be warned."

4. Extra functionality

Website builders are not yet capable of more in depth development. However this may change in the future!

You can read more articles here:
www.mctweb.co.uk

What do you offer to clients to persuade them away from website builders?

3 Painting concepts that can improve your website design

Fraser McTaggart — Wed, 23 Sep 2020 12:12:42 +0000

Painting has been around for thousands of years. During this time these painters have learned one or two things about design. Important things. The great news is that many of these fundamentals can be utilised when designing for the web. I have spent many years getting oil paint on every surface in my house. To save you time scrubbing your furniture, clothes and child with turps, I've put some of these fundamentals into a handy list for you.

Focal Points

You generally have focal points in paintings, photography and websites. These are areas that draw your attention. You don't want all of the elements competing for the viewers attention.
From the focal point you have to lead them by the hand to other parts of the painting. This is true with websites. You generally have a hero banner with something you want your users to do ( a call to action). These should be your focal points. Your call to action is usually the second focal point, after their attention is grabbed by an image or illustration. Sendinblue has a great video as their focal point. You look at the video first, then you are drawn to their call to action button.

Here is a great Waterhouse painting that has an incredibly strong focal point.

So how do we design a focal point? What makes something stand out? Usually, it is a change in a property of the colour.

The first way is a change in value, this is the easiest way to make something catch the viewers attention. I have made an image and split it in two. Each side has a small square with the same colour in the centre. As you can see, the one on the right draws your attention more. This is because the difference in value between the square and the background is greater than the other half.

The other way to make something stand out is to have a low saturated colour next to a saturated one. Which yellow square stands out more?

The one on the right. This is because the difference in saturation is greater.

Interesting Shapes

To keep an image exciting and interesting when painting or designing, it is vital that you have a variation of shapes. Stapleton Kearns calls ignoring this principle 'Potation' - where everything looks like potatoes ( or similar in shape ). If your site is just made up of only squares, then it can get visually boring for the user. Mix it up by overlapping elements, this also introduces depth.

This image is from the Dutch master Dirk Van Assaerts, which is actually a fictional persona made by Stapleton to highlight dumb design ideas.

On MCT Web I have used overlapping shapes to try and keep the user interested.

Space is important

Space creates interest. For an area to stand out, you need to have other areas that have less in them. This Rockwell painting has loads of negative space. Negative space is the space between things. The white in the shirt and chair split up the background and the focal points. These areas help to frame shapes and draw the eye.

Space is equally important in web design. Take a look at all this space on google.com. It makes it obvious to the user what they should do.

Then take a look at the famous LingsCars. It's not quite so obvious what you should do. It also emulates having a stroke, so there's that.

Let me know if you find this sort of post interesting, because there are many more principles that can be translated over and I would be happy to write about them.
You can get in touch with me via my website MCT Web

Why wordpress?

Fraser McTaggart — Sat, 05 Sep 2020 14:51:08 +0000

Why not Wordpress?

Without a doubt the most popular content management system in use today is Wordpress. It is said that 30% of the whole internet is run by WordPress. One of the reasons why WordPress became so popular is that it can be installed by anybody without any technical knowledge in under 5 minutes. Another reason is speed of development. As there is such a vast collection of WordPress Themes available, novice users can define the look & feel of their WordPress website by just choosing any of the free themes offered at wordpress.org. Installing a theme couldn't be easier - just login to your WordPress install, choose a theme, click "activate" - that's it. This is the perfect scenario for web developers looking to make money. It is simple, fast and profitable.

So why don't you use it?

Wordpress started as a blogging platform and added to and patched so it can power whole websites and even ecommerce sites. This wasn't the initial reason for Wordpress, so if it is used as anything more than a blogging site, the website site will most likely be bloated with unused code, making your site slower.

Are they all bad ?

No, I'm not saying that all Wordpress sites are slow or bad. If the website creator doesn't use a pre built template or template creator, then it is possible to get a fast site. The fact of the matter is that almost all Wordpress sites are using templates. This is definitely something to be concerned about.

Why would I worry about this?

Many studies have shown that a website's bounce rate ( the percentage of visitors to a particular website who navigate away from the site after viewing only one page. ) are higher when the site takes longer to load. For users with an average page load time of 2 seconds, the bounce rate is quite low - only 9.61%. This goes up slightly for those with an average page load of 3 seconds, to 13.0%. 4 second page load time having a bounce rate of 17.1%. This raises to 22.1% for a 5 second page load. And if users experience an average page load time of 7 seconds, the bounce rate is 32.3%. This is such an important factor for your website to be successful, and one that should not be ignored. Google also factors your page speed in its search engine rankings, so for great SEO you should be aiming for a blazing fast site.

So if not Wordpress, then what?

There are loads of other options available. I am an advocate for JAMstack sites. This means that when a change is made using the content management system of choice, this triggers a build and the site is compiled into static files and automatically uploaded. This means faster load times, more security and better search engine optimisation. For basic sites, I really like using a GIT based content management system. For a lot of uses this is sufficient. Any unwanted changes can be restored from the complete history. For more complicated sites, I have used Strapi and really enjoy the flexibility and simple user interface.

Have you used wordpress? Would you recommend it to clients?

mctweb.co.uk

What is your design process?

Fraser McTaggart — Wed, 02 Sep 2020 13:59:45 +0000

It is important to have a workflow that works for both you and the client

What are the stages to your design process?

Discovery

It is important to establish the scope of the project and also to gain insight of the company you are designing for. Ideally, a face-to-face meeting before work commences will help to ensure that you and your client's visions are aligned. Due to the global pandemic, a phone call and email questionnaire can also be used.

At this stage it is essential that you are happy with your relationship with your client. As with all relationships, if you get a bad feeling then it probably isn't worth persuing. Refund the deposit and say farewell!

Plan

At this stage a sitemap is submitted and discussed so that each party is happy with the general structure of the pages, and also the rough content that will be displayed. Next up, the designing can start.

Wireframe

I usually create black and white wireframes at this point. This will put down on paper the general layout and visual structure of the pages. I break these into components that can be reused, to ensure a consistent look throughout the whole site.

Mockup

Components can now be created fully in design software and the finer details can be discussed, such as colour, hover animations, button animations and visual prompts. Of course, some people trust your judgement ( that is why you have the job ) and this may not be required, or wanted!

Full Page Visual

Once everything is appoved, then we are free to create a homepage visual. This is one of my favourite stages in the process, and it is important to get correct. This will be the first real visual that the client will get, and sets the tone for the rest of the site. I usually spend a lot of time tweaking at this stage, ensuring that the site fit in perfectly with the company's branding.

Presentation

It is usually best to present the homepage design proposal to the client in person. You can gauge their reaction and also explain the decisions you have made. Why have you not put a giant chat window in the corner? Why can I not get every page from the navigation bar? Why have you not used the low resolution picture from my facebook page that has my mum in it?
Alternatively, present the visuals as responsive pages so the client can see a desktop and mobile version of the homepage.

If you have been thorough with the previous stages, then 9 times out of 10 there will be no changes required. You've nailed it. You can crack on with the code!

That's my process, what is yours?

You can find more articles on my website - www.mctweb.co.uk