Web Design Trends in 2019

As the internet continues to develop, web design practices continue to adapt and bring about new trends. A good web designer remains cognizant of these trends; knowing what’s hot and what’s quickly becoming outdated.  We are rapidly encroaching on the end of another decade and with it comes plenty of new web design trends designers will want to add to their arsenals.

Growing Trends Web Designers Should Consider

Technology is changing—there’s no stopping that, and with it comes changes in how consumers are using the internet. That means that web designers need to evolve with technology.

So, what are some growing trends that web designers should consider in projects for 2019 and beyond?

1. The Minimalistic Approach

In a day where bright and flashy have become the norm, designers enjoy creating a better user experience with a minimalistic web design and the use of technology advancements. Here’s the thing, minimalistic doesn’t have to mean black and white with little to no flash in the way of images and videos.

In fact, when we talk minimalistic for 2019, we mean making use of whitespace, clean typography, and mobile-friendly design. This also means making use of quality imagery in an effective manner, such as video, illustrations, and 3D artwork to help your material stand out without over-complicating the entire design. Thanks to a mobile-first generation (aka: those who use their mobile devices as their primary method of online searching, the use of a more minimalistic approach is more important than ever.

2. Font Varieties

It’s okay to have fun with fonts and use varying typefaces to create an intriguing web design. However, we must keep the reader in mind as well, which means using easy to read fonts.

typography in web design
© site by tennentbrown.co.nz

Using fancy scripts is fun and can suit a website’s overall design aesthetic, but using too much of those typefaces can make it harder to take in the information being presented to use. This is where having varying fonts in play becomes an effective design element. Highlight specific text that you want to stand out in more vibrant, fun fonts while using a more standard one for the meat of your text.

3. Upping Your Animation Game

That’s right; animation is all the rage! Popular GIF website, GIPHY, reported recently that about 2 million hours of GIFs are viewed daily on their site alone.

Animations have come a long way over the years, and even the simplest of animations can convey an important message to those who visit our websites. Animation can be used to guide a reader through information quickly and as a way to break up larger blocks of text to give the reader’s eyes a break.

Animation can even be used purely to entertain our readers as well, giving websites a more personable vibe instead of just a tool to move consumers through our sales funnel.

Now, animation comes in a variety of forms and can include:

  • Animated GIFs
  • Galleries/slideshows
  • Scrolling text
  • Page motion
  • Animated backgrounds

While incorporating animation into your design is an excellent idea, remember to keep it simple. The more animation you include, the higher the possibility of your page load time decreasing.

4. Adding Chat Boxes

While chat boxes may not seem like an entirely new concept, this technology is gaining traction this year. Consumers want to always reach someone from a brand, which is where chat boxes come into play. Thanks to advancements in both AI and machine learning, chat boxes are able to bring this expectation to life.

Web designers are beginning to add chat boxes to websites of all types, and in doing so, applying a lot of the trends we’ve already mentioned. This includes adding varying fonts and colors to chat boxes to help them stand out while still remaining consistent with the rest of your site branding. Web designers are also learning that chat boxes can adapt well to a minimalistic approach because that makes them simpler to use for the consumer.

5. Include Illustrations and 3D Artwork

Friends, gone are the days of the standard, overly used stock images. It’s time to welcome in illustrations and 3D artwork into your web design practices.

Okay, so stock photography isn’t going anywhere. However, we are seeing more brands choosing to go the illustration route to help set them apart from others. In fact, brands such as Slack, Mailchimp, and Dropbox have all opted to highlight illustrations as a way of catching their reader’s attention.

mailchimp newsletter campaigns

Want to stand out even more? Then we suggest considering 3D illustrations! 3D artwork helps to draw the eye in a way that 2D illustrations simply don’t.

6. Include Videos

Videos, like animations, aren’t going anywhere. With 45% of people claiming to watch more than an hour of Facebook or YouTube videos during the week, videos are a must for web designers.

Again, much like animations, videos are a great way to give your viewers a break from long walls of text. In fact, many consumers prefer short explainer videos than text in many situations simply because they are easier to digest. Not to mention videos are more effective when it comes to the human’s ever-shortening attention span.

Videos come in all shapes and sizes, including:

  • Explainers/Tutorials
  • Product reviews
  • Presentations/Webinars
  • Interviews
  • LIVE streaming
  • Testimonials

Website Design Services by a Top Austin SEO Company

As an SEO company, we know just how vital website design is to build your brand and inspire engagement. Websites are considered a brand’s first impression to the world, and that’s why we offer more than just search engine optimization services.

Our web design services are individually tailored to our customer’s needs, not our own and can include:

  • Usability/User Experience Considerations
  • Creating a Mobile & Responsive Design
  • Content Writing & Development
  • SEO Friendliness

Want to learn more about our website design services? Contact me today for more information.

How Can I Increase My WordPress Website Speed? Do These 4 Easy Steps

By now, many of us have probably heard Microsoft’s report from 2015 that states the attention span of an average person has declined from 12 seconds to 8 seconds over the last 7 years. Considering the fast-paced culture we live in and the expectations we have set with technology, we have access to all the information we need – right at the palm of our hands.

The need for accessibility plays a direct role in how efficient your webpage should be with its ability to load content and be accessible to a user. Statistics show 53% of users leave a website if it takes longer than 3 seconds to load.

The need for accessibility plays a direct role in how efficient your webpage should be with its ability to load content and be accessible to a user. Statistics show 53% of users leave a website if it takes longer than 3 seconds to load.”

To keep your website easy and fast to access, know these 4 simple steps on how you can optimize the speed of your WordPress website and make it load at a lightning fast rate.

Here are my steps:

Step #1: Choose Quality WordPress Web Hosting

With experience in a wide variety of web hosting solutions like Bluehost, HostGator, GoDaddy, I have found SiteGround to be a top-notch provider for WordPress websites who keeps up to date with the latest technology related to speed.  They offer fast hardware, a large variety of features and tools, and top speed PHP execution. PHP 7.1 is their default version providing great response time and optimal performance.

php version comparison chart
PHP versioning ad speed variations by requests/sec

 

Their latest technology adopts QUIC speed servers that allow websites to load fast even on a slow connection and is paving the way for the next internet protocol, HTTP/3.

As always, I encourage developers to do their own research. You will find lots of articles supporting SiteGround as a premier web hosting solution in hosting review sites like:

TIP: If you are currently running a WordPress website and would like to upgrade your PHP versioning to 7.1, I would recommend installing WP Engine’s PHP Compatibility Checker first. Select your PHP Version within your settings and run a scan on all your active plugins and themes to ensure compatibility.

wordpress php compatibility checker
Run a scan to ensure PHP compatibility with theme and plugins

Step #2: Optimize Your Caching and Performance

When a user visits a website, the browser requests assets from your web server which in return loads your WordPress website. These assets include PHP processing, database requests, and files that get sent to the browser which renders a fully functioning webpage. This process alone takes several seconds.

What popular plugin solutions like WP Rocket, WP Super Cache, etc., do is replace the process by sending a compiled static HTML file to the browser, which results in a much faster return. This static file is stored locally on your computer and is accessed each time there is a 2nd visit, 3rd visit and so on to your website. Since the file is static, only by clearing or refreshing a cache will a page reload any dynamic content that includes web changes.

WP Rocket has been a preferred solution for caching based on a number of reasons. They offer a ton of features, easy-to-use integration, great support and a large knowledge base to tackle the many challenges that go along with leveraging a browser cache. They constantly work to improve their tools as well, which provides an assurance that their plugin remains up-to-date with industry trends.

Here are some screenshots of what my configuration typically looks like.

Cache

wp-rocket cache best settings
Cache settings and configuration

Mobile Caching. This simply means faster mobile load times.

User Cache. I only enable caching for logged-in users if my website runs forums, memberships, etc., that entail users logging into my website.

File Optimization

wp-rocket-file-optimization
Minify your CSS & JS assets. Be sure to test these settings.

Minifying and combining all files is ideal for optimal results and reporting with tools like GT Metrix and Pingdom. However, in many scenarios, enabling these can cause issues with your website layout. So, proceed with caution. Should your site break due to problematic files, you can choose to exclude these CSS and JS files from minification.

TIP: I use a Chrome Extension called Blue Button which helps me to determine all CSS and JS files being generated on my website.  From here, I pick through each file, one at a time, and add to the Exclude CSS files or Exclude JavaScript files section of WP Rocket. Then I clear all caching, including the browser cache to see if there are any changes to the website layout as a result of the exclusion. If the result is still a broken webpage, then repeat the step with each CSS or JS file until the broken layout is resolved. It’s a bit of work, but the end result is worth it. :)

wordpress css script scanner
Easily access scripts and stylesheets using the Blue Button Chrome Extension

Media

wp-rocket media settings
Configure your LazyLoad media settings to reduce your website HTTP requests

Lazy loading delays the loading of images and videos until a user scrolls down the page to where they are intended to display. This feature significantly reduces load times and HTTP requests. Whether I choose to enable this feature for images depends on the theme I am using. In this case, lazy loading images produces undesirable results with the used WordPress theme, so I have chosen not to use the option. Toggle with it yourself to see what works best in your scenario.

By enabling lazy loading for videos, the YouTube iframe gets replaced with a preview image and only loads the video when the play button is clicked.

By disabling emojis, load time on your website is decreased.

Preload

wp-rocket best preload settings
Make your external files load faster by prefetching DNS requests

Activating Preloading. If you have the Yoast SEO plugin installed, it will automatically detect your sitemap. Otherwise, leave Yoast unchecked and manually enter the address of your website’s XML sitemap.

Prefetch DNS Requests. There is a list of common names for Prefetch domains on GitHub that you can copy and paste into your settings field.  Apply the applicable ones to help browsers anticipate requests for faster loading.

In the case of this example, common names include:

  • //fonts.googleapis.com
  • //ajax.googleapis.com
  • //connect.facebook.net
  • //www.google-analytics.com
  • //www.googletagmanager.com
  • //maps.google.com
  • //cdn.fosterdanowsky.com

Step #3: Implement a Content Delivery Network

If you frequently use page speed tools like Pingdom, GTmetrix and YSlow, you’ll see that a Content Delivery Network (CDN) is recommended for optimal website delivery. CDN is a system of distributed servers that deliver website content to users based on their geographical location, the origin of the webpage and content delivery server.

StackPath’s CDN offers a user-friendly platform with great customer support to easily set up and configure a CDN for your website. They provide over 40+ data centers across the US and globe which reduces the distance between your server and site visitors.

cdn network data centers
StackPath features global data centers

To get set up, create a 30-day trial of the StackPath CDN. Note: You will want to click on Individual Services, and select the CDN option at $10/month.

stackpath cdn individual services
To subscribe to the CDN, be sure to select Individual Services

Create an account with your preferred credentials and create a new site and add your primary domain as your delivery domain for the account.

stackpath setup delivery domain
Setup a new site and delivery domain using your primary domain

StackPath automatically detects the origin IP of your web server and creates a CDN URL for your use. In the upper right corner of your dashboard, you will see your StackPath address. This is the address needed for the final step when configuring your CDN.

stackpath cdn address
: StackPath automatically creates a CDN URL. Found in the upper-right corner of your dashboard.

To customize the settings for your CDN, you will want to review the Cache Handling and Client Browser Policy. The screenshot below highlights the configuration I have used to produce the best results. Keep in mind that scenarios may differ based on your website’s configuration.

Cache Handling

gzip compression wordpress website
My optimal settings for Cache Handling. You may want to play around with these settings

Lifetime. By setting this to the origin controlled, Stackpath honors the cache-control headers from the origin server.

Query String Control. Determine how you want StackPath to treat URLs that have a query string portion a “?” followed by a series of keyword/value pairs represented by “&x=y”.

Gzip Compression. Enable this to reduce the file size of your text-type content, which will improve delivery speeds. I set my compression level to 4.

Content Availability. Enable this to keep content in cache beyond its expiration time in case we can’t reach your origin. StackPath checks the origin to see if the file is there, then updates it. If not, then the expired asset is served from cache.

Vary Header. Vary is an HTTP response header that allows distinct variations of the same content to be cached using the same URL. The content is selected based on the value of the specified request header, to ensure the right content is served to the right place.

When enabled, the vary header option allows the StackPath CDN to follow your origin server’s vary header when making origin pull requests. When disabled, the CDN will ignore the header when making origin pull requests.

Client Browser Policy

browser caching http2
My optimal settings for Client Browser Policy. I usually recommend a shorter Cache TTL, especially on a website that’s updated frequently. You may to want play around with these options, as scenarios may vary.

Browser Cache TTL. Set the length of time that client browsers use to locally cache your content, or defer to the value passed by your origin. How short or long a TTL is can be based on a number of factors, and 24 hours is often recommended. The higher the TTL, the less frequently caching name servers need to query authoritative name servers. The lower the TTL, the sooner the cached record expires. This allows queries for the records to occur more frequently.

CORS Header Support. For security reasons, web browsers will prevent Javascript code from making requests to a different origin (e.g. different domain) than the one it’s hosted on (e.g. requests from origin1.website.com to origin2.website.com will get blocked). 

Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell a browser to let a web application running at one origin (domain) have permission to access selected resources from a server at a different origin.

Enabling this feature will send an “Access-Control-Allow-Origin: *” header in the response which will indicate to the client browser which client origins will be allowed to access a resource.

HTTP/2 Support. HTTP/2 is the next generation of web protocol. It has features like binary encoding and multiplexing that make web connections faster and more efficient if your site is designed to make use of them.

Step #4: Image Sizing and Compression

WordPress offers quite a few popular automated image compression tools such as ShortPixel, Smush and Imagify. I have experience with ShortPixel and Imagify and have found both tools to be extremely resourceful. For the sake of this tutorial, I am using Imagify. You can try Imagify for free. They offer a few options on pricing as well; the option you select is really based on your need.

Should you decide on a paid plan, use the coupon code WPROCKET30 to save 30% on your subscription.

Configuring Your Site for Optimal Compression and Speed

Once Imagify has been installed, you can review the configuration I have used below.

image compression reduce size
My optimal settings using Imagify. Pay close to attention to the webp format. Checking this option can potentially break a theme if not compatible.

Optimization Level. The optimization I keep at the default level of “Aggressive.” This allows for files to be compressed without any noticeable pixelation on the images. Ultra can have noticeable signs of pixelation, so I personally keep the settings at default to play things safe.

Auto-Optimize images on upload. As you upload original images, your files are immediately optimized for speed.

Backup original images. I would recommend keeping this option on.

Keep all EXIF data from your images. Leave this unchecked. Ideally, you want EXIF data stripped out from your image. What is EXIF data? Let’s say you take a photo from your iPhone, EXIF data is all the extra data tied to the image, such as coordinates from where the image was taken, etc. Unless you have specific requirements to keep that data, I would suggest removing it.

Resize larger image. You will want to consider enabling this, especially in the case where you’re using large hero images. You may want the optimal width set for your hero image. So, if by default, you’ve uploaded an image that’s 4,000 pixels wide, you’ll want to resize that to a more ideal width of 1920px, or whatever width you feel is best for the display of your hero image.

Create webp versions of images. WebP is an image file format created by the web performance team at Google, developed as a replacement for JPEG, PNG, and GIF, while supporting good compression, transparency, and animations.

WebP is not new, but you don’t hear much about it because it’s supported mostly by modern browsers. It continues to grow in popularity and support due to its delivery of dramatically smaller and faster images (an average 50% decrease).

You will want to experiment with this tool. When activated in Imagify, WebP will be served up for the supported browsers. For others, it will serve up the original image instead. I would leave “Display images in webp format on the site” unchecked to avoid any potential conflict with your WordPress theme.

Files optimization. This feature allows you to choose the images, which your WordPress theme and plugins are making versions of, you would like to optimize.

The Results

Below we see my screenshots of the results in both Pingdom and GTmetrix. The load time from each report shows a speed that is faster than 3 seconds (the recommended speed for a webpage).

Below are my speed results:

Pingdom: https://tools.pingdom.com/#5ac8c2d420400000

improve site speed testing pingdom
The end result is a load time of 1.45s. Not bad right?

GTmetrix: https://gtmetrix.com/reports/fosterdanowsky.com/ssweLBvn

: improve site speed testing gt metrix

What Developers Need to Understand About Scores

A few things to note before you begin optimizing your own WordPress website.

Don’t lose your marbles chasing scores. The inner geek in us wants to chase the 100% score and “gain the system” so to speak. For me, it’s not an efficient use of developer time. In reality, websites will vary in their configuration, and I have even run into cases where the speed testing tool itself was dated. You can produce great loading time and still not have a perfect score.

GTmetrix and Pingdom have different recommendations and algorithms, so scores will vary between the two. When using these tools, choose a location closest to your web server (not your physical location).

Your goal is speed.

Don’t lose your marbles chasing scores. It’s not an efficient use of developer time. In reality, websites will vary in their configuration. You can produce great loading time and still not have a perfect score. Your goal is speed.”

Tools like PageSpeed Insights offer recommendations about how your site can be faster. The scores represent if your site complies to what Google sets as optimal or “best practices.” The score does NOT guarantee a fast website. Load time impacts ranking, so focusing on optimizing your site for speed and performance is what produces SEO results.

If you need a trusted web designer in Austin who can assist you with improving your website performance, feel free to get in touch with me ».