Speed Up WordPress – Tips To Improve WordPress Page Speed
In order to speed up WordPress websites and improve load time for WordPress websites, it typically requires a multi-faceted approach to achieve the best results. Unfortunately, there is no “magic wand” approach to speed up WordPress, and in most cases, does require quite a bit of web development and technical knowledge to really get the job done. However, within the WordPress plugin ecosystem, there are a number of tools available that can help with some of the more tricky configurations when you try to improve load times for WordPress websites. Below we’ll cover a few of the most impactful updates you can make to a WordPress website to improve PageSpeed and load times.
Optimize Images
When trying to speed up WordPress, start by taking a look at your website images. The first thing that any WordPress website owner should do prior to uploading any images to their website is optimize them. Most people don’t realize just how unnecessarily large images can be before they are optimized for the web. Optimizing for web typically just removes any unnecessary image tagging data, EXIF data, location data, and unused color data, so images can be considerably optimized without losing any quality. Image size is usually one of the biggest problems when it comes to slow website speed, so we are usually able to speed up WordPress websites quite a bit with our first round of image optimization.
If you do not have a plugin on your website to help with image optimization, you can always use the website TinyPNG.com. Their optimization tool is free to use and does an excellent job of compressing .jpg and .png images. They also have a WordPress plugin available that you can install on just about any WordPress website. All you need to do to use the plugin is generating a free API key on their website, and then any new images uploaded to your website as well as any existing images on your website can be compressed.
Of all of the page speed improvements, we will detail, image optimization can often times have the biggest impact when trying to speed up WordPress. This is due to website owners uploading images that exceed reasonable sizes. We typically suggest images be no larger than 300kb – 400kb for banner images and 150kb to 200kb and less for smaller images. We also suggest that you keep the total number of images on a page between 10-12 at most and make sure that image dimensions never exceed 2000 pixels in width. One really easy way to improve PageSpeed for WordPress websites is to make sure your images are optimized.
Minify & Combine CSS & Javascript Files
Another really great way to quickly speed up WordPress and improve your PageSpeed score is to minify your CSS and JavaScript files. When it comes to JavaScript and CSS, minification is the process of removing all of the whitespace, comments, line breaks, and other extraneous space. As white space, line breaks, and commented code all add size to a file, this process makes sure that files are as small as they could possibly be, and often times creates a considerable amount of savings. Minification is different than “compression” as the minified code does not need to be interpreted or uncompressed in order to be run.
In addition to minifying code, JavaScript files and CSS can also be combined. What this means is taking many or all of the JavaScript files that a website uses and combining them together into one file. The same would then be done with all of the CSS files on the website. This can be very beneficial to the website and it’s load time as it can greatly reduce the number of requests the site is making. For example, instead of having to load 10 individual CSS files at 15kb each, the site can just load 1 CSS file at 120kb (assuming some loss after minification). While this can sometimes lead to quirks that require some debugging in JavaScript, this is generally a pretty safe practice when it comes to CSS. This can also go a very long when in helping to speed up WordPress.
There are a number of ways that code can be minified and combined depending on the resources available and your comfort with code. First, there are a number of plugins available within WordPress that will do this for you. If your site is already developed, you are using a pre-built theme, or are uncomfortable using command line based web design tools, then a plugin is probably the best bet for you. There are a number of great options available, all of which are very low risk to site health as soon as they are disabled, any impact would be immediately reversed. You will also typically see the impact from these tools in tests like GTMetrix or our website grader right away, making them great to improve PageSpeed for WordPress.
If you’re comfortable with web development or command line based web design tools, then you may want to use Gulp. Gulp is a streaming build system that uses NodeJS to run on your machine. Gulp can be used to compile SASS files, combine and minify CSS, combine and minify JS, minify HTML, minify and optimize images, and so much more. Gulp does require an intermediate level of web design knowledge, but you can learn more about Gulp and how it is used here.
JavaScript Deferment
JavaScript is a “parser blocking” resource, meaning that as the browser is loading a JavaScript file, it stops everything else from loading while this happens. This includes text on the page that has yet to render, images on page and CSS on the page that has not rendered yet, and just about any other element on the page that comes after the JS file is called.
This can lead to problems, especially if you are loading several JavaScript files on one page. This can interfere with important metrics like the time to first byte and time to first paint, even when the actual render of the page doesn’t require these files. For example, a JavaScript file that renders a map in the footer of your website does not need to load in the “head” section of the website. This update can also have a huge impact when trying to speed up WordPress as it will allow all of the website assets to load more quickly.
There are a number of ways that JavaScript can be deferred in modern browsers. The best way to defer JavaScript is simply to load the JavaScript files after everything else on the page has loaded. You can do this by placing your script tags just before the closing “body” tag on your website. This will be supported in any browser used as long as the browser supports JavaScript.
Another approach to take is using the async or defer attribute on the script tag directly. For example, this would look like [script defer src=“script.js”] or [script async src=“script.js”]. These tags indicate to the browser that the script can be load asynchronously (or at the same time as other scripts) or that it should be deferred. With defer, the JS file can be downloaded while the HTML document is still parsing. If the file is fully downloaded long before the document is finished parsing, the script is not executed until the parsing is complete. You will often be able to speed up WordPress very easily with Javascript deferment.
Server Optimization
The server your WordPress website runs on will also play a big part in whether you can speed up WordPress websites. There are a number of server modifications that you will need to make but here are a few of the more important ones.
You will want to make sure your website has Gzip enabled, which will ensure that all of your website files and assets are compressed at the server level. You will also want to do things like adding expires headers to all of your static file types, configure ETags, and make sure your .htaccess file has all of the necessary compression enabled. While it does take a more experienced developer to implement these changes, you are usually able to speed up WordPress considerably by improving the way your server delivers the website. If you would like more information about our WordPress management services, schedule a consultation today.
Website Caching
Once you’ve implemented all of the other changes from above, you can then begin to look at page caching and server caching. Caching creates a “saved” or “cached” version of the website at the time the page is loaded. The server then is able to load the “cached” version of the page or pages instead of having to load the page and all of its assets each time.
For example, if your page has several images, scripts, images an CSS files, by caching these files you are able to load them directly from the cache instead of having to request them from the server each time the page loads. This can save a considerable amount of time for users, especially for pages with heavier content.
The website owner will also have control over how often the cache refreshes. For example, if the website is going to be updated with new content every 4 hours, you will want to make sure the cache is cleared and refreshed directly afterward. You can usually set this to occur on an action, like when a new post is published. You can also trigger the cache clear manually at any time with just about any caching plugin.
When it comes to caching plugins, they’re all great in their own ways. Two of the better ones we have used however are WP Fastest Cache and W3 Total Cache. Both of these caching plugins are “plug and play” and will deliver huge WordPress website speed improvements.
Our Favorite WordPress Page Speed Plugins
Not all WordPress plugins will slow down your website. When it comes to caching and minifcation plugins, you should see big jumps in your page speed scores after enabling these tools. Here are a few of our favorite WordPress caching plugins.
WP Fastest Cache
By far our favorite caching tool for any WordPress website. This caching plugin handles a number of really impactful server-side caching needs and server optimizations with a few clicks of a button. All of the general features of the plugin are free to use for any WordPress website user, and like many premium plugins, there are premium features available for an upgraded cost. We definitely recommend testing out WP Fastest Cache on any WP install where you will be using caching.
W3 Total Cache
W3 Total Cache is another excellent caching plugin available for free to any WordPress user. W3 Total Cache improves website speed by improving server performance, caching every static aspect of your website, and reducing the download times of content. W3 Total Cache also integrates with just about any CDN right out of the box allowing your caching and CDN to communicate a bit better. W3 Total Cache is another great option for just about any WordPress install.
Fast Velocity Minify
Sometimes you may be implementing website caching at the server level, or perhaps the caching plugin you’re using does not offer minification. In these situations, you may still be in need of a way to merge and minify your CSS and Javascript. While there are a number of plugins available for this purpose, the one we typically use is
Fast Velocity Minify. The plugin developers update the plugin often, it works well with just about any WordPress website, and it has a major impact on overall WordPress website speed.
Compress JPEG & PNG Images
One of the easiest places to make big gains in your website page speed score is in your image optimization. Often times, website owners will upload images that are too large, not optimized, and at much larger dimensions than necessary. While WordPress does have native functionality that allows developers to resize images that are too large, image optimization is something else entirely. The website and service TinyPNG.com created a WordPress plugin that utilizes it’s API to easily and efficiently compress all of your website images. The tool allows you to compress and optimize images on demand and will also optimize images as they’re uploaded. This plugin is one of the most powerful plugins that you can have on any WordPress website, and best of all it’s free to use.
Get Compress JPEG & PNG Images
There are a number of other excellent WordPress plugins that will help with website speed including caching plugins, compression plugins, minification plugins, and more. We encourage you to test out a variety of plugins for yourself in a development environment to get a better idea for the caching stack that works best for you.
Speed Up WordPress
If you own a WordPress website and are interested in improving the web page speed, page load times, time to first byte or any other PageSpeed metric, we can help. Page speed plays a crucial role in your websites page ranking, so it’s important that your website is optimized for premium performance. If you would like more information on how we can speed up WordPress websites, contact us today to schedule a strategy session.
Squarespace Vs WordPress – What’s Best For Your Company?
When it comes to building a website for your company, there are quite a few things to take into consideration, one of the more important is the content management system, or CMS you will use to manage the website. While there are countless content management systems available, two of the more popular are WordPress and Squarespace. Let’s breakdown Squarespace vs WordPress so you can understand what is best for you.
Who Is Building Your Website?
So you’re building a website and you know you’re going with either Squarespace or WordPress. The first thing you should figure out is who will be building your website? If you plan to do it all yourself and you don’t have much experience designing websites, you may want to take the Squarespace route. Squarespace makes it very easy for beginners to choose templates, populate content and images, configure website details and go live without much difficulty. Squarespace offers a number of attractive themes or templates that are generally customizable, allowing even the most inexperienced designer to create something decent looking.
If you plan to hire a professional web design company to build your website, this changes things a bit. Some website design companies offer clients a Squarespace and a WordPress option. This way, clients with varying budgets have options. In most cases, the biggest difference will be that while both the Squarespace and WordPress websites can be designed to fit the company or brand, there will be limitations when it comes to both frontend and backend capabilities when it comes to Squarespace vs WordPress. All in all, a website for WordPress will typically be a bit more customized to the business. Either way, make sure to look at the web design companies portfolio to make sure they have a verifiable history of WordPress web design or Squarespace website design.
Website Frontend Functionality
One of the biggest things you should know when deciding on WordPress or Squarespace is what is capable from a frontend design standpoint. A websites frontend functionality, or user experience, will generally cover all of the things that a user can interact with on a website. While Squarespace offers quite a few out of the box elements that have various effects and animations that can be applied to them, there is a very definite limit as to what can be achieved. This means that for a company that simply needs to have a basic, clean, informational website, Squarespace may be the right solution.
Squarespace vs WordPress – Which Is More Usable?
With WordPress, website developers and website design companies are able to utilize any sort of frontend frameworks, libraries or other code that they would like. Javascript is a very popular language right now that is used to deliver fast, impressive user experiences across all browsers and devices. When looking at Squarespace and WordPress from a web designers point of view, WordPress gives much more flexibility as to what can be achieved and the customizations that can be brought to the user experience.
Website Backend Functionality
When it comes to creating custom backend functionality, WordPress is the winner hands down. To understand why it’s important to understand the primary differences between WordPress vs Squarespace WordPress is an open source, self-hosted content management system, which means that you have access to both the site files and the database itself. This allows developers to develop finely tuned plugins and services for websites on demand.
WordPress also is truly built for scalability. It offers a variety of utilities to developers such as post_meta data, user_meta data, and much more. This allows developers to easily tie together various pieces of data, associate user accounts with products and information and so much more. Whether the need is for basic informational content routing, dynamic contact form routing, or anything else, developing a clean, custom solution is never impossible. It’s hard to compare Squarespace and WordPress when looking at it in these terms.
WordPress also makes developing plugins very easy, allowing developers to easily create custom functionalities for their websites as needed. There is also a huge community of WordPress plugin developers that create plugins of all sorts for free. Plugin functionality covers the literal range of needs, from basic forms to full-on CRM systems. If you were to ask any modern web developer if they preferred Squarespace and WordPress, I would assume the answer is WordPress nine times out of ten.
Plugins / Development Community
There is an ever-growing number of WordPress plugins readily available free of charge download from the WordPress.org Plugin Directory Site. There are also tons of exceptional or paid plugins for WordPress. When it comes to the development community backing WordPress or Squarespace, there really is no question. The WordPress plugin and development community is one of the largest and most active open-source communities in the world. Currently, there are more than 50 thousand plugins available free of charge for users to install on their websites to add enhanced features, enhance SEO, include additional functionality, add improved security and a number of other reasons. This makes the question of WordPress or Squarespace a lot easier if making your decisions based on framework scalability.
In addition to free plugins, there are also thousands of paid plugins. Why would you want to spend money on a plugin? Well, there are numerous reasons. While there are countless plugins offered totally free from the plugin directory site, paid plugins normally provide full-time assistance personnel and designers that deal with preserving the security and compatibility of plugins with the most recent variation of WordPress along with other styles and plugins.
Typically, plugins for WordPress won’t throw conflicts with the core of WordPress or with other plugins, however, in some cases, a plugin’s code will cause problems. With free plugins, it’s atypical that a plugin developer would support an issue. However, with a paid plugin, it’s you are also paying for the assistance from a professional developer if anything fails.
WordPress & Squarespace 3rd Party Tools
Squarespace also has an app marketplace available to its users. Many apps are free, however, others will have monthly fees. Also, Squarespace does not necessarily provide support for any of the third-party plugins. These plugins are also typically more limited in scope as far as custom functionality and business processes go when it comes to free options.
For example, where they may be a specific feature available from a Squarespace plugin, there may be 3-4 free plugin options with the same and/or more features. This means that the more complex your need, the more likely it will be easy to achieve using WordPress or WordPress themes. When it comes to backend customization, WordPress is the winner when comparing WP & Squarespace.
Drag & Drop Editor
One of the things Squarespace is most known for is it’s “drag and drop” editor. The Squarespace editor is easy to use and makes it simple to create a beautiful website. No matter the experience level of the user, if you’re generally comfortable on a computer, you should be able to set up a Squarespace website.
The Squarespace website builder provides the user with a number of elements that can be dragged, dropped, configured, and filled with content, images, and videos. This allows users to set up their content using attractive design elements, without compromising traditional design practices and maintaining a professional look. So this time in the question of Squarespace verses WordPress, Squarespace has the upper hand.
Or at least it did… Up until recently, WordPress didn’t offer a native draggable editor. Because of this, a number of plugins were created to meet this need such as Elementor and Divi. However, since these were plugins, this added the potential for plugin conflicts, security concerns and decreased website speed performance.
In late 2018, WordPress released their first native manual element-based website builder – Gutenberg. Gutenberg provides a huge number of out of the box elements that can be dragged and dropped into the WordPress content area. Designers can then pull these blocks into their themes and create global styles for them. This gives website owners and novice users the ability to create easy to manage designs like with Squarespace. This also gave many novice website builders something more to think about when choosing between WordPress or Squarespace.
Because it’s WordPress, this means that WordPress web developers can also create custom elements, custom blocks and more for the Gutenberg editor. This is a feature that is not really available to Squarespace designers, at least not in as robust a manner as with WordPress. All of a sudden, WordPress is holding it’s own in the drag and drop editor competition.
So when it comes to the manual drag/drop editing question of Squarespace vs WordPress, the answer is hard. I would still say that Squarespace has an easier to use manual dragging editor, however, WordPress does offer more flexibility. That also doesn’t mean that as Gutenberg won’t surpass Squarespace as it matures.
E-commerce Functionality
Both Squarespace and WordPress offer e-commerce online store capabilities and online shopping options. Both platforms offer integrations with the top payment processors like authorize.net and Stripe. Both platforms allow you to get shipping rates and assess shipping costs based on location. Both platforms allow you to manage and maintain robust product catalogs. However, just as we mentioned above, WordPress does offer quite a bit more when it comes to delivering custom e-commerce capabilities.
WordPress offers a variety of e-commerce options, however the most popular is WooCommerce. WooCommerce is an open-source e-commerce plugin for WordPress. It is best for small to large-sized online merchants that are already utilizing WordPress. Introduced on September 27, 2011, the plugin rapidly ended up being well-known for how easy it is to set up and personalize.
WooCommerce was developed by popular WordPress vendor, WooThemes. WooThemes contracted Mike Jolley and James Koster, designers at Jigowatt, to deal with a fork of Jigoshop that ended up being WooCommerce. By August 2014, WooCommerce powered 381,187 websites, which accounted for roughly 17.77% of e-commerce websites online.
WooCommerce is utilized by a variety of high-traffic websites from a variety of niches. For the 3rd week of September 2015, data showed that WooCommerce was running on 30% of e-commerce websites.
E-commerce is quickly growing around the world and WooCommerce has more than 39 million downloads as a plugin and is presently active on more than 3 million sites and is the most popular eCommerce platform in 2018. WooCommerce has roughly 4% of the leading million HTML pages.
Due to the WooCommerce’s popularity, it also has a very active plugin development community. This means that it’s very easy to find a free plugin that will fulfill whatever your e-commerce needs are.
So when it comes to e-commerce web design functionality, the most important question when it comes to Squarespace vs WordPress is what is your need. Do you simply need to list a basic product, collect payments, and process an order? Or do you have bigger aspirations for how you’d like to display your products and engage your customers? Whether you go with WordPress or you go with Squarespace, you will be able to sell your products, however, the platform will determine just how flexible you can be, and just how much it will cost you to enter the market.
Website Cost
One of the biggest questions you should have as a new website owner is what will the website cost you. In general, you will have upfront costs for WordPress vs. Squarespace design and development, ongoing costs for hosting and email, as well as maintenance and security costs. You will incur all of these costs in one way or another on both platforms, however, they will be different.
Starting with up-front costs, it will generally cost more to have a custom WordPress website built than a custom Squarespace website. It will cost you a lot less time and effort to set up a basic Squarespace website yourself than it would to set up a basic theme on WordPress yourself. The up-front WordPress costs really only have to be as much as you feel comfortable taking on though as it should not be difficult to find a designer or developer to work within your budget.
Once your website is built, there is no monthly or yearly subscription to use WordPress, however, there is with Squarespace. Website’s using WordPress need to be hosted on a server. Monthly WordPress hosting can cost anywhere from $5 per month to $500+ per month. However, even the smallest of shared servers are typically able to run several WordPress websites, so the costs greatly reduce for every WordPress instance you host. This is not the case with Squarespace websites.
In addition to the base cost for the Squarespace site subscription, there are also a number of add-on costs for things like e-commerce, various integrations, and features and much more. As mentioned previously, when it comes to WordPress, there is almost always a free plugin that will do what you need. And if you’re unable to find the right free plugin, paid plugins usually have a one-time cost, not a monthly fee for use.
Squarespace vs WordPress – What Are Ongoing Costs?
WordPress hosting plans will also usually come with at least a couple, if not unlimited email inboxes. This is a cost you may have to take on anyways in addition to your Squarespace costs.
Ongoing website maintenance, website updates and upgrades, and website management is not something that will come with any WordPress website, however, the company that builds the site will typically offer these services. With Squarespace, your subscription fees do go a long way to cover website support, theme design assistance and more, however, it’s rarely the same one-on-one, dedicated support that you would get directly from a web design agency. However, if this is not something your company truly needs, then there is no real need to take on additional, unnecessary costs.
Overall, when it comes to website costs it’s always going to be one of those things where you get what you pay for. Squarespace vs WordPress website costs at the very bottom line will be generally similar, however as your need for more customization and more websites grow, WordPress quickly becomes the more economical option.
Website Security
One concern that every website owner should have is website security. Every website is generally susceptible to security threats. Therefore, so are any networks that may be connected to web servers or accessing websites. A websites web server and the site or sites hosted on it can definitely present a number of different security risks. Because of this risk, it’s important to take considerations towards locking down your website, it’s data, and what you are exposing your website users to. Let’s take a look at WordPress and Squarespace when it comes to website security.
Squarespace is a hosted platform, meaning that for the most part, security is not your concern. Squarespace manages the server and it’s security, allowing you to simply worry about continuing to deliver content and services to your website users. However, this also means that if Squarespace’s codebase were ever to be compromised, that every Squarespace website would be potentially vulnerable. In addition, in the event of human error, like a Squarespace employee clicking a malicious link, you then run the risk of compromising your or your clients use information. The likelihood of these things happening is, of course, minimal, and a company the size of Squarespace goes far and above to prevent these types of things from happening.
Squarespace vs WordPress – Which Is More Vulnerable
WordPress, on the other hand, is a more vulnerable system at its core. To start, it’s opensource, meaning that anyone can dig through its code to figure out how it works. This is intended to drive the platform and it features forward, however, there are of course those who will exploit this. In addition, your typical shared web hosting server is not going to have the same type of security protocols in place that a company like Squarespace might.
WordPress does have a number of highly effective, and very robust security plugins. However, there are also thousands of plugins floating around the internet that have been infected with malicious code, just waiting to be run on unsuspecting WordPress websites.
All in all, if website security is a concern, there are a number of easy ways to lock down and harden a WordPress instance to the point where it is nearly impossible for the average hacker to break in. Depending on the need and the sensitivity of the data being stored, there are also measures that can be taken to store data on external servers with even stronger security protocols. However, it goes without saying that there will without a doubt be thousands of WordPress websites that will be hacked and compromised in the next year, while it’s unlikely that Squarespace will be compromised at a global level. So, when comparing WordPress and Squarespace when it comes to security, the verdict is really entirely based on each website owners circumstances.
Squarespace vs WordPress, What’s The Verdict?
When all is said and done, we will always prefer WordPress. It’s flexible, robust, and makes it easy to create really usable website features for clients. Designing custom themes and interactive features is also as flexible as can be, so from a web designer’s standpoint, the choice is simple.
However, we understand our clients’ needs as well as their budgets. That being said, Squarespace websites can be the best decision for an MVP product, especially when launching a new brand and looking to do market research. Squarespace websites are also perfect for the small local business that is looking to get on the internet and make a name for themselves.
Work With Proper Noun
If you’re interested in learning more about WordPress websites or talking to us about having us design a custom WordPress theme or WordPress plugin, don’t hesitate to reach out and schedule a strategy session.
Hero Image Design Tips
If you’ve spent any time browsing the Internet (and—it’s 2019–who hasn’t?!) you’ve likely come face to face with a hero image. What is a hero image, you ask? Does it have anything to do with Superwoman or Captain America? A hero image is the large oversized banner image that usually covers the top/header section of a webpage.
Because of its size and prominence, a hero image is usually the first thing visitors see when they land on your homepage. Therefore, your hero image is often responsible for the first impression visitors have of your brand. Because of this, it is vital that your hero image is designed for maximum effectiveness.
The following article will cover some of our top tips for ensuring your hero image is as powerful as it should be. By following the below suggestions, you can optimize your hero image so that it is truly, well, heroic!
1. Always use high-quality images: This should go without saying, but your hero image should be of a high resolution so it looks sharp. The images you source for your hero can be sized down, but stay away from sizing up or stretching images, as this can cause them to appear fuzzy or blurred. Visitors will instantly be able to tell if your images aren’t of a high-quality standard, and this will reflect poorly on your business.
2. Make sure your hero image is relevant: Again, while this point may seem obvious, we’ve seen enough mistakes in this department to know better. Your hero image is part of your brand collateral, and therefore it should epitomize your brand. If you’re a fair trade coffee company, for example, your hero image shouldn’t have shoes on it. It should have something related to what you do or sell. All graphics associated with your hero image design (and throughout the rest of your website for that matter!) should make sense.
3. Use your brand colors throughout your hero image: As a prominent feature on your digital storefront, your hero image is the perfect place to perpetuate your brand identity. Using your brand colors within your hero image for the title, text, border, and/or background will help you accomplish this. Consistent branding across all of your marketing collateral will look professional while boosting your brand image.
Image via https://pikwizard.com
4. Choose a hero image that remains true to your brand style: Just as your hero graphic should be relevant to your business, it should also remain true to your brand style. For example, if your brand aesthetic (website, packaging, stationery, store design, etc) is minimalistic and neutral, your hero image shouldn’t be cluttered and colorful. Alternatively, if your brand is loud and bright and uses punchy colors across its marketing collateral, your hero image should be just as bold. The feeling a visitor gets when looking at your hero image should be the same feeling they get when they see your brand across its other channels— both online and offline.
5. Include an attention-grabbing headline: Your hero image needs to have a headline that will draw visitors in and make them want to learn more about your products and/or services. It should give them an intriguing preview of what you’re all about. An attention-grabbing headline will help make your hero image— and therefore your website— stand out. What would the title of a story about your brand say? What is your business’s front page news? Ask yourself these questions when you try and decide what the best headline is for your hero.
6. Include a few intro sentences about your brand: Your hero image and the text it includes provides visitors with an introduction to your website and to your brand. Here, you’ll want to communicate the most important aspects of your business—your USPs (unique selling points). These are what make your business stand out from the rest, and give potential customers the incentive to choose your products or services over your competitor’s. Make your intro summary short, sweet, and to-the-point. It should be compelling and tempt visitors to remain on your website to find out more!
Image via https://pikwizard.com
7. Experiment with your design: As the saying goes, practice makes perfect, and this is also true for your hero image design. It’s unlikely that you’ll create your optimal design on the first try. Instead, experimenting with different placements, images, designs, etc, will help you choose the one that’s right for you. Play with elements such as texture, color, and fonts to find your ideal fit.
8. Test your pages for loading speed: While a high-resolution image is essential for a professional-looking hero, it also has the potential to slow down the loading time of your page(s). If this happens to you, you may have to minimize the size of your image so that it retains its quality but doesn’t affect your website operation. You can avail of speed testing websites or applications to help you with this, or simply test it yourself by navigating throughout your website at different times of the day to see if it’s as fast as it needs to be. Slower loading pages make it more likely that visitors will get frustrated or bored and navigate away from your site.
9. Test your hero image on mobile: Like the rest of your website, your hero image should be responsive in design. This means that it should adapt to fit whatever screen visitors are browsing on— mobile, tablet, or desktop. With so many internet-enabled devices on the market today, you never know which option your site visitors will choose for their browsing. The only way to make sure every browsing experience is seamless is to invest in responsive web design.
Your hero image needs to capture the attention of visitors to your site and tempt them to find out more about your brand. A hero image is a powerful tool that every business should be using to make their website more impactful. If you’re searching for even more digital design tips, visit our blog or contact us today! Our experts are happy to talk to you about how we can help you give your business or brand a new look.
Ellan Dineen is the Marketing Associate at Design Wizard. When she’s not hard at work in the Marketing Department, Ellan can be found en route to foreign lands with a book in her hand and a podcast in her ear. With a Master’s in English and Diploma in Social Media Marketing, she knows the importance of staying up-to-date with the industry’s latest trends and insights and is keen to pass these tips on to her readers.
Innovative Web Design Trends of 2018 – A Year In Review
It’s hard to believe that it’s already 2019, and even more hard to believe just how innovative web design and creative design has become in general. Web design has come a long way since flash websites and parallax background scrolling, not only on the front end but on the backend too.
While every designer has their own personal tastes, every year there are thousands of websites built that are undeniably user friendly, creative and innovative. We’ve put together some of the most innovative websites, web design trends, web technologies, and design techniques that were popular in 2018. We can’t wait to see what the web has in store for 2019.
Design Trends
Broken Grid Layouts
One of this year’s more innovative web design trends was the broken grid layout. This unique layout is extremely effective at breaking up the monotony of the traditional 12 column website grid layout. It allows for brands and businesses to bring attention to specific messages, images, videos and more to really tell a brand story in an effective way.
The name broken grid layout may be a bit misleading as the design will still conform to a grid of sorts. In a broken grid layout, design elements will extend or shift across gutters and columns. You could also think of a broken grid layout as an overlapped grid layout or an offset grid layout.
With the rapid adoption of CSS grid, web designers now have more opportunity to create designs that are less like the traditional fixed column design, and more like traditional print design. Broken grid layouts are not the right fit for every brand, but was absolutely a prevalent design trend across the web in 2018.
Interactions & Animations
In 2018, more and more websites were designed using intricate SVG driven web animations, as well as animations are driven by user interaction. With canvas and Javascript animations being fairly widely supported at this point, developers have become more and more comfortable with using these technologies to create interactive, innovative websites. In addition to using vanilla Javascript to animate SVG elements, a number of Javascript libraries were created for developers to use, for example, Vivus.
Subtle animations like directional fade in animations (for example fade in and up), were also very popular for text and image elements. These animations are also typically triggered based on the users scroll position, so as they scroll down a website, the elements will appear into view. This technique is an excellent way of breaking up the monotony of heavy content pages into image and text blocks. User interaction like hovers and clicks are also a popular method of triggering various website animations. Making the web a more interactive place seems to be the general direction that innovative web design is moving for 2019.
Web designers also began utilizing various creative page transitions in websites recently. These page transitions are also typically triggered by website scroll position, or Waypoints, but can also be triggered on a click event. Page transition animations can be something as simple as a quick sweep state-change animation, however, many designers got quite a bit fancier. With geometric deconstructions, various zoom and fade based transitions, interactive video transitions, and so much more, it is clear the web is no longer being treated as a static canvas for designers. You can see even more great examples of this at Design Rush.
Minimalist Navigation
Another popular design trend for 2018 was using minimalist navigation. Minimalist navigation is similar to using mobile-friendly navigation in a desktop view. This means that unlike traditional websites, the website navigation is not inherently visible at any point, but is triggered by a menu toggle of some sort, in many cases a hamburger icon.
This trend was driven by a number of factors including mobile-first design, responsive design, and an overall push towards minimalism in web design. Minimalist navigation not only allows for a website to have a cleaner, less busy, header area, but it also allows for web designers to build more robust, logical website navigation utilizing a full screen take over. When designers have the ability to utilize the full viewport for their navigation they can construct website navigation that acts more like a website index or table of contents than traditional header navigation ever could.
And while there may still be some users that are confused when presented with minimalist navigation, most internet users understand that a hamburger menu indicates a navigation trigger. So when it comes to user experience, there should be no concern about confusing your users, or whether or not they’ll be able to figure out where your website navigation is.
Full-Page Video and Background Video
One of the most popular and innovative web design trends for 2018 was utilizing full-page background video in place of static background images. Background video adds texture and motion to the user experience, which really grabs the users attention. Video backgrounds also give websites a really fresh and unique look. While many brands and businesses out there are recycling a lot of the same stock photography on their websites, a video background will be something unique to your website.
Background video can be served as either HTML5 video or streamed from a service like Youtube or Vimeo, however, you should take a few things into consideration. First, you should consider the size and the length of the video. You don’t want your video to be more than 15-20 seconds and should be as small in size as possible. Remember, this video is not one that the user should necessarily stop and watch, but one that should be used in place of a static background image. You should also make sure your video has a high enough quality. You don’t want to cheapen the look and feel of your website by using subpar video assets or video editing.
Background video can really bring a website to life with little to no additional coding necessary, which has made it an unbelievably popular and innovative web design trend that will only continue.
Typography
Serif Fonts Gain Popularity
Prior to computers having retina screens and browsers really implementing solid font support, most web designers stuck to using sans-serif fonts. Sans-serif fonts ensured maximum readability as well as flexibility in the design. As technology has continued to improve, and user experience has moved to the forefront of design, we’re beginning to see a much more elaborate use of typefaces in web design.
Serifs are great because they can be used for headline fonts or for body fonts. If you’re looking to create elegant looking titles and section headlines, there are a number of serif fonts that will fit the bill. For example, you can find a few of our favorites like Playfair Display and Lora on Google Fonts. If you’re looking for something that is extremely readable, there are a number of extremely clean serif fonts that will give your website that clean print look. Many designers also like to mix their heading and body fonts, one a serif and one a sans-serif.
Text-Driven Design
Another innovative web design trend many designers began more regularly using in 2018 was text driven design. The true core of any website is its text content and, more importantly, its message. Many designers have begun taking this to heart and are constructing entire designs and layouts using nothing but text and white space/dark space. While images do help communicate a vibe and a feeling, nothing will ever be more powerful than words when trying to clearly communicate a brands message.
Justin Jackson, an internet entrepreneur and popular bootstrapper, wrote a popular piece several years ago called “This Is A Web Page” that does a great job of really capturing the importance of a website’s content. Max Kaplun’s portfolio website is another great example of truly excellent typographic web design. As you’ll see, his homepage is simply a brief professional bio, stylized to be visually appealing and to bring attention to the most important aspects of the content.
Frontend & Backend Web Design Technology
CSS Grid
If nothing else, 2018 was the year of CSS grid. As CSS grid becomes more widely supported by browsers and devices, more developers are beginning to incorporate it into their innovative web design projects. CSS grid allows for web designers to create user experiences that conform to a more traditional print-style grid. It also provides for a much more flexible and usable grid system than Flexbox does.
This does not mean that CSS grid is here to replace Flexbox, in fact, it’s actually the opposite. CSS grid becomes even more powerful when combined with Flexbox. For example, you could create a simple 3 by 3 grid with CSS grid, and then use Flexbox to center the items within each grid element. As web design becomes more innovative and creative directors become more adventurous, these and other CSS technologies will continue to evolve and improve. As a result, powerful, effective web design will continue to drive the Internet, and really all online business, forward.
JS libraries
Over the past several years Javascript has become one of the most popular languages on the web for both frontend and backend development. As a result, many developers have begun creating a variety of Javascript utilities, Javascript tools, and Javascript libraries. These tools help simplify web design for other developers as well as to continuously move the needle as to what makes web design innovative.
At this point, if you have user experience need, chances are there’s a Javascript library for you. There are libraries that perform basic utility functions, like dynamically truncating text, and libraries that perform more complex functions like animating SVGs or monitoring user interactions.
One of the most popular Javascript libraries for the past decade or so has been jQuery. According to BuiltWith, about 86% of the top 100,000 websites in the world are currently using jQuery. As a library, it simply makes the syntax for vanilla Javascript a bit more simplified. For example, instead of requiring a lengthier function to animate the opacity and visibility of an element with vanilla JS, there is a simple ‘.fadeOut()’ function that can be applied to any element.
As Javascript continues to drive some of the most innovative web design on the Internet, I’m sure we will only continue to see more new and interesting technologies being created with this language.
Web Design Inspiration
Here are a few more examples of some of the more innovative designs of 2018 of the types of innovative web design we detail above.
PlaygroundIT – Broken Layout Design
Conspire Agency – Typography and Shapes
Byzantium – Whitespace Design, Javascript & CSS Animations
Parkbench – Illustrations, Geometric Shapes, Whitespace
Beyond The Frontier – SVG Animations, Interactive Frontend Javascript, HTML5 Video
Innovative Web Design In 2019
Web design has come a very long way since the early days of the Internet. And as web designers continue to push the envelope when it comes to design, layout, and technology, it will only continue to progress. As design trends change, new styles are introduced, and new tech becomes available, web design best practices and websites at large will only continue to become more impactful and usable.
5 Reasons To Invest In A Custom WordPress Theme
WordPress has really come a long way from its humble beginnings as a simple blogging platform to the powerful website builder and robust content management system it is today. Over the past several years WordPress has become the go-to CMS for custom WordPress development. One great thing about WordPress when looking at it as a web developer is that it is flexible and easy to create a fully custom WordPress theme. WordPress makes it easy to store custom data on the backend and then easily render it on the frontend.
If you’re thinking about having a custom website built for your brand or business you should really consider using a custom WordPress theme.
When it comes to risk vs. reward, a custom WordPress theme is a great investment for your business. Today, it is not enough to simply have a website, it should be fast, well-designed, user-friendly, and it should fit your brand’s message and feel. Many businesses will try to save money by paying a web designer to modify a commercial theme. However, the end result ends up looking sloppy and “hacked together” – two terms no one wants to be associated with their website.
At the end of the day, if your goal is to have the best possible online presence for your brand or business, then you should have a custom website. Here are a few reasons why you should bite the bullet and choose the custom WordPress template.
Customizations and Updates
One of the biggest values of a custom WordPress theme is that the content management system will be custom tailored to your content. Most web design agencies will make sure it is easy for the client to add, edit and modify all of the content on their WordPress website.
When it comes to commercial WordPress templates, you are required to use the pre-built content sections that come with the theme. This not only makes it more difficult to add new sections to a page but can also impact the page’s design.
For instance, say you wish to re-arrange two sections and remove one section from your home page. While you may be able to do this using the theme editor, it may result in something that just does not look good. And if the website owner can’t make the design work, no one is happy.
We use a plugin called Advanced Custom Fields in almost all of our custom WordPress themes. This plugin lets us add any number of custom text inputs, image inputs, file uploads and much more to any page. This allows us to give the WordPress website owner limitless flexibility when managing their website content.
Commercial themes are also very reliant on big editorial style photos to drive the design. Most website owners find that they swap out the theme stock photos for their actual photography, the websites lack the same aesthetic appeal. This is because the commercial theme was designed around those specific photos.
When we design a custom WordPress template from scratch, we start with the media assets that you have available. We then custom tailor our website designs to your brand media, brand guidelines, and brand message. This means that once your website is finished, your photos and videos will enhance your websites messaging and aesthetics, not take away from them.
Stand Out From The Competition
It’s no secret that competition is fierce online, especially when it comes to small businesses and local services. If you want to stand out from your competition, the first thing you should do is have a website that not only stands out but really communicates your message.
In most cases, you will offer the same general services as your competitors, but what do you do that sets you apart? Do you offer better prices, better customer service, better hours? A website that is designed with your message in mind will more clearly communicate your competitive advantage to your customers.
Also, customers will oftentimes feel more comfort and confidence with a business that has an aesthetically appealing website. When you invest in a website that looks great and is easy to use, your customers will notice. By making it easy for customers to find your business and services, you’re drastically increasing the chances of converting a website visitor into a new customer.
The design of your website is very important when it comes to establishing trust in the minds of potential customers. When you use a custom WordPress theme, you know your design will stand out from the crowd. Your custom WordPress website will also more effectively communicate the value that your business provides.
Avoid Bugs & Conflicts
When it comes to a small business website, the most important thing is that it is always working. Even though WordPress is very user-friendly, you are always running the risk of excessive bugs and conflicts when you use a commercial theme.
Commercial WordPress themes will typically utilize a number of Javascript libraries and third-party plugins. These plugins and libraries can add different functionalities to a WordPress theme, however, they can often times slow down a website and create bugs as well.
The goal for the developer of a commercial theme is to include as many bells and whistles as possible so that there’s something for everyone. While this makes sense in theory, often times this results in a lot of excessive code running on the frontend and backend of your website.
This means that normal processes like updating plugins, updating your WordPress version, or installing new plugins could ultimately break part or all of your website.
When you hire a web design agency to build a custom theme, you can have confidence in the website code base. To start, a custom theme will only include as much code as is needed and no more than that. This means your site won’t experience “code bloat”, and you will have a much smaller chance for code conflicts.
A custom WP theme will also typically rely on as few third-party plugins as possible. Commercial themes may utilize plugins to integrate with social media or build image sliders, a custom theme will almost always build these components bespoke for the website. Doing it this way allows the web design studio to ensure that the slider will not compromise page speed.
Don’t Forget About Page Speed
One major concern for any website owner is how fast your website loads. Not only is it just a better overall user experience when your website is fast, but WordPress website speed is also extremely important when it comes to website rankings in Google.
Two of the biggest factors that can contribute to slowing down a website are using excessive Javascript and using too many large images. Unfortunately, most commercial themes rely on both of these things.
On average, the standard commercial theme will load anywhere from 15 to 20 additional third-party Javascript files. Each of these files must load one at a time because Javascript cannot load simultaneously.
Custom WordPress Theme Optimization
In comparison, our typical custom WordPress theme will use 1 to 5 Javascript files. We also use development tools to minify and merge our CSS and JS files. Doing this minimizes the overall file size and saves a considerable amount of time when loading the website.
As we mentioned before, commercial themes are also very reliant on big editorial style photos. While many website owners don’t realize this, photos can get extremely large, sometimes in excess of 20 megabytes. However, when an image is saved for the web, you should always try to keep the total image size under 300kb – 400kb depending on the dimensions.
Because many commercial theme designs are so reliant on images though, this requires that website owners upload 5, sometimes 10, large images to a single page. As a result, the overall website page size will balloon, and total website page load times will increase.
When designing a custom WordPress theme, we consider our use of photo and video in the overall messaging as well as how it will impact the overall page size. We also make sure to utilize various forms of image compression before images are uploaded to our websites as well as once on the server. In many cases, we’ll also utilize CDN services like Cloudinary or Cloudflare to better serve images to users throughout the world.
Support Updates & Management
When you purchase a custom WordPress theme you are also purchasing a different level of support. The typical web design agency will provide personal, rapid support, especially during the first month or two that a website is live.
When we work with a business to develop a custom WordPress theme, we also include multiple hours of training, warranty support, and ongoing support. We like to make sure that our clients know exactly how to manage their websites, and when something isn’t quite as they’d expected, we fix it quickly.
When you purchase a commercial theme, there is usually some sort of support you are able to purchase for an additional yearly cost. These support services are generally very slow. You are entered into a support queue with a number of other users and can wait days in some situations before getting a response.
Also, commercial theme support will almost never provide theme customizations or modifications without charging additional fees. While many customizations will be quick and painless, it can be very risky to rely on theme support for more complex customizations.
In most instances, developers of commercial WordPress themes don’t offer any customization support or support for integrations third-party plugins or tools.
Most importantly, when we develop a custom WordPress theme, we are developing it for the most recent version of WordPress at the time. This ensures we will be using the most up to date WordPress code base and that there is a much lower risk of integrating third-party software.
When a theme or WordPress install is not up to date, you run the risk of experiencing security vulnerabilities, plugin conflicts, and code deprecation.
While many free or commercial WordPress themes receive regular updates, most WordPress website owners have no way of knowing just when a theme was developed or when it was last updated. In addition, the average website owner would have no way of understanding what the most recent updates covered or the overall quality of the code base.
Investing In A Custom WordPress Theme
If you are looking to get your business online as quickly as possible for the least amount of money, it can be tempting to use a commercial WordPress theme. In some situations, a commercial theme may be all your business needs. However, as many website owners can tell you, this is usually a bad decision.
If you plan to build a long-lasting, aesthetically pleasing presence online, investing in a custom WordPress theme is probably your best bet. If you’re interested in learning more about our WordPress development services or seeing some of our custom WordPress work, contact us today to schedule a free consultation.
What to Look for When Choosing a Web Design Agency
Choosing a web design agency is one of the most important marketing and advertising decisions company owners make. The right company can help bring your target audience to your site, converting them into customers. Making this decision too hastily or hiring the cheapest agency you can find can have a detrimental impact on your branding. There are a few tips you can keep in mind to make this decision much easier without risking your brand’s future.
Consider Ongoing Support
Your web design agency does so much more than simply creating a website. They can also help with things like finding you email hosting, website hosting, and domain management, email marketing, Facebook marketing. As a result, you need to know that you can reach someone as soon as possible from the agency should something go wrong. For example, if your email goes down, you need to be sure that you can reach an agent who can help you get it working again. Any delay in website functionality or email management can cost you customers. Ideally, you should hire a company that is accessible and easy to contact when there are technical issues.
Look for a Diverse Portfolio
While some clients may prefer to remain confidential, most web design agencies do have a portfolio of existing work you can look at. Never hire a company that refuses to share any prior websites or design work. Instead, focus on finding one with a diverse portfolio, covering multiple industries. You can also look for an agency while browsing the internet for personal reasons. In some cases, the agency’s branding may appear at the bottom of the page, giving you a quick way to look at other existing work.
Visit the Agency’s Website
Once you find an agency you like, spend some time visiting their website. In particular, look for user-friendly features, a pleasing color scheme, and functionality. If a web design agency cannot focus on their own site, there is a good chance that they are not going to deliver high quality work to yours. On the other hand, web design agencies with visually appealing websites that work well and deliver information in a user-friendly way are an ideal choice.
Personal Attention
Finally, be sure you look for a web design agency that can offer you some personal attention. You need to know that your branding is more than just a number to them, and that the designer you are working with is committed to delivering a product that works for your needs. Contacting the agency by phone early on in the process is a great way to find out what kind of attention you can expect to receive. If your call is not returned, or you only hear back by email, it is a pretty clear indication of the type of responses you can expect to receive once you are a client.
Your company’s web presence can often be the key to success. Be sure that you put your website in the hands of an agency with experience, dedication to its customers, and, most importantly, skill. If you’re interested in scheduling a strategy session to learn more about what Proper Noun can do for your business or brand, please use the form below.