This is a really quick blog post, it’s been far too long since I posted last and I am sure you are hungry for some more content. Recently, I have been conducting a redevelopment of migsolv.com and to help us design a better website for our users we asked users to test what they liked and disliked about one of the most successful data centre companies in the UK. It was quite interesting watching the videos back and listening to what they had to say, the people are very frank and straightforward and make it clear what is well designed and what could be done better. In this post, we share how you can get involved in usability testing as someone testing websites.
Blog
How to make sure you don’t get left behind in design.
You don’t have to be involved in the technology field to know that technology moves on and it moves on fast! In the three years, I have been practising web and graphic design I have seen coding and new devices appear on the market making the digital designer’s job harder each day. At times you will think to yourself I may get out of touch in my Industry. Don’t get left behind in design by creating routines and following simple steps…
Continue “How to make sure you don’t get left behind in design.”
How to install a local WordPress installation to your Windows PC – part 2
If you would like the first part of this guide/blog post please click this link and it will take you through to the local wordpress installation part 1. Once you have installed xampp then you will need to do the following things to have WordPress work on your PC. Continue “How to install a local WordPress installation to your Windows PC – part 2”
Is it ever okay to use a template for design
When a lot of creatives read this blog title I imagine a combination of fear, disgust and anger will be running through their veins at the suggestion of such a thing but in all honesty, even though I am a designer and creator of branding there is a place to using templates. In this blog post, I discuss several places when and where it is okay to use a template for design of a new digital presence. Continue “Is it ever okay to use a template for design”
Dos and donts of building your Instagram account
I have been using Instagram for over a year now and probably, not in the right way for building a following that relates to my brand.
I used it more as a way to store photographs of my personal life which is okay for some if that is all you want to do with this visual social media tool but I have bigger plans to connect with the world, fellow creatives and share my inspirations with people.
I realise if I use Instagram correctly to build a brand I can reach potential customers in a new and more entertaining way. But like anything, it is simply understanding tools properly to help you grow an audience that is interested in what you have to offer. Continue “Dos and donts of building your Instagram account”
How to install a local WordPress installation to your Windows PC – part 1
When you first start off creating WordPress based websites you will realise that because WordPress runs on PHP ( a server side language ) you will have to work on the live site whilst creating new content, styling and functionality. Continue “How to install a local WordPress installation to your Windows PC – part 1”
How to create the perfect blog post, a step by step guide
Blog post to perfection, learn how to create the perfect blog post with this step-by-step guide.
With the help of this step-by-step guide, you will soon become a master blogger of supreme SEO goodness. The first two stages I have created are for those who just want to get started in blogging and the stages after that are for those who want to take their blog posts that step further and make them super-powered to boost traffic to your website. Continue “How to create the perfect blog post, a step by step guide”
How to add accurate subtitles to your YouTube Videos
This may seem quite a strange thing to blog about but something that is becoming increasingly important to me is how accessible the content I provide to web users is. YouTube does have automatic subtitles when you upload a video but sometimes it doesn’t pick the exact words which can be humorous but not good for those who are hard of hearing or deaf. Adding the correct words to your YouTube subtitles will benefit your accessibility for those with hearing difficulties but also help others that may not be able to understand regional acsents so well so may call upon the subtitles.
How to add accurate subtitles to your YouTube Videos
Once you have uploaded your video you will come to a screen with your video and a few tabs at the top. If yo look at the image below you will see a tab named ‘Subtitles and CC’, click it.
Next you will see options to click English (Automatic) subtitles that YouTube automatically provide, once again, click this ( see image below if you are unsure what to click ).
Now you are able to edit the subtitles in the automatic feature. You will find a lot of the subtitles that have been created are very wrong. YouTube does try it’s hardest to pick up all the words spoken but if the video star has a strong acsent it will struggle, a lot! It can be quite humorous to watch but it is not good accessibility. Follow these two simple steps to make sure they are correct for those who wish to use the subtitle feature on your videos.
- To edit the subtitles let the video play and then click on the subtitles to replace what is being said accurately.
- As video plays click subtitle to stop section of video, also click time if it does sync correctly and change the time length to show the words you have edited to perfection ( see below to see subtitle being edited).
Once done there is a button at the bottom called publish. You bet you know what to do next, yep, click publish!
Now when a user watches your video and needs subtitles they will get the correct words display.
Well done you have added accurate subtitles to your YouTube video, you are on your way to providing a better user experience for one and all.
If you get stuck please feel free to contact me or leave a comment below and I will get back to you asap.
Related articles across the web
The importance of accessibility in web design
Web design isn’t just about putting your message across to as many people as possible it should be attractive, provide useful information, creates enquiries/sales, attract your right target market and be easy to navigate. As we all know we are all individual with unique characteristics, beliefs and abilities and it is important to make your website accessible to EVERYONE! It is part of the law that you consider the accessibility of your website in the perception of the able and disabled people in the world. Visit the W3 where they have put together documentation about web design accessibility.
Different disability accessibility in web design
Visual accessibility in web design
Visual ‘disabilities’ can range from blindness, to being short sighted, to being colour blind on varying scales and when designing a website you must keep in mind how different people see and access your website.
Images
How do blind people see images you may ask? Well there are two ways they are able to understand the context of images on websites. Firstly in every image there SHOULD be an ‘alt’ tag, this alt tag is to allow screen readers to describe what the image is displaying. For example if you have a picture of a cat wearing a tutu you don’t put ‘a funny animal picture’, it simply isn’t descriptive enough, put exactly what is in the picture ‘ a cat wearing a tutu’.
It has been common practice for a lot of web designers to use the alt tag to put the main keyword of the webpage into the alt tag which is fine (to some extent) as long as it is still descriptive enough to explain to those who need the alt tag to have a good web experience.
Ease of reading through contrast
A lot of people, in particular men, suffer with some form of colour blindness. This can range from not seeing one or two colours correctly to seeing everything entirely in greyscale (black and white). It is for this reason that there must be clear contrast of colours for those with colour blindness to be able to understand visual layouts correctly otherwise important information may get lost.
Is the text and the interactive features large enough?
Another disability that needs to be considered is partial sightedness. Sometimes a person is not entirely blind and can see some visual information, this should be considered when not only selecting the font size of the typography but also when designing the clickable areas of buttons and interactions.
Tools to test your website’s accessibility
A tool you can use to see if your site has considered visual accessibility in web design is a tool called spurapp.com. This tool takes your website and gives you all the scenarios to understand where your website could improve upon its visual design in terms of accessibility.
Access to photo editing software?
If you prefer you can do test with any photo/graphic editing software by taking a screenshot of your website and taking away the colour to see how the contrasts of elements look, use the Gaussian blur tool to see how readable the website is for someone whom may be short sighted.
Hearing accessibility in web design
Something you may not have considered is hearing accessibility. If your website has podcasts or videos you are going to need to consider how you are going to communicate the information to those whom are hard of hearing.
If you are creating podcasts it is quite important that you also include a transcript. Although this can be time consuming it is not only helping everyone be able to access your fantastic information, it will also be highly beneficial and also have the effect of helping you be indexed by Google if it is written in html with the correct syntax.
Likewise, if you have a YouTube channel for your business there is also the option to include ‘auto’ subtitles. This is fantastic that YouTube are trying really hard to include accessibility and make it as easy as possible for video creators to include them but sometimes the words are just plain wrong and can confuse matters! Instead, I recommend taking the time to write your own subtitles to ensure the ‘write’ words are shown .
Device Accessibility
And last but not least is device accessibility in web design. For quite a few years now responsive design has been at the forefront of designers who care about doing a good job. If a business has a responsive website it shows that they care about their users experience and not just about having a digital presence.
With more and more users now using mobiles and tablets to acccess website it is important that pinching and squeezing to read and view information isn’t a part of the user experience. It is uncomfortable and may give the wrong impression to visitors.
If you already have a website with lots of content it may be a little difficult to include responsive css code but if you are creating a new website it is much easiser as you write the html and then add css with something like @media screen and (min-device-width: 481px) and (max-device-width: 768px) {enter styling here}. It is quite easy to learn how to do this but if you need help you can find lots of information throughout the web but personally, I recommend using Teamtreehouse.com, i’ve been using it for over 6 months now and good practice of web design/development is made quite clear and easy to comprehend through the platform.
Accessibility is good for everyone
When you start putting accessibility at the forefront of your mind when designing websites and user experiences then not only is it going to benefit people with disabilities but it will also have the benefit of making your website more compliant with w3c web standards, making your site easier to index, improving organic search results and making your site run as efficiently as possible so remember, accessible web design is good web design.
If you have any extra points please feel free to leave a comment below.
Related articles across the web
Create infographics easily without Graphic Design Knowledge
To create infographics takes time, fact. Anyone who has ever had the inclination to design an infographic will know they are not that simple to create, you first have to collect your data, then select how you want to represent that data, is there a particular theme you can adhere the information to? Next you need to create graphic elements that will communicate the date effectively and lastly is there a way you can create a sense of flow in the layout.
Create Infographics faster
As you can tell that really does take time! Luckily for those without graphic design skills do have an answer to their prayers, easel.ly. This website allows you to create infographics from a basic template without the need to have spent time learning the mainstream vector creating programs. Below is a brief introduction into just what is possible with this fantastic infrographic tool.
Although this is a great tool for the novice graphic designer it can be quite limiting to what is possible and that is why an infographic created from scratch by a professional digital designer will always be slightly more professional and detailed than one created via a platform such as this. If you need an infographic quickly, maybe for a blog post and don’t have the funds to hire a designer at the moment this is a great option but otherwise I’d still recommend hiring a designer to communicate your data as professionally as possible.
Have you used easel.ly? How did you find it? Do you know of any other infographic programs? Please feel free to comment in the box below.
