Category: web design

Thinking of a redesign of your website? For many people, their website is their love, their pride and joy, their baby and no one can give it a bad name or degrade it otherwise you’ll defend it to the hilt. Unfortunately, just like flairs and mullets design goes out of fashion and so do websites at a much quicker rate than most other things that are designed too! I decided the time had come to redevelop my website as it wasn’t reflecting my main skill ( which is probably my artistic and graphical training ) so wanted to bring that across in how I layout my pages and make the visit a more visually appealing treat and showing what I can do for you or a potential client. In this post, I explain 5 reasons it may be time to bin the loafers and put on some boots and get redesigning your website. Continue “Should you redesign your website and why I did”

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.

Continue “How to get involved in Usability Testing”

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.”

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”

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”

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”

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

• How To Save Money on Travel
• Top 5 best practices for automating customer service
• UKIP’s Nigel Farage calls for scrapping of racial discrimination laws
• How to design (in Sketch, Photoshop and Web) for color blind users

Responsive design has been here for a long while now and it is probably one of the most important design aspects of a website today. A responsive website will flux in size and layout depending upon the users media device, unfortunately embedding youtube videos into a website doesn’t always work well on your website but using some simple css code can help you find a way around this. In this post I give some brief code and a quick guide on making responsive youtube videos for users of WordPress.

Jetpack Edit CSS

I want to make this as simple for novice coders to follow so I recommend installing and activating the JetPack plugin from WordPress so that features to add CSS will be easier. Once you have activated the JetPack go to Appearance tab and then ‘edit CSS’.

If you are a bit unsure of CSS this is what the following code means. This code looks for the element ‘iframe’ in the ‘video-responsive’ css class and gives the video a height of 100% and width of 100% doing so ensuring the iframe takes on the width of its containing div. If you are feeling a little lost, don’t worry, simply copy the code and paste it into your Jetpack edt css feature and continue to follow the guide.

.video-responsive {
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
height: 0;
}

.video-responsive iframe {
left: 0;
top: 0;
height: 100%;
width: 100%;
position: absolute;
}

This is the first stage of designing a responsive div tag for video, next you need to gather the embed code provided by YouTube.

Stage 2: use embed code and div class to create responsive youtube videos

Copy the embed code from your youtube video, go back to your WordPress website, ensuring your page is in ‘HTML’ mode rather than ‘visual’ and paste it into the desired page in the location you wish to display it.

Once the code is in place surround it with <div class=”video-responsive”>replace with embed code from YouTube</div>. This will call the css we wrote earlier to ensure the video responds as we want it to.

Once all that is complete save your page and refresh your browser to see your YouTube Video responding something like that seen below.

If you have any problems creating a responsive youtube video please feel free to leave a comment below and I will get back to you shortly.

There is a lotta lotta information out there about digital marketing and how to get your website seen and generate sales leads and by golly, don’t you just worry that you’ve missed something? Hubspot, probably one of the biggest, if not the biggest, digital marketing agencies offers a service to see if your website is meeting the online marketing ‘grade’. Take some to grade your websites digital marketing via how well it is performing.

Continue “Grade your websites digital marketing via Hubspot”

If you ask any web designer then they will tell you that they are currently programming websites while keeping HTML5 and CSS3 in mind. It really is the way to go in this day and age. Just what are they though? Let’s take a closer look, shall we?

Now, every single website is constructed from HTML and CSS code. There may be a few more programming technologies behind the site (PHP for example), but it is only HTML and CSS which has the capability of displaying information in your browser. JavaScript can do this to an extent, but it will still need to be used in conjunction with one of the other technologies.

HTML is the technology behind the layout of the page. CSS is the technology behind the aesthetics. There is a degree of overlap which you will see if you learn the languages. However, if you are employing a Phoenix Web Designer to carry out the programming for you, you will not need to know about this in too much depth.

Now, just like any programming language, HTML and CSS are regularly updated. New pieces are added into the code to make it far easier for them to create certain features. HTML5 is the 5^th incarnation and CSS3 is the third incarnation. The idea is that these are the new standard. If you want your website to display properly in modern browsers then you will need to use both of these technologies.

HTML5 and CSS3 are modern standards. They have been designed in such a way to be much cleaner code. This ensures that sites that utilize them are very fast to load. Some of the features found in these new technologies, HTML5 especially, replaces items on websites where you would normally need a special plugin to display them. Take Flash for example. With HTML5 this has pretty much been ruled old technology. You can do everything that you want to do in flash with HTML5, and it does it much more effectively without the need to install any plugins.

Amongst the many features, both HTML5 and CSS3 have made it far easier to create websites that look fantastic on mobile devices. In fact, if coded well, you will have responsive design built in as standard to your site design. As mentioned before, HTML5 and CSS3 have ensured that old technologies with needed installation of plugins are now defunct. As a result, almost every website that follows HTML5 and CSS3 protocols should look fantastic on mobile devices. You are going to most likely need to wait until the mobile browsers are fully updated though.

As you can see, this is a very brief guide to HTML5 and CSS3. Sadly it would take up a whole book to go into depth on these. However, I do hope that the information here is more than enough to give you a nudge in the right direction and start to understand why your web developer is going to utilize them in your site design.

Author Bio: Kory Chesier is a professional blog writer, writes for HireaWiz a leading Phoenix web design specializing in custom web design, PHP development, Pay Per Click Marketing and SEO services.

Related articles across the web

• 30 Free HTML5 Templates for Responsive Website
• From Designer to Developer: A Brief Guide
• Analyst Watch: 2015 will be a pivotal year for HTML5
• Hour of Code: JavaScript
• The W3C, HTML5, And Catholic Virgins