Keep visitors by using these UI features with care

UI tricks to avoid

A poor user experience can derail the success of a website. Many web designers risk turning their visitors away in frustration because poor User Interface choices are contributing to a bad user experience.

Following web trends can easily lead web designers into this trap. What looks cool in design circles can be off-putting to visitors.

This article looks at some UI no no’s and explores how a web designer might bend the rules to include them in a way their visitors won’t mind.

Read more

Speed your development workflow with these Chrome extensions

A very popular browser choice among developers is Google Chrome. And a great but often underused feature of Chrome is its Extension Store. As a developer, you can use this resource to access a multitude of free tools that will help you cut down on some of the most tedious tasks in development.

After all, as rewarding and interesting that development may be, it’s still true that tasks such as browser testing and link testing can be very dull ways to spend huge chunks of time.

Development Extensions

These Chrome extensions will help you speed up your development workflow right from your browser.

Chrome Extension - Web Developer

Web Developer
Get the extension

If I could only install one extension, then this would be my choice. With this extension, a developer will be able to gain a lot of information on their project.

I find the most useful features of this extension is the ability to disable things like javaScript, cookies, CSS styles and images. I also find it very useful to outline elements based on their type. This could be floated elements and absolutely positioned elements as well as floated elements and headings.

I also really like how I can work with forms, this is really useful for when testing the forms I have built are working correctly. With the Web Developer extension, I can quickly complete mundane tasks like clearing form fields and checking and unchecking form fields.

Web Developer Checklist
Get the extension

I like my websites to be the best they can be, and for this reason, I keep the Web Developer Checklist as part of my toolkit.

The Checklist extension will test your website to make sure it is mobile worthy and passes SEO, accessibility and security essentials.

It is even possible to check the quality of code. However, I have my IDE also checking this for me as I write code based on Laraval Artisan standards.

Pesticide
Get the extension

I think the name for this handy, simple extension is perfect, sometimes when working with front-end development, the code issues can feel like a real bug hunt.

The purpose of this extension is to outline all CSS elements to see the placement on a page better and help to identify a problem which could otherwise feel like hunting down a pest in your code.

Browser testing – Browserling and IETab
Get Browserling
Get IETab

Testing in multiple browsers is definitely one of those tedious tasks mentioned earlier. The bad news is there is no getting away from browser testing; however, it’s definitely not as painful as it used to be and there are now extensions that mean you can do it all in one tab.

One such extension is Broswerling. This is a live interactive cross-browser testing service, and it provides cross-browser testing for web developers and web designers. Also, it provides quick access to all the most popular browsers on the most popular operating systems.

Link Checker
Get the extension

Much like browser checking, link checking is also an essential highly tedious task. The Chrome browser extension Link Checker has one simple but powerful purpose which is to make this tedious task a thing of the past.

Extensions for designers

Chrome Extension – Spectrum

Here are some of the best extensions for front-end designer to speed up real-world, everyday tasks.

WhatFont
Get the extension

The WhatFont extension in invaluable when it comes to identifying a font. Sometime when browsing the web I come across a website that uses terrific typography but determining what makes it so great is not always intuitive to developers and this extension makes that process so much easier.

Information can be found on type family and font size and, what’s more, it can help you find out if your typography find is available on Google API or even TypeKit if you prefer.

ColorZilla
Get the extension

If you find you frequently need to design a website around a specific color pallet, then this extension will be a great asset.

Often clients know they want their color scheme to match their logo or some other design work. Or even their existing website. What ColorZilla will do is use a color picker to select any shade in the browser and find the HEX or RGB code of those colors.

Spectrum
Get the extension

Color deficiencies are common but not widely accounted for by web designers. A color blind person may have a needlessly terrible time on a website you designed, but this can all be solved with a few adjustments to your design.

Spectrum is an extension that will allow you to see your website like a color blind person would do addressing the problem of wanting to help but not knowing how to.

Read more

Build on Bootstrap for fast and quality web design

website design

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile projects on the web.

You have probably come across Bootstrap as a web designer along with other technologies such as Sass, LESS, Grunt, Gulp, npm ect and felt like it you need to absorb an avalanche of knowledge before you can get started on your website. This can feel like overkill for smaller sites too.

Read more

Three types of landing pages and when to use them

Landing page design

Everyone is looking for high conversions for their website, and this does not apply only to those who are selling an actual product, be it physical or digital. Service providers such as small businesses equally seek to gain leads for their services and publishers are looking to attract viewers for their content.

What is a conversion?

To define a conversion, it is the completion of an action on a website by the website’s visitor. The web designer will put together the elements of a page with the intention of the visitor completing this action.

This action needs to:

Read more

Find a coding course that suits your learning style

learn to code

If you want to learn to code then following an online course is a good step in that direction. however, it’s an investment that can be costly, not just money but in time to.

There are numerous courses online and I have experience with many of them and with this knowledge I have put together a review of some of the most popular providers.

Read more

Your website redesign pre-launch checklist

website checklist

Every once in a while your website will need a redesign to stay relevant to your content and keep up with new web design trends. It’s a good opportunity to really analyze your content to see if the user experience is working to meet the needs of your target market.

The web design process is one that takes a lot of work. It is a process that involves managing a lot of content as well as the technical process including testing, usability and ensuring your meeting the necessary web standards.

Read more

Can web designers survive in the web industry without coding skills?

web design code

Web building and drag and drop tools are getting better and are have become a viable option for professional website designers. Even web agencies have started to adopt tools like Squarespace and McCaw into their workflows. This is all reigniting the debate – do designers need to learn to code?

Read more

Rapid interactive prototyping, a web design trend that can improve your designs

By making time for Rapid interactive prototyping in your web design process you can improve the user experience of your designs, you can improve your communication with your clients and you can save time and money.

The method of designing an interactive prototype is gaining popularity and with tools available like Adobe XD and Usability Hub, the trend is set to continue.

Read more