Recommended Agency

text controls: text only | A A A

Sorry, our twitter status is currently unavailable, posted about 1 hour ago

RSS feed icon What is RSS?

blog.

articles tagged with: webdesign


Displaying all 4 articles

Hex colour codes explained the quick way

Hex colour codes explained the quick way

When I tell people I’m a graphic designer the most common response is an enthusiastic “So you design logos and stuff?” - always the logos, what’s up with that? Much less interest in the digital solutions provided with websites and apps but at least they’re excited about my job.

It beats the common assumption many make: that I can fix computers. You should see the disappointment on people’s faces when I can’t tell them why their laptop won’t turn on. Umm… is it charged? Yes? Then I’m all out of ideas.

Similarly, as the designer at focus, I felt like a bit of a let-down when I could only loosely answer a question from a curious colleague: “How do you think they decide on the hex colour codes?”

Turns out staring at someone blankly then googling the answer is a conversation killer. But now I’m armed with that knowledge should someone ask me again. What’s that you say? How do they decide on the hex colour codes? Allow me to explain as quickly and clearly as possible. I hope you’re sitting comfortably, this might be a bumpy ride…

 

So what is a hex colour?

Hex is short for hexadecimal. You might recognise these, #0000FF for example represents a shade of red. There are sixteen possible characters, these are 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E and F.

Each of the characters represent an integer (a number that is not  fraction) from zero to fifteen. Here’s how we go about converting integers in to hexadecimals.

As an example we’ll convert the number 255 to a hexadecimal. To do this we first divide 255 by 16 (the number of available characters). The result is 15 with a remainder of 15. If you look at the chart above 15 is F.

We put aside the remainder figure (15) for a moment and divide the resulting 15 by 16 which is 0 with a remainder of 15. We already know 15 translates to F.

So now we have nothing left to divide, these figures we’ve been putting aside go together in reverse order (please don’t ask why, I’m not sure either of us could handle the answer to this too) and you get FF.

 

What is RGB?

To help you understand the rest I’ll have to briefly summarise RGB value. At this point I have to hope you’re even still with me but for those of you who are, I promise we’re getting somewhere with this!

RGB stands for Red, Green and Blue. The RGB value of that same red used in the hex example above would look like this: rgb (255, 0, 0) the first number represents red, the second green, and yep you guessed it the third, blue. The values range between 0 and 255.

Simply put, the hex code is created by applying the swanky little mathematical method I just explained to you, to each individual RGB property.  R = 255 which we now know translates to hexadecimal as #FF. You’d then do the same calculation for green (G) which is zero so presented in two figures is 00, value of B is also zero, so that’s 00. Giving us hex colour #FF0000 which is the exact same red as rgb (255, 0, 0).

 

Stop the clock!

How did I do? If you have any questions about this article you’re not the only one, I mean, please feel free to get in touch.

 

Jordana Jeffrey
Jordana

Created on Wednesday August 07 2019 08:00 AM


Tags: webdesign design


Comments [0]








Dyslexia friendly websites, are you thinking of the 10%?

Dyslexia friendly websites, are you thinking of the 10%?

Lately I have been thinking, if 10% (6.68 million) of the UK population are dyslexic why is making a website dyslexia friendly not as important as providing a site in different languages?

Dyslexia awareness has come a long way since I was a child, I remember being told “you’re just a bit stupid” when I struggled in school, as society’s awareness increases,  I can see that those days are far behind us. Dyslexia affects a persons ability to learn, read, and spell, but it’s not related to intelligence, and charities such as http://madebydyslexia.org/, backed by Richard Branson, have done a great job at promoting and changing public perception.

What’s the problem?
One of the most common traits of people with dyslexia is difficulty reading. Dyslexics read at an average of 50 - 150 words per a minute, the average reading speed of a non-dyslexic is 250 words per minute. There are interactive examples, such as Dan Britton’s typeface that let you experience what reading is like for someone with dyslexia. 

Whether you have an Ecommerce site or a wiki, you want everybody to find it easy to read the content you provide.

What can be done? A few simple steps:
 
Fonts
Research from Dyslexia Help has found that there are certain font types that have an impact on reading speeds for people with dyslexia. A font has been specially developed called ‘OpenDyslexic’ to give optimum reading speed. Although this is down to the preference of the user, some of the best fonts for an increase in reading speed are Helvetica, Courier, Arial, Verdana, CMU, Sans Serif, Monospaced, and Roman Font.

Colours
When it comes to colour, contrast is an important factor for a dyslexic. Generally, people with dyslexia find it difficult to read with high contrast levels and read faster when contrast levels are lower. The standard black text on a white background is not beneficial to people with dyslexia as it can appear too dazzling. Off-whites and pastel colours are generally a good alternative to white and offer a lower contrast.

Icons / Pictures
The phrase; ”a picture paints a thousand words” can most definitely be applied to a dyslexia friendly website. Pictures and icons are a dyslexic's best friend, if you can you use an icon in place of text then this can drastically reduce the time that a dyslexic user spends trying to work out what it is on the page.

Time
In school exams dyslexics are given 25% extra time. Therefore it’s good practice to apply the same rule to moving elements on your site, such as carousels, so that they have time to read and process the content.

These are just some small, simple changes - but there is far more that can be done, just check out the British Dyslexia Association for a full style guide.

Resources:
https://cdn.bdadyslexia.org.uk/documents/Advice/style-guide/Dyslexia_Style_Guide_2018-final-1.pdf?mtime=20190409173949

Dan Stephenson
Dan

Created on Thursday July 04 2019 12:05 PM


Tags: website accessibility disability content contentstrategy screenreader webdesign


Comments [0]








Your web presence - are you doing enough?

Do more. Mac on desk workspace

What is web presence?

Web presence in a nutshell is all things digital that represent and showcase your business or organisation and brand online.

This can include your website, targeted email campaigns, regular e-newsletters, digital branding; where areas of your branding is adapted for web use, this should match any physical or offline branding but be optimised for web use such as colours, logo size and quality or fonts. Web presence also includes the following:

·Social media, the use of Twitter, Facebook and Instagram or online networking through LinkedIn to build reach.

·Content; On page, regular blog posts or videos.

·Organic Search on and off site, or PPC campaigns through Google or even Facebook depending upon your audience.

Importance of an online presence

Why is this so important? Well, your web presence is your voice before a prospect gets to talk to you, it is your virtual shop window. It creates a platform for businesses and organisations to strengthen their brand and entice prospects.

A professional looking site has the potential to level the playing field between the smaller and larger businesses.

Your web presence is where you can raise your creditability, show your expertise within your industry and increase the trust and authority you hold over any niche services.

I hear a lot of people say that they gain their new business through referrals. Well that may well be true, but that referral will more than likely check the website to ensure they do in fact offer what the referred person needs. For example, when someone recommends a restaurant or hotel you most likely check it out on TripAdvisor and go through their website too. If they didn't have a website or had no offsite reviews or social media presence at all would you trust that referral? Probably not, you would click else where just as this prospect would.

Your website needs to showcase your brand, who you work with, what you do and how you do it and the other avenues of your web presence should align to this too. This in turn will aid the sustainability and growth of the business.

B2B customers get up to 70% of the way through the buying journey before they're ready to talk to anyone about making a purchase and the average paying customer will have had 7 touch points before converting. These touch points can vary in platform hence why the web presence is so important. They may read a leaflet, see a post on Facebook, follow you on other social media channels, sign up to a newsletter, visit a shop and have numerous visits to the website, all before making a purchase or signing up for a service. For 81% of people looking to make a purchase they will look to the internet, if you aren't there then that potential customer will find someone who is.

To stay ahead of the game with this trend you need to show up in the initial research phase which will most likely include a Google search and looking through the first few organic rankings. You should also have a fast loading, easy to use, responsive website that has https on any data gathering pages at the very least. Having reviews or case studies available to users and relevant, engaging content can also be a real game changer in conversion rates for you.

Working on digital content

Doing enough?

Sometimes it can be hard to tell whether you are doing enough with your web presence. No one expects a business or organisation to necessarily be covering every point that's been mentioned within this post. Generally speaking, to get going you need a good website that is built professionally so that it can achieve what you want it to, is fully responsive and secure (https) that is then filled with engaging, relevant content.

Having a blog as part of your website is a great way to keep people coming back as you can let them know when new content has arrived. You can use a blog to promote certain products and services or tell customers and prospects what the company has been up to! As part of this content (including blogging) there should be potential to cover some on site SEO (search engine optimisation) this can be done by creating on page quality content that covers services, products or information that you want to rank for. The rest of this can be done with the set-up of your site or through most CMS (content management systems) post going live.

It is also best to set up a Google my business profile and ensure all the details match those of your website. Finally having some sort of social media presence is becoming more and more important and relevant. Rather than trying to cover every platform choose one or two that seem good for your audience and master them through regular posting of great content and sharing of other relevant content that you may come across. Remember you can do PPC campaigns on social so when you feel confident and have some budget for extra marketing they can be a great area to expand into.

Talk to us more about your web presence and how you're doing by emailing: simon@thisisfocus.co.uk or stephanie@thisisfocus.co.uk and we'll organise a call.




Designing for Mobile and Accessibility

Designing for Mobile and Accessibility

Making websites accessible for people with disabilities is an integral part of high quality websites (in some cases, it's a legal requirement!).

As a designer at Focus, that's a big responsibility. It's easy to get overwhelmed by all the things to consider when designing for accessibility. I'm an active member of the web accessibility community in Bristol and often attend presentations that can get very technical and propel me far from the safety of my design knowledge. It's at this point that I call on a skill I've had my whole life: empathy. An important thing to remember is that accessibility is about understanding people and the barriers that they face.

Many of the barriers people with disabilities are faced with, also effect people using mobile devices when interacting with web content. Some examples of this include the fact that mobile phone users will struggle if a website's navigation requires the use of a mouse. Similarly, desktop computer users with a motor disability will have a hard time using a website if they can't use a mouse.

Some shared experiences are comparable to temporary disability; If you need to use your mobile to access a website when you're at a concert, the noise that surrounds you likely means you are experiencing the website similar to how a deaf person would. Equally you may struggle reading small text as those with low vision do with most text. The iPhone is less than 10% of a typical desktop screen. 'Fat fingers' denying you all accuracy could equate to difficulties faced by those with hand tremors. A 40 pixel finger is big on a small target! Mobile is disabling for everyone.

There are guidelines to help you keep accessibility in mind, such as the BBC's mobile accessibility guidelines http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile and of course Web Content Accessibility Guidelines (WCAG) 2.0 http://www.w3.org/TR/WCAG20/

Getting your own experience of accessibility helps you to put yourself in the shoes of others and keep accessibility in mind when building and testing your website.

So next time you wonder whether a design feature is accessible and immediately rely on tools such as a colour contrast checker, first consider disabilities of all levels and the struggles faced by others and maybe even yourself . Surely I'm not the only one who's complained of 'fat fingers'?

 

Jordana Jeffrey
Jordana

Created on Thursday December 24 2015 10:24 AM


Tags: accessibility webdesign


Comments [0]