Best web and developments articles from around the web from 2016

• January 2nd, 2017
• News

With 2016 now officially a thing of the past we thought it be quite cool to use this post as opportunity to have a reflection on the past year. In this roundup, we have taken 4 to 5 of our favourite web/ design based articles from each month within 2016 to form this awesome round up of the year end best articles. There’s certainly a wide breadth of articles from UX design trends To 17 things people hate about your website. I hope you enjoy the articles included in the roundup.

7 UX Design Trends to Watch Out For in 2016

UX design took center stage in 2015. Innovations like wearable technology and virtual reality drove designers into new realms, opening up doors that were previously not possible and in many cases not even imaginable.

A Simple Method For Developing Your Design Skills

There’s no shortcut or hidden trick to improving your design skills – ask anyone in design or any other field, creative or otherwise. But there is a simple way. It’s not easy (nothing worth doing usually is), but it is fairly simple. And that is: do one design thing each day that’s outside your comfort zone.

Firefox Developer Edition: The Browser for Developers

Nowadays, every browser provides developer tools that allow you to thoroughly test your web projects regarding design and functionality. By default, JavaScript debugging and the inspection of the source code are among these features. Firefox Developer Edition is a browser developed by Mozilla and is dedicated solely to web developers, providing even more useful tools that help to optimize a website. Its features include the testing of CSS3 animations and transitions.

Why you should switch from Photoshop to Sketch

Over the past year or two, Bohemian Coding’s Sketch app has gained momentum across the glorious internets as a ‘better’ alternative to Photoshop. Most of this ample praise has come from the web and interface design community. If you’re anything like me, then you’re always on the lookout for new tools and better alternatives to an existing workflow. However, at first I was tentative about handing over my 20-year Photoshop baton.

Complete Guide to Using WebP Image Format

WebP, or unofficially pronounced as weppy, is an image format introduced by Google Developers around 5 years ago. if you are a web designer, or a developer who strives to reduce and optimize your image file size, what WebP is capable of should put a smile on your face.

Opinion: What Makes a Great Front-End Developer

The position of Front-end Developer is gradually becoming more and more broad. In my own career alone, I’m constantly finding that I’m transitioning more and more to the back-end: Setting up virtual machines, updating Apache, configuring SSL certificates, the list goes on and never seems to get bored of itself. Its can be really daunting.

The Complete Guide for How to Marry Text and Images In Your Designs

Website landing pages and online ads. From billboards to business cards, many of the designs we encounter every day have something in common.

ESSENTIAL DESIGN TRENDS, FEBRUARY 2016

Looking for a website refresh and don’t know where to start? Some of the trendiest elements in web design right now are fun aesthetically and pretty easy to use.

A Beginner’s Guide To Creating A WordPress Website

Looking for a website refresh and don’t know where to start? Some of the trendiest elements in web design right now are fun aesthetically and pretty easy to use.

An Introduction to PostCSS

Most developers who spend their time working with CSS are familiar with preprocessors such Less, Sass, and Stylus. These tools have become a vital part of the web development ecosystem. Writing styles for a website without using features like nesting, variables, or mixins now seems cumbersome and awkward. Although each of them is a great and extremely useful product, let’s take a step back and consider if using preprocessors in such a way is indeed the best approach.

Introducing Autotrack for analytics.js

The web has changed a lot since the early days of Google Analytics. Back then, most websites actually consisted of individual pages, and moving from one page to the next involved clicking a link and making a full-page request. With sites like this, it’s possible to track the majority of relevant user interactions with a single, one-size-fits-all JavaScript tracking snippet.

Why npm Scripts?

The web has changed a lot since the early days of Google Analytics. Back then, most websites actually consisted of individual pages, and moving from one page to the next involved clicking

Checklist for Delivering a WordPress Project

When you finish coding and designing a website, it doesn’t necessarily mean that your job is over and ready to be delivered. You need to make sure that your client doesn’t have a hard time with the website in the future. So, you need to take some last steps.

The 5 Types of Personal Projects (And How You Can Justify Pursuing Them)

We all have intriguing side projects that we want to pursue—and a zillion reasons stopping us. The big one? They’re a flat out waste of time that don’t pay anything upfront and do little to immediately advance our careers.

How to create a pyramid layout with CSS

We all have intriguing side projects that we want to pursue—and a zillion reasons stopping us. The big one? They’re a flat out waste of time that don’t pay anything upfront and do

How to build your portfolio with freelance projects

When I first learned to code, and started looking for freelance web design projects, I felt like I was in a Catch-22. My portfolio was totally empty; but I couldn’t fill it with impressive projects without any clients. It’s a tough spot to be in in an industry where your work is much more important than your skillset. You don’t land big clients by listing your coding chops on a resume. You get those high-paying jobs by showing them what you can do. In other words, clients want to see proof of what you can create for them before they give you a check.

How to Use BrowserSync for Faster Development

When I first learned to code, and started looking for freelance web design projects, I felt like I was in a Catch-22. My portfolio was totally empty; but I couldn’t fill it with impressive projects without any clients.

How To Create A Show Password Button

InIn this tutorial we’re going to have a quick look at how you can create a show password button on your register or login forms

How to Conduct SEO Due Diligence

This post will be most interesting to investors, or marketers working for investors. You might not often think of VCs and SEOs working together – but we’ve crossed paths many times. For example, high-profile investor and industry expert Mark Susterpresented at our conference in San Diego, we’ve worked with many well-funded high growth startups and – less visibly – we’ve been involved in SEO due diligence.

Photoshop best practices reduce file size

Have you ever tried sending a PSD file as an attachment but alas, failed? Most likely it’s because you have exceeded the preset file size limit. Huge file sizes take up equally large storage spaces and creates delivery issues. If you’re looking at posting the image file on a website, you will need to compress it to the right dimensions without affecting the quality of the finished work.

Creating a great portfolio

A design portfolio is more than just a collection of images—it tells your story. Tell a compelling story, and you can get almost any potential employer or client to pay attention to you.

How to Speed Up WordPress with a CDN

There are easy and cost effective ways to speed up WordPress without much work. One of them is to implement a CDN (Content Delivery Network). Check out the steps below to get a CDN up and running in only 2 steps!

What is the Definition of a “CSS Hack”?

In this post, it explains what exactly the term CSS hack means and how a CSS hack is used.

What’s New in WordPress 4.5

WordPress 4.5 named “Coleman” was released just a few minutes ago. It is the first major WordPress release of 2016, and comes with some exciting new features. In this article, we will show you what’s new in WordPress 4.5, and which features you should try after updating your websites.

17 Things People Absolutely Hate About Your Website

a list of the 17 most annoying things we’ve seen on websites to act as a sort of guide for what not to do when designing your website. Let’s take a look at the worst offenders!

Creating A Living Style Guide: A Case Study

a Living style guides are an important tool for web development today, especially in large, complex web applications. They help document styles and patterns, keep designers and developers in sync, and greatly help to organize and distill complex interfaces. Indeed, living style guide

The Importance of Code Reviews

Apparently, it’s not obvious to everyone that code reviews are actually helpful. Call me naive, but I really thought it was a process used in all IT companies. Apparently I was wrong, and it scares me.

How to Better Manage Automatic WordPress Updates

Are you looking for a way to automatically manage WordPress updates? Updates are important for security and stability of your WordPress site. In this article, we will show you how to better manage automatic WordPress updates.

Debugging JavaScript with Chrome DevTools Breakpoints

Debugging JavaScript code can sometimes be a little time consuming. If you are just beginning JavaScript you may find yourself using alert()or window.alert() a couple of times, and if you’ve been writing JavaScript for a little while, you may find yourself using console.log() a number of times.

Blog Checklist: 10 Important Things to Keep in Mind Before Publishing a Post

Professional bloggers can’t afford to forget an important aspect before publishing a post. They earn money off the articles they post. Nonetheless, hobby bloggers can also benefit from a professional way of working. The visibility in the Google index search results will rise accordingly. Thus, in this article, I’ll show you a list of the truly essential things that you should check before publishing an article. This blog checklist will help you minimize mistakes, and remember critical aspects.

Improving Your CSS with Parker

Parker is an absolutely fantastic, beautifully simple static analysis tool that gives you some very insightful metrics about your CSS files. Parker is built and maintained by Katie Fenn, a developer from England who has since become a friend.

What techniques make your email campaign relevant?

Relevant emails drive 18x more revenue than broadcast emails. However, what is relevant to one of your readers could be inconsequential to another. That’s because individual’s needs and wants differ from one person to the other, so how do you create email that’s relevant to your whole audience, not just a niche group within it?

How to Reduce Cart Abandonment Rates on your e-Commerce Site

Cart abandonment is a standard problem each e-commerce site encounters sooner or later. According to the Baymard Research Institute, the average shopping cart abandonment rate is as much as 68.63%, a value that’s calculated based on 33 different studies.

8 excellent email newsletters you can learn from

Why have newsletters stood the test of time? A newsletter keeps subscribers informed about your business or product without being overly “salesy.” It gives subscribers a chance to engage with your business on their terms and provides a level of brand awareness that’s valuable to your business.

JavaScript, WordPress and the REST API: Sorting Fact from Fiction

Why have newsletters stood the test of time? A newsletter keeps subscribers informed about your business or product without being overly “salesy.” It gives subscribers a chance to engage with your business on their terms and provides a level of brand awareness that’s valuable to your business.

How to Get The Most Out of a New Website Launch Announcement

The months of sweat and tears have passed and the stakeholders have finally signed off. Your new website design is about to go live – but how do you announce a new website launch? How do you get people to care about a new website? How do you get the most traffic and conversion you can out of a new website launch?

An Essential Training Task List for Junior SEOs

Let’s face it: SEO isn’t as black & white as most marketing channels. In my opinion, to become a true professional requires a broad skill set. It’s not that a professional SEO needs to know the answer for everything; rather, it’s more important to have the skills to be able to find the answer.

DNS Explained – How Your Browser Finds Websites

Find out exactly how your browser figures out where to find a website when you enter in a domain name!

10 Skills Every Designer Needs on Their Resume

Even if you aren’t actively looking for a job, your resume is an important piece of your digital portfolio. From sites such as LinkedIn to personal portfolio pages such as Behance that showcase your work, glimpses into your design career are everywhere.

How I designed a website (this one) in 8 days

Recently, we launched a new publication at Envato: the Envato blog. Since you’re reading this, I’m assuming you’re probably aware of it! I’ve been a UI Designer at Envato for 2 years, and I worked on the creation and design of this  site. For a recap of how we ran this project from a design perspective, read on.

How to Increase Your Income as a Freelance Web Designer, Like, Now!

Starting a career as a web designer is no easy feat. There’s uncertainty, there’s worries, there’s “I’m not good enough” complex, there’s fears that you’ll under-deliver and make clients mad. And on top of all that, there’s no money, hence making the whole endeavor even more challenging.

THE ULTIMATE GUIDE TO WEB CONTENT ACCESSIBILITY

Websites with standards-compliant code all follow the typical W3C standards. But there’s a whole different level of compliance when it comes to WCAG, also known as the Web Content Accessibility Guidelines.

30 Acronyms Web Developers Should Know

Shutterstock Editor Is the Simple Way to Impressive Designs

We launched Editor in beta last winter so that small businesses, social media managers, content marketers, or anyone who simply needs high-quality creative could meet the growing demand for beautiful design across departments and industries. Since then we tested features and refined them. Now, we’re introducing Shutterstock Editor out of beta, and it’s more powerful than ever.

With new editing tools and improved functionality, Shutterstock Editor has everything you need to create visuals that reflect your brand and engage your audience. Whether you want to make quick edits to a photo or create a fully-customized image, Editor will save you time on professional-looking designs.

The State of HTML5 Input Elements

Recently I was working on a project where we required date and numeric fields. Being a purist, my preference is and always will be native elements over some bloated JavaScript library. “Polyfills can cover outdated browsers,” I thought, “that way we keep the best experience on modern browsers.

A Guide for New Web Developers – from a newbie to another

This post is for those who’re looking to start web development, and don’t really have a background in coding. It also applies to those who’re just looking to start coding in general. It’s a length post, so pick the parts you want to read based on the headers.

Gmail Update: Support for Embedded Styles and Media Queries has Arrived!

Gmail has just released a bevy of important updates to their email client, bringing it into the 21st century and enabling email developers everywhere to leave behind old tools and techniques. Earlier, we provided some analysison the Gmail announcement. This blog details what we’ve found out now that the changes are live.

Why Friday’s Massive DDoS Attack Should be Terrifying

Friday’s massive DDoS attack made a number of hugely popular websites unavailable for much of the country for large parts of the day. Our service wasn’t directly affected by this incident, but the nature and scope of this attack is tremendously worrisome.

Designing Grids

I’d be telling you the obvious if I said that grids are important in web design. You already knew that. You probably have even coded a few grids with frameworks like Foundation or Bootstrap. You may even have created a custom grid manually, or using a grid layout tool like Susy.

Yarn Package Manager: An Improvement over npm

Yarn is the newest package manager on the block with speed and improvements over npm.

WordPress hacked? – 7 essential steps to fully restore your website

Sucuri releases a website hacked trend report for each quarter. In their latest report, they have revealed that WordPress powered 78% of the sites hacked in the second quarter of 2016. WordPress hacked sites remain a real problem.

Bye raster, hello vector: 3 ways to use SVG easier

Yet from a front end developer’s perspective, we prefer SVG graphics, which have become widely supported on all modern browsers and are in vector graphics format, which make them easily scalable on different screen resolutions. Moreover, developers have the ability to change SVG graphic properties through code, because SVG is an image and a XML document. This creates myriad options on how to use them. Following are three different approaches.

Top 7 eCommerce UX Design Trends to Look out for in 2017

Shopping was the last thing on your mind amid the US presidential election, which was keeping the world on its heels. But now the elections are over and we know IT’S A BOY. Moreover, Thanksgiving is around the corner with Black Friday in tow, so the shopping craze is about to start. This season, more people are planning to avoid the long queues at shopping malls and shop right from their cozy La-Z-Boy recliners.

Best of Visual Studio Code: Features, Plugins, Acting Like Atom and Sublime

Visual Studio Code is a free, open source, cross platform text editor made by Microsoft. They essentially took their online editor Visual Studio Online (codenamed “Monaco”) and used Electron by GitHub to deliver a cross platform editor. They have taken great strides to create a fast and highly efficient work environment for programmers.

Not An Imposter: Fighting Front-End Fatigue

I recently spoke with a back-end developer friend about how many hours I spend coding or learning about code outside of work. He showed me a passage from an Uncle Bob book, “Clean Code”, which compares the hours musicians spend with their instruments in preparation for a concert to developers rehearsing code to perform at work.