This Week In Web Design – March 13, 2020

It’s not only Friday – it’s Friday the 13th! Regardless of superstitions, it’s still time for our weekly roundup of web design and development related articles published in the past seven days. As always, we hope you will find this edition of “This Week In Web Design” useful in your endeavors to grow your web design and development skills.

Setting Height And Width On Images Is Important Again

Thanks to some recent changes in browsers, it’s now well worth setting width and height attributes on your images to prevent layout shifts and improve the experience of your site visitors.

Most Common WordPress Attacks in 2020

Take a look at the most common WordPress attacks in 2020, as well as how to guard yourself against them.

The Latest Research for Web Designers, March 2020

This roundup of the latest research for web designers includes a mix of reports along with some news and facts about something that people are talking about all around the world: the coronavirus.

Google Fonts + Variable Fonts

Google Fonts added an option to only show variable fonts!

Website Redesign Process: Your Website Redesign Strategy in 5 Steps

A website redesign process can help bring your site to life and engage potential customers.

10 Best Web Development YouTube Channels to Follow

10 YouTube channels that offer both in-depth tutorials and quick tip videos that make it easy to expand your skill set.

Fluid, flexible & simple typography

This small CSS library serves to avoid the responsive web by focusing on pure fluidity in which the system communicates what size to be rendered.

Basics Behind Color Theory for Web Designers

As a collective digital artist, it is important to understand the fundamental science behind color theory.

Functional Blog Design | Analyzing Blog Layouts, Sidebars, Content Tables

Reading this guide should be on top of your to-do list since it lists all the necessary steps needed to build a functional blog design.

Designing with Real Content

Designing with real content helps ensure we know the product.

Why dark mode web designs are gaining popularity

Dark mode may be the ideal choice for any website that requires lengthy engagement.

Considerations When Choosing Fonts for a Multilingual Website

Working in Arabic and English because it’s a classic example of RTL in use.

25 Free Time-Saving Online Tools for WordPress Developers

Most of these tools are standalone sites that let you input stuff and output something useful, whether that’s a code snippet, a download, a piece of reformatted text, or simply some helpful information.

7 New & Modern Color Trends 2020

What kind of color trends will be popular this year? Will there be new trends in color schemes? Or would any old trends make a come-back? Here are our predictions.

Block Links Are a Pain (and Maybe Just a Bad Idea)

Perhaps the worst thing you can do for a block link is to wrap everything in the <a href>.

Why In-Person Conferences Are Still Relevant for Web Designers

There are still reasons why showing up to a conference is beneficial.

14 Best Adobe Font Pairings For Websites

We hope you enjoy these 14 best Adobe font pairings we’ve suggested, and find them useful in your upcoming projects.

How to Make a Line Chart With CSS

You can make everything you need with just CSS and a couple of custom properties in your HTML.

SASS !default and themeable design systems

Architecting components to offer a white list of themeable CSS properties, so each brand can define their design language using design tokens.

Background Scale Hover Effect with CSS Clip-path

A simple recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip-path.

7 Steps to Creating a Spectacular UX Case Study

Overview, Problem and the goal, Scope, Target audience, Process, Deliverables and the outcome, Lessons learned.

10 Git Techniques You Need to Know Before You Join a Team

All about the basic Git techniques that you must be familiar with before you join a team.

Presenting Design Work with Intentionality

In order to communicate effectively, you need to consider how your ideas are received.

20 Web Developer Portfolio Examples

Chosen based on how interactive, creative, or engaging they are to the site visitors.

PHP Magic Methods Cheatsheet

A cheetsheet quick reference to all the magic methods available in PHP.

50+ Best Wireframing & Prototyping Tools For Web Designers 2020

The tools in this list will allow creating wireframes of minimal or high fidelity, whatever you want.

Accessible SVGs: Inclusiveness Beyond Patterns

If true inclusiveness lies beyond patterns — what other factors should we consider when designing and developing accessible SVGs?

Programming Sass to Create Accessible Color Combinations

Let’s not only use better color combinations in our designs but find a way to make it easier for us to implement high contrasts.

Consistent Backends and UX: What Can Go Wrong?

In games, user experience is everything, so game developers are often under huge pressure to make sure their systems are fault-tolerant.

Using Redux with React: Complete Tutorial with Real-World Examples

Contain your fear of containing state and come along with me on this relatively painless journey.

Fresh Resources for Web Designers and Developers (March 2020)

Some great new tools from big names in the tech industry including Microsoft, Github, and JetBrains.

Ten things I’ve learned as a UX researcher at Uber

ShopTalk podcast redesign

Cover photo courtesy of ShotStash.