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

Staying relevant in the 2018 web dev job market

stay relevant in web dev

Web development stays still for no one, anyone in the industry longer than 12 months can tell a newbie this from first-hand experience.

In 2018 it feels like this is the year the industry starts to feel the impact of recent disruptions and many web designers are already beginning to feel the effects of AI tools taking over tasks that were once a staple of their skill set.

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

4 web design trends of 2018 and the award-winning websites already using them

As the end of the year draws closer distinct trends are emerging and are set to grow in popularity over the coming year.

For web development this year, as predicted, we have seen the rise of 3D, VR & AI and the is a trend that looks to be growing strong. For front-end web design several trends seem to be emerging that leading designers agree are set to grow in popularity.

Read more

Zero to WordPress hero, your guide to becoming a WordPress professional

Become a WordPress pro

So you have decided you would like to learn or level up your WordPress skills. Anyone can take this journey. Maybe you’re already a WordPress hobbyist, dabbling in your spare time or maybe you’re crossing over from another related field like frontend web developer.

WordPress is a wise choice. It’s easy to learn and easier than a lot of people think to lift your skills above the average. And when you get there you will find there is plenty of demand for skilled developers to work on the CMS that runs a good sized portion of the web.

So let’s get started!

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