20 Ways to Speed Up Your Website and Improve Conversion

Think the speed of your website doesn’t matter?

Think again.

A one-second delay in page load time yields:

• 11% fewer page views
• 16% decrease in customer satisfaction
• 7% loss in conversions

A few extra seconds could have a huge impact on your ability to engage visitors and make sales.

This means that having a fast site is essential — not just for ranking well with Google, but for keeping your bottom-line profits high.

How speed influences conversions

Slow speeds kill conversions.

In fact, 47% of consumers expect websites to load in two seconds or less — and 40% will abandon a page that takes three or more seconds.

This means that if your site takes more than three seconds to load, you lose almost half of your visitors before they even arrive on your site.

That alone is a huge blow to your potential conversions.

And for the visitors that decide to stick around, your slow load times can deter them from returning in the future. In one survey, 79% of customers said they would not return to a site with poor performance.

In that same survey, 52% of shoppers said that quick page loading is important to their site loyalty and 44% said they tell their friends about poor site experiences.

This survey also discovered that a one-second delay can decrease customer satisfaction by about 16%.

It should come as no surprise, then that improving site speed improves performance.

One of the best examples of this is Walmart’s improvement in conversions and revenue after increasing their site speed.

During their initial analysis, they found that visitors who converted had received pages that loaded two times as fast as the visitors who did not convert.

This showed that the faster a page, the more likely a visitor was to make a purchase.

At the end of their optimization, Walmart reported the following results:

• For every one second of improvement they experienced up to a 2% increase in conversions.
• For every 100 ms of improvement, they grew incremental revenue by up to 1%.

In another study, the relationship between load times and conversion rates showed a 25% decrease in conversion rates with just one extra second of load time.

It’s clear that putting in the effort to increase your site speed — even by one second — could have a major impact on conversions

Still not convinced?

Consider that Google once experienced a 20% drop in traffic because of an extra .5 seconds in load time.

Along the same lines, Amazon once ran A/B tests in which they delayed pages in increments of 100 milliseconds. They found that even small delays resulted in “substantial and costly” decreases in revenue.

These are two of the most well-known and reputable sites in existence — so if users aren’t willing to wait an extra second for them to load, they probably won’t wait for you.

How speed influences visibility

Now that Google takes speed into consideration when ranking sites, your load times can also influence how easily users can find you in the first place.

This is especially true now that it is rolling out its mobile-first index. As of December 2017, the search engine has started ranking all search results based on the mobile versions of pages.

Mobile searches outnumbered desktop searches for the first time in 2015, and its share of overall search only continues to grow.

This means that it’s in Google’s best interest to cater its search results to mobile users. They don’t want to direct their users to sites that won’t load or function well on their devices.

As a result, mobile user experience will now play a major role in search rankings — even in desktop search results.

This is a the exact opposite of how the index used to work.

User experience has long been a factor in rankings, but prior to this shift, it only took desktop experience into consideration. So even if a site provided a poor mobile experience, it still had a shot at ranking on page one.

This is no longer the case.

Now, pages are indexed and ranked based on the experience they provide mobile users.

So if you want to maintain (or improve) your rankings and visibility, it’s essential to have a site that provides a quick, easy user experience — on any browser or screen size.

What is a good load time?

Before you start working on your site’s speed, it’s a good idea to set a goal for where you want it to be.

That can be difficult if you aren’t sure what an acceptable page speed is.

According to Google, best practice is three seconds. Unfortunately, according to its recent benchmark report findings, most sites are nowhere near that.

In an analysis of 900,000 mobile ad landing pages spanning 126 countries, Google found that 70% of the pages analyzed took nearly seven seconds for the visual content above the fold to display.

Of all the industries they included, none had an average even close to their recommended best practice of three seconds.

The average time it takes to fully load a mobile landing page is 22 seconds, but 53% of visits are abandoned if a mobile site takes longer than three seconds to load.

Plus, as page load time goes from one to ten seconds, the probability of a mobile user bouncing increases by 123%

This means that site owners in general have a lot of work to do to get their sites up to par in Google’s eyes.

But on the upside, it also means that if you put in the work to get your site speed to an acceptable level, you’re well ahead of the pack in terms of user experience.

As you improve your site, you can use Google’s recommendations and benchmarks to set your goals and measure your performance.

After all — as the largest search engine in the world, Google can have a major impact on your success. So using their standards as your standards is never a bad idea.

There are tons of factors that influence how long each page on your site takes to load, so there are many different steps you can take to increase your speed and improve user experience.

In this post, we’ll go over 20 tips and best practices you can use to decrease your load times and improve your site’s performance.

And if that number sounds overwhelming — don’t worry.

While all of these tips can help you improve your site speed, you don’t need to do all of them today.

In fact, if you’ve worked on your site speed in the past, your site may already be in line with some of these best practices.

With that in mind, let’s get started.

1. Minimize HTTP requests

According to Yahoo, 80% of a Web page’s load time is spent downloading the different parts of the page, like images, stylesheets, and scripts.

An HTTP request is made for each one of these elements, so the more on-page components, the longer it takes for the page to render.

The first step to minimizing your requests is to figure out how many your site currently makes, to use as a benchmark.

If you use Google Chrome, you can use the browser’s Developer Tools to see how many HTTP requests your site makes.

Right-click on the page you want to analyze, and click “Inspect,” then click the “Network” tab. (If you don’t see the “Network” tab, you may need to expand the Developer Tools sidebar by dragging the left border to the left.)

The “Name” column shows all of the files on the page, the “Size” column shows the size of each file, and the “Time” column shows how long it takes to load each file.

In the bottom left corner, you’ll also see the number of total requests the site makes.

Reducing this number of requests will speed up your site, look through your files and see if any are unnecessary.

You may not notice anything immediately, but some of them are likely prime candidates for combining — which we’ll get to in the next steps.

2. Minify and combine files

Now that you know how many requests your site makes, you can get to work on reducing that number. The best place to get started is with your HTML, CSS, and JavaScript files.

These are extremely important files, as they determine your site’s appearance.

They also add to the number of requests your site makes every time a user visits it.

You can reduce this number by minifying and combining your files. This reduces the size of each file, as well as the total number of files.

This is especially important if you use a templated website builder. These make it easy to build a website, but they sometimes create messy code that can slow your site considerably.

Minifying a file involves removing unnecessary formatting, whitespace, and code.

Since every unnecessary piece of code adds to the size of your page, it’s important that you eliminate extra spaces, line breaks, and indentation. This ensures that your pages are as lean as possible.

Combining files is exactly what it sounds like. If your site runs multiple CSS and JavaScript files, you can combine them into one.

There are several ways to minify and combine files, and if your site runs on WordPress, plugins like WP Rocket make the process fairly simple.

If you have this plugin installed, go the “Static Files” tab and check the files you want to minify and combine.

This can include HTML, CSS, and JavaScript files, as well as Google Fonts.

Then, hit “Save Changes” to complete the process. You can reload your page and look at Developer Tools again to see the impact that your changes made.

When it comes to your website, leaner is better. The fewer elements on a page, the fewer HTTP requests a browser will need to make the page render — and the faster it will load.

3. Use asynchronous loading for CSS and JavaScript files

Once you’ve minified and combined some of your files, you can also optimize the way that they load on your pages.

Scripts like CSS and JavaScript can be loaded in two different ways: Synchronously or Asynchronously.

If your scripts load synchronously, they load one at a time, in the order they appear on the page. If your scripts load asynchronously, on the other hand, some of them will load simultaneously.

Loading files asynchronously can speed up your pages because when a browser loads a page, it moves from top to bottom.

If it gets to a CSS or JavaScript file that is not asynchronous, it will stop loading until it has fully loaded that particular file. If that same file were asynchronous, the browser could continue loading other elements on the page at the same time.

Using the same “Static Files” tab of the WP Rocket plugin, check the options next to “Render-blocking CSS/JS.”

Click “Save Changes,” then test your site to make sure that everything loads correctly.

4. Defer JavaScript loading

Deferring a file means preventing it from loading until after other elements have loaded. If you defer larger files, like JavaScript, you ensure that the rest of your content can load without a delay.

If you have a WordPress site, you can the WP Rocket plugin mentioned above to easily enable deferred JavaScript loading. Simply check the box next to “Load JS files deferred,” and you’re good to go.

If you have an HTML site, you’ll need to place a call an external JavaScript file just before the tag, which looks something like this:

For more information, check out this tutorial on defer loading JavaScript.

5. Minimize time to first byte

In addition to the amount of time it takes for your page to fully load, you’ll also want to take a look at the amount of time it takes to start loading.

Time to first byte, or TTFB, is the amount of time a browser has to wait before getting its first byte of data from the server. Google recommends a TTFB of less than 200 ms.

Unlike a lot of the front-end performance factors most site owners focus on, this is a server-side concern.

When a user visits your site, their browser sends an HTTP request to the server that hosts it. There are three steps that need to happen between that initial request and the first byte of data:

1. DNS lookup
2. Server processing
3. Response

You can see how long this process takes for your site using either Chrome’s Developer Tools or a third-party tool.

If you use Developer Tools, it’s important to remember that response time can be affected by your Internet connection. So the slower your own connection, the slower your server response will appear.

To access this information in Developer Tools, click the “Network” tab and mouse over the top item in the “Waterfall” column.

You can also use any number of free third-party tools like WebPageTest test your site from a data center.

If your TTFB is under 200ms, you’re in good shape.

If not, there could be a few different issues at the root.

In general, most issues with slow TTFB are caused by either network issues, dynamic content creation, web server configuration, and traffic.

Of these four factors, you have control over two: Dynamic content creation and server configuration.

Unlike with static pages, a server needs to “build” a dynamic file before responding.

If you have a WordPress site, your pages are most likely dynamic. This means that they need to interact with a database to be “built” with PHP before they are delivered.

You can reduce the time that this takes by enabling caching — which we’ll get to in a minute.

6. Reduce server response time

One of the biggest factors in how quickly your page loads is the amount of time your DNS lookup takes.

A DNS, or domain name system, is a server with a database of IP addresses and their associated hostnames. When a user types a URL into their browser, a DNS server is what translates that URL into the IP address that indicates its location online.

A DNS lookup, then, is the process of a finding a specific DNS record. You can think of it as your computer looking up a number in a phone book.

For example, let’s say you wanted to visit the URL ubnt.com. You’d type this into your browser — but that means very little to your computer.

Your ISP will perform a DNS lookup to find the IP address associated with that URL.

It will get an IP address like 52.40.57.158.443, which tells it where to find the site you’re looking for. This step prevents users from needing to memorize long strings of numbers to access information online.

The amount of time this step takes depends on how fast your DNS provider is. If not, it may be time to switch to a faster DNS provider.

You can check out this DNS speed comparison report, which is updated monthly, to get an idea of where your provider stacks up, and see which providers offer higher speeds.

If you’re using a slow DNS, this increases the time it takes for browsers to locate your site. Switching to a faster DNS provider can speed up the process.

7. Choose the right hosting option for your needs

Most new site owners choose the cheapest possible option for hosting. While this is often enough in the beginning, you’ll likely need to upgrade once you start getting more traffic.

When looking at hosting, you have three different options:

• Shared hosting
• VPS hosting
• Dedicated server

Shared hosting is the cheapest option and you can often get it for about five dollars per month.

With shared hosting, you share certain resources like CPU, disk space, and RAM with other sites hosted on the same server.

With VPS hosting, you still share a server with other sites, but you have your own dedicated portions of the server’s resources.

KeyCDN explains this using the analogy of living in an apartment vs. living in a condo.

When you live in an apartment, you share certain facilities like laundry rooms and parking lots and have access to the building’s maintenance team.

When you live in a condo, on the other hand, you don’t use common spaces, and you’re responsible for certain repairs and maintenance. There are also fewer residents in the building.

You can look at dedicated hosting, then, as owning a home. You don’t share resources with anyone else, and you’re responsible for all maintenance.

With a dedicated server, you have much more space — but you also have more work to do with configuration and technical setup.

If you need tons of space and want complete control over your hosting, this is your best bet.

As you may have guessed, though, it’s the most expensive option.

If you’re at a point where your traffic levels are slowing down your server response times, it may be time to switch from shared hosting to a VPS, or from a VPS to a dedicated server.

8. Run a compression audit

It’s in your best interest to get your files to the smallest they can be, without sacrificing quality. The smaller your files, the faster they’ll load — and the lower your overall load times will be.

Pages with lots of images and other content can often end up being over 100KB in size.  As a result, they’re bulky and slow to download.

You can speed up download times by compressing them.

To get a sense of how compression could speed up your site, you can use GIDNetwork to run a compression audit.

Just enter your URL and click “Check.” If the page you enter isn’t compressed, you’ll see something like this:

This tells you the uncompressed size of your page, which you can later use as a benchmark to measure the results of compression.

Below that, you’ll see an analysis of how much you could potentially reduce the page’s size in terms of both size and percentage using a tool like Gzip (which we’ll get to in the next step).

This compression involves HTML, CSS, JavaScript, plain text, and XML files.

9. Enable compression

The smaller your files, the faster your pages will load. Compression files is one of the easiest ways to reduce load times, and today, enabling compression with Gzip is considered standard practice.

Gzip is a file format and software application that essentially locates strings of similar code in your text files, then temporarily replaces them to make the files smaller.

This works well with CSS and HTML, because these files typically have repeated code and whitespace.

Most web servers can compress files in Gzip format before sending them for download, either by calling a third-party module or using built-in routines. According to Yahoo, this can reduce download time by about 70%.

And since 90% of today’s Internet traffic travels through browsers that support Gzip, it’s a great option for speeding up your site.

If you don’t have Gzip enabled, however, you’ll want to fix this as soon as possible.

If your site runs on WordPress, both WP Rocket and W3 Total Cache plugins support enabling Gzip.

In W3 Total Cache, all you need to do is check the box next to “Enable HTTP (gzip) compression.”

If you have a static HTML site, however, you’ll need to enable Gzip in your .htaccess file. The exact code you need depends on your server but if your site runs on Apache, for example, it looks like this:

There is also a similar version of the necessary code for NGINX servers.

10. Enable browser caching

When you visit a website, the elements on the page you visit are stored on your hard drive in a cache, or temporary storage.

This means that the next time you visit the site, your browser can load the page without having to send another HTTP request to the server.

Here’s how Tenni Theurer, formerly of Yahoo, explains it:

The first time someone comes to your website, they have to download the HTML document, stylesheets, javascript files and images before being able to use your page. That may be as many as 30 components and 2.4 seconds.

Once the page has been loaded and the different components stored in the user’s cache, only a few components needs to be downloaded for subsequent visits.

In Theurer’s test, that was just three components and .9 seconds, which shaved nearly 2 seconds off the load time.

Theurer says that 40-60% of daily visitors to your site come in with an empty cache, so it’s critical that you make your page fast for these first-time visitors. But enabling caching can shave off a significant amount of time of returning visitors and provide a better user experience.

The way you set up caching depends on whether you run your site with WordPress or static HTML.

For WordPress: W3 Total Cache

If you run a WordPress site, you can use a plugin like W3 Total Cache to easily enable caching.

Once you’ve installed it, navigate to “Page Cache” under “General Settings” and check the box next to “Enable.”

This simple step on its own should give you a boost in site performance — but there’s more you can do to improve your results with the plugin.

Enabling browser caching lets you store a cached version of your site in a visitor’s browser. This means that when a user returns to your site, it will load faster.

You can enable this option by navigating to General Settings > Browser Cache and checking the box next to “Enable.”

If you use a VPS or dedicated server, you can also enable object caching to speed up dynamic elements on your site.

This feature is also under your General Settings.

If you’re using a shared server, however, it is best to leave this option disabled. Object caching is a resource-intensive process and can end up slowing down your site — the exact opposite of what you want to accomplish with the plugin.

Once you’ve configured your settings, you should see improvements in your load times immediately. W3 Total Cache claims that its users have seen 10x improvements in Google PageSpeed results, and up to 80% in bandwidth savings after fully configuring the plugin.

For static HTML: .htaccess

If you have a static HTML site, you can enable caching by in your .htaccess file.

You can add lines of code that tell browsers what to cache and how long to store it, which will look something like this:

This lets you set the amount of time you want each type of file to be stored in a visitor’s cache.

In general, static resources should have a cache lifetime of at least a week. Third-party resources like ads or widgets should have a cache lifetime of at least one day.

For all cacheable resources like JavaScript and CSS files, image files, media files, and PDFs, set caching between a minimum of one week and one year.

10 Tips for Building a Beautiful Web Developer Portfolio

When you submit an application — whether it’s for a job or a client project — you probably know that there are hundreds, maybe even thousands of applicants who want the job as much as you do.

So, what do you need to stand out from the crowd? You need an outstanding portfolio.

A web developer portfolio isn’t just a collection of work samples. Instead, it’s an opportunity for you to showcase:

• Who you are
• What kind of work you do
• How you do that work
• Where you want to go next

It should demonstrate the depth and breadth of your abilities as a professional, showcase your thought process and approach, and give potential employers insight into what it might be like to work with you.

Your ultimate goal should be to create a unique online presence that represents your personality, and displays your work in detail. But crafting an amazing portfolio isn’t easy.

Don’t worry, we’ve got you covered. Here are 10 tips that will help you tell your story and get the job you want

Your portfolio is a website, not a PDF or LinkedIn profile

A quick word on how your web developer portfolio is packaged.

Although many companies still allow you to upload a PDF version of your portfolio, or provide a link to your LinkedIn profile, sending a URL link to your own website is a much more convenient way of presenting yourself to a recruiter/client.

There are two strong benefits of using a website:

1. For web developers, your website is more than just a description of your work — it is your work. It’s a place where you can demonstrate what you’re capable of. If your portfolio is well-designed, potential clients might think, “I want to see the same design on my website!”
2. You can show and tell much more through a website, by guiding the viewers through your work in an interactive and more in-depth manner. Think of your portfolio as a virtual showroom, and include all required multimedia objects (such as HD visuals and videos).

1. Start with a teaser

It takes about 50 milliseconds for visitors to form an opinion about your website; whether they like it or not, whether they’ll stay or leave. In addition, first impressions are mostly design-related.

Try to make the best first impression you can, start your design with a nice intro page. Give brief but straightforward descriptions of yourself — this is a great way to engage users and encourage them to browse other sections of your website. Think about what you want to say and how you want to say it:

• Write a short but valuable (for a visitor) description of who you are and what kind of job you’re looking for.
• Be concise and friendly in your copy. Try to write in the first person to make it feel more personable.

When it comes to visuals on your homepage, consider using your own photo as a hero image to inject some personality into the website. Adham Dannaway did this with his website; being both a designer and developer, he found a unique and creative way of showcasing who he is and what he’s capable of right away on the homepage.

Alternatively, if you’re not a big fan of including a shot of yourself, you could make a cartoon of yourself, just like Wendy van Veen and Miriam Knijff (Studio Schurk) did.

This is a fun approach that highlights some of the personality you might expect when working with them. Overall, what’s most important when crafting a first-impression is that you feel comfortable on your own site.

2. Design clear navigation

When designing a portfolio, you want a website that’s straightforward. Nobody wants to deal with clunky or complicated navigation. So, when it comes to navigation, following the basic principles is a solid way to go:

• Navigation must be simple. Without exception, your portfolio website should have the simplest structure possible. Limit the number of navigation options to the absolute required minimum.
• Navigation should be clear and its function self-evident. There should be no explanation or learning curve required. Avoid creative navigation patterns.
• Navigation should be consistent. It should be the same on every page. Avoid changing the position of the menu, or hiding it on some pages.

Strive for few navigation options. Most of your visitors only want to navigate to the following sections to find out more about you:

• Work (or Projects)
• About Me
• Contact

Take a look at the Viget website in the example below. Their online portfolio has a simple structure, and a large amount of whitespace creates good visual hierarchy — differentiating the menu from other content on the page.

3. Tell the story of who you are

The web design industry is ripe with designers and developers, and it’s up to you to set yourself apart.

Your personality is as important as the tools you use, because most employers aren’t looking to hire a list of great projects — they’re looking for a great person.

So make sure you present yourself in the best possible way.

A good place in your portfolio for this type of information is the “About Me” page. Some might think that this type of page is useless because often, people go straight to your projects overview for information.

However, I personally think that portfolio websites should be presented as a reflection of yourself, rather than just a place to list your projects.

Let people see a real person behind the website:

• Share a point of view.You likely have your own unique perspective on your industry, so don’t hesitate to describe it. Share the backstory of how you developed your point of view, too.
• Express your current level of expertise. You should include your skill level, passions, interests, as well as what you wish to improve and learn in the near future.
• Describe your achievements. Mention details that demonstrate your connection to the creative world. For example, if you’ve been mentioned in the press or have won an awards, do include them.
• Let people know where you’re from. This information is always interesting to visitors, and some clients prefer to work with people nearby or in the same area.
• Round your story out with some personal trivia. Say something about your hobbies, taste of music, or anything that describes you as a person.

4. Describe your work in detail

Your work is the most important piece of content in your web developer portfolio, because it’s what most visitors have come to see. And you want to tell a great story about your work. This means providing the proper context with each piece of work, and describing the approach and solutions with just enough detail.

Create a promising preview

The preview section should come first, and explain basic information about each of your projects. This section is important, because not everyone has time to look through all the content you wrote for each project. If they’re interested, they’ll click through to read more about a specific project.

A rule of thumb with previews is to contextualize the project with a short paragraph. Add a title that best reflects the project, and gives a hint on what this project is about. You want this to be a quick read — a visitor should be able to glance at it and understand what it’s about. The combination of title, short paragraph, and cover image should be engaging enough to make people want to look at the entire project.

Sean Halpin’s portfolio provides a great example of what a nice teaser for each project looks like.

Feature process, not just final product

When you finally get to describing your projects in a case study format, ensure that you’re doing more than just showing a well-made product, because most employers/customers want to know how you created it.

Remember, the work won’t speak for itself, meaning it’s important to show that your work had a process, and that it didn’t just magically appear.

They best way to present your work is totell a story, and it’s very important to make the story as interesting and informative as possible. Try to present each project case study in the following format:

• The goal. Clearly state the purpose of the project. Explain the goal and problem you’re addressing with it.
• The process. As a web developer, following and explaining the overall process is something that you should take very seriously. Your case-study should express how you think and use step-by-step explanation. Explain, briefly, each step of the process from the initial concept to the finished product, and give context to the images. Outline behind-the-scenes processes through visuals: sketches, early screenshots, testing notes — these are all just as valuable as a flawless final product picture.
• The final product. Demonstrate the end results using both visuals and text. Always include a link to the live version of the website you worked on.
• The outcome. Show how your work benefitted the client. For example, if you have user research results that show the impact of your work, you should definitely include this information in the outcome section. Also, explain what you’ve learned from the project.

Arturo Wibawa’s portfolio contains detailed breakdowns of projects he’s worked on, complete with wireframes, flowcharts, and plenty of information about his process.

Design your case-studies for skim reading

You spend hours on your portfolio. Sadly, visitors will spend less than one minute looking at it. Prospective employers spend an average of 10-15 seconds looking at a portfolio. So it’s vital to make sure you present information clearly and strikingly:

• Once you write all the text for your case study, read it again, and see if you can cut it in half.
• Break your copy into small chunks, and add headings and subheadings to improve readability and scannability.
• Limit the number of characters per line (45 to 75 characters is a comfortable length per line).

Describe obstacles

Ultimately, design is about problem-solving, and anyone hiring a web developer is hiring someone for their ability to systematically figure out the best solution to their problems.

As you describe different projects in your portfolio, make sure you tell a clear story about what problems you faced during development, and how you overcame these situations as a team/individual.

As you describe the problem and eventual solution, walk people through the process you took to get there:

• Explain the business problem you were trying to solve. Just a few sentences to create context.
• Describe your approach. How did you find an approach that worked for your clients and why did it work?
• Describe the impact of your work. Relate your design/development back to the business problem.

In his portfolio, Joshua Taylor identifies the challenges he faced in each design project, describing his team’s problems and solutions. Joshua creates a narrative arc that sells his experience and expertise effectively.

5. Structure your projects

The best way to tell a story with your work is to start with your audience. Figure out what your audience seeks, and then show them how your skills can fit their needs. Spend some time thinking about how you‘ll present your projects in order to maximize value:

• List the best works first. While there are two common ways of presenting your work — list the most recent projects first or list the best projects first — I suggest listing your best projects at the top. Typically, these projects get more views than the others, and are a better reflection of your current web development knowledge.
• Keep in mind that your portfolio, as a whole, should demonstrate past work, but also future direction. Thus, always showcase the type of work you want to be doing in the future.
• Emphasize quality over quantity. The quality of your portfolio is only as good as your weakest project. It’s better to choose three to five projects, where you can describe the process from start-to-end in detail, than to throw all the work you’ve ever done into your portfolio. It’s also perfectly fine to have a portfolio with just one story — just make it a good one.

6. Get over NDA

To a lot of web developers, non-disclosure agreements (NDAs) are the greatest threat to a good portfolio. With most companies these days, your work and process are proprietary to them.

However, NDAs shouldn’t be a reason to exclude a project completely from your portfolio. Here are a few ways to handle an NDA problem:

• Request for permissions. If you have a good relationship with your client, they may allow you to mention the project, especially if you offer to remove all sensitive details.
• Anonymize the work.You can get your main point across by omitting certain information or censoring sensitive elements with blurring. A prospective employer is likely more interested in the big picture (what you’re capable of) and less so in the specific details of another company.

7. Provide testimonials

Social proof is an excellent way to build trust on any site, but they’re especially good for portfolios. Typically, prospective clients/employers will encounter your testimonials when they’re looking for specific services, considering different developers, and evaluating whether you’re the right fit.

Remember, they haven’t worked with you in the past and don’t know you. Help them overcome their hesitation by giving them a clear idea of what it’s like to work with you. Include testimonials from previous customers or co-workers. A few simple rules will help you with collecting testimonials:

• Ask for testimonials, instead of waiting for them to come to you. Unless prompted, clients will rarely volunteer a testimonial regarding your work together. Thus, when you finish a product you’re proud of, ask the client to write a testimonial for you.
• Making sure the questions you ask focus on the business outcomes you’ve helped the client achieve. Ask the client open-ended questions, such as “what did working together help you achieve?”, “what were three other benefits about working together?”, and “would you recommend this service to others? If so, why?”.
• Avoid using jargon in testimonials. Testimonials need to reflect the actual language clients use to describe working with you.
• Urge your clients to go beyond your work, and to also talk about what they liked about working with your person-to-person.
• Build a habit of regularly asking for testimonials.

Kai Davis provides a lot of useful details on how to collect testimonials, and the differences between weak and strong testimonials in his article Ultimate Guide to Getting Powerful Client Testimonials.

Edmund Yu’s portfolio, below, has a great collection of projects, full of details.But what really stands out in his portfolio is the “Mentions” section, in which Edmund displays testimonials about his work.

8. Never lie

It’s not hard to take credit for an entire project that was completed by a team, but claiming other people’s work as your own is a certain way to lose an interview. There’s always a chance that potential interviewers either know someone who’s worked with you, or has seen the work you presented before.

And even if you’re invited to interview, employers/clients will likely ask a lot of questions related to your past projects, some that you might not be able to answer properly.

Honesty is always the best policy. Being honest in your portfolio applies mostly to differentiating your role from the role of your teammates. In the example below, Charlotte Tang explains her personal role in bringing a project to life. Notice how she refers to the team as “we” and clearly describes what her role in the project was (“My job was…”).

9. Make contact easy

The contact page is one of the most important elements of a portfolio website, but it’s often hidden or even neglected.

Imagine a potential client or employer has browsed your website, is impressed with your portfolio, and wants to meet with you. Make it easy for them to get in touch — use a contact form.

Forms from Wufoo, JotForm, Gravity Forms, or Type Form allow you to customize fields, so you can ask for all the information you need up front.

Graphic designer Gareth Strange even added an illustration next to his contact form to make the experience a bit more personal.

10. Improve your portfolio with analytics

By installing tracking analytics on your website (e.g. Google Analytics), you can visualize who has recently visited your website, how long they stayed, and which specific projects they looked at.

Analytics can also help you build a profile of visitors, including their country of origin, as well as browser and devices they use to access your site. All of this rich and useful information will help you make changes to your website in order to present your projects better.

Create a solid web developer portfolio

Creating a great web developer portfolio is a journey that involves a lot of effort (time, learning, and iteration) — but it’s definitely worth it.

If you succeed, your portfolio will demonstrate the depth of your abilities as a developer, showcase your thought process, and give potential employers or clients insight into what it might be like to work with you.

How to Improve Your Page Load Speed by 70.39% in 45 Minutes

In 2006, Amazon reported that for every 100 milliseconds they speed up their website, they see a 1% increase in revenue. Then Google announced, in an effort to improve the web, that page speed was a consideration in how they rank search results.

Since then, there’ve been no shortages of case studies showing the benefits of having a fast site. In this guide, I’ve tried to pull together everything that will enable you to improve your website’s loading speed. For a bit of fun, I also decided to test everything in this post on this site to see what impact it had.

First of all, how fast is fast enough? Optimising your page speed can be a hedonic process, kind of like running on a treadmill. There will forever be room for improvement, so when should we be satisfied?

One way is to use WhichLoadsFaster to compare your site’s loading speed against all of your major competitors. Aim to be the fastest of the bunch.

Another way is to use the following guidelines:

Below 1 second = perfect
1-3 seconds = above average
3-7 seconds = average
7+ seconds = very poor

These benchmarks are based on studies showing that 47% of people expect a web page to load in under two seconds, and 57% of visitors will abandon a page that takes 3 or more seconds to load.

So how did this site perform before I carried out everything in this post?

The Venture Harbour site wasn’t too bad with a page loading speed of 1.61 seconds, but clearly there was room for improvement. The home page was making 64 requests and was over 3mb, which is quite high, and largely caused by loading lots of JS files from plugins that weren’t even being used.

After spending 45 minutes implementing as many of the recommendations in this post as possible, I managed to reduce our page loading speed to 583ms, reducing the page size to one third and almost halving the number of HTTP requests. All of this was done without making any changes to the visual user experience.

So how can you speed up your site like this? Let’s start off with some of the things that have the biggest impact.

#1 Use a CDN (Content Delivery Network)

Hosting your media files on a content delivery network is one of the best ways to speed up your site, and can often save up to 60% bandwidth and halve the number of requests your website makes.

CDNs work by hosting your files across a large network of servers around the World. When a user visits your site from Thailand, they are downloading files from the server that is closest to them. Because the bandwidth is spread across so many different servers, it reduces the load on any single server and also protects your sites from DDoS attacks and traffic spikes.

We’ve tested a few CDNs at Venture Harbour, including MaxCDN, Cloudwatch, Static DNA and Cloudflare. Out of the bunch, Cloudflare is our favourite (and is free to get started with).

#2 Use WP Engine

While researching our guide to the best web hosting, I setup response time monitoring for a range of different web hosting companies. I simply opened an account, uploaded a blank WordPress site with an identical theme, and then used a server monitoring tool to test the response time every five minutes.

9/10 of the web hosts I tested had a response time of 600ms – 1300ms. WP Engine‘s server response time was 293ms. Yes, it’s not the cheapest web hosting solution (they start at $29/month), but it’s one of the few hosting companies that really justifies its price. In fact, if I could go back 5 years and do one thing differently it would be to start using WP Engine earlier, as it’s not just made our sites significantly faster, but the security and workflow improvements have also saved us so many headaches.

Changing web hosts may not be something you can do in under 45 minutes, but it has the potential to have a bigger impact than all of the ‘tweaks’ below combined. My advice? If you’re using a mediocre or low quality web hosting company, stop reading, get started with a host like WP Engine, and come back later if you still have page speed issues.

#3 Use a caching plugin

If you’re using WordPress, one of the quickest and easiest ways to cut your page loading speed is to install a caching plugin like WP Total Cache or WP Super Cache. Of course, if you are using WP Engine, you can skip this point as they have caching built-in.

Both of the plugins mentioned above are free to download and very good. Despite their name, caching plugins do quite a lot beyond browser caching, although that is their primary function. I’ll discuss the benefits and how to add browser caching in a second without a plugin, but for those using WordPress and looking to improve page speed quickly, it’s often easier to just install a plugin.

#4 Add Expires headers to leverage browser caching

If you’re not using WordPress, or you would rather not install another plugin to add Expires Headers and browser caching, here’s how to implement it manually.

Expires headers tell the browser whether to request a specific file from the webserver or whether to get a version of a page from the browser’s cache. Of course, this only applies if a user already has a version of your web page stored in their cache, so it will only speed up your site for users who have already visited your website.

Expires headers speed up your site in two ways. First of all, they reduce the need for users to download the same files from your web server twice. Secondly, it reduces the number of HTTP requests that need to be made, further speeding up the time it takes for the page to load.

#5 Use a good theme (if using WordPress)

Prevention is usually a better strategy than cure. To prevent lots of page speed issues in the first place, you should opt for a good host, a good CDN, and good theme / design.

As a digital marketer, it’s frustrating when web designers build sites that look beautiful but perform terribly from an SEO perspective or a speed perspective. I remember once having to deliver news to a client who spent one quarter of a million pounds on a new website, only to have it scrapped because it would have obliterated their digital marketing efforts. This is the most extreme example I’ve ever experienced, but it’s etched a scar that I’ll always remember.

Today, the problem is neither better nor worse than it was five years ago. Back when I started doing SEO, designers still used flash and other primitive technologies to build sites. Today, designers built WordPress themes with so many bells and whistles that it’s no wonder they take 10 seconds to load.

I recently put together this huge list of responsive WordPress themes that have been designed by theme designers that have taken speed into account. When choosing a theme, if in doubt, go minimal.

#6 Compress your images with WP Smush.it

If you’re using WordPress, install the WP Smush.it plugin to automatically compress your images. This will reduce the size of your images without losing any visual quality. The great thing about this plugin is that it works in the background every time you upload a new image. You can also run it retrospectively on all of the images uploaded to your media library.

#7 Clean up your database

One of the pitfalls with WordPress is that your database can get very messy very quickly due to saved drafts, post revisions, deactivated plugins etc. WP Optimize is a fantastic plugin that routinely deletes all of the stuff you don’t need that’s cluttering up your database.

After running this on the Venture Harbour database I managed to reduce the database from 5mb to 3mb, which helps speed up the time it takes for the browser to collect and return files from the database.

#8 Compress your website with gzip

Gzip is a simple method for compressing your website’s files to save bandwidth and speed up page load times. Gzip works by compressing your files into a zip file, which is faster for the user’s browser to load. The user’s browser then unzips the file and shows the content. This method of transmitting content from the server to the browser is far more efficient, and saves a lot of time.

You can enable Gzip by simply adding the following code into your .htaccess file:

# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

# Or, compress certain file types by extension:

SetOutputFilter DEFLATE

#9 Fix all broken links

Broken links are not only a drain on bandwidth, but they’re also one of the surest ways to get a user to leave your site. One of our clients recently had several hundred 404 errors showing in Google Webmaster Tools. After fixing all of these, the average pages visited per user increased from 1.4 to 1.85 pages/visit, and there was a noticeable decrease in bounce rate.

If page speed isn’t compelling enough a reason to fix your broken links, hopefully the impact on these behavioral metrics is.

To identify your broken links, I’d recommend using the following (free) tools:

• Google Webmaster Tools (crawl errors tab)
• Screaming Frog SEO Spider
• Ahrefs

The reason why I recommend using all three, is because some will go deeper than others and identify crawl errors that others don’t. Once you’ve reached 0 broken links on all three tools, your job is done!

#10 Reducing Your redirects

While 301 (permanent) redirects are preferable to 404 errors (broken links), they’re still not ideal as they slow down the time it takes for the browser to reach the correct version of a page.

Screaming Frog is once again a great tool for spotting 301 redirects. If you’re using a PC, you can also use Xenu Link Sleuth, which is a great tool for crawling data from websites.

#11 Minify your CSS and JS files

When you look at what’s causing your pages to load slowly, chances are that it’s got something to do with lots of clunky Javascript files or CSS being loaded inefficiently. One of the pitfalls of WordPress and other content management systems is that a new JS or CSS file is added virtually every time you install a new plugin.

There are several ways to minify your files. The first way involves squishing all of your files into one – so instead of calling ten individual javascript files, you simply place all of your javascript in one file.

The second aspect on minifying involves deleting white space and making your files smaller. If you’re using WordPress, WP Minify is a great plugin that automatically does all of this for you.

#12 Replace PHP with static HTML where possible

PHP is great for making your site efficient and reducing the need to enter the same information multiple times. However, calling information through PHP uses up server resource and should be replaced with static HTML where it doesn’t save any time

#13 Link to your stylesheets, don’t use @import

Similarly to the point above, @import uses up more resource than directly linking to your stylesheets despite achieving the exact same result. Another reason why not to use @import is that some of the older browsers do not support it, so it’s best to avoid it where possible.

#14 Turn off ping backs and trackbacks in WordPress

Pingbacks and trackbacks don’t really serve any practical use in WordPress, and yet they’re often enabled by default. I’d recommend turning both of these off as they do clog up your database and increase the number of requests that are made.

#15 Enable Keep-Alive

HTTP Keep Alive refers to the message that’s sent between the client machine and the web server asking for permission to download a file. Enabling Keep Alive allows the client machine to download multiple files without repeatedly asking permission, which helps to save bandwidth.

To enable Keep Alive, simply copy and paste the code below into your .htaccess file.

    Header set Connection keep-alive

#16 Specify image dimensions

Before your browser can display your webpage it has to figure out how to lay out your content around your images. Without knowing the size of these images the browser work it out, causing it to work harder and take longer.

Specifying your image dimensions saves the browser having to go through this step, which helps to speed things up.

#17 Specify a character set in HTTP headers

For the same reason as above, it’s useful to specify a character set in your HTTP response headers, so that the browser doesn’t have to spend extra time working out which character set you’re using.

You can do this by simply adding a UTF-8 character set tag in your website’s section.

#18 Put CSS at the top and JS at the bottom

It’s considered best practice to put your CSS as close to the top of your page as possible, as browsers won’t render your page before rendering the CSS file. Javascript, on the other hand, should be as close to the bottom as possible, since it prevents browsers from parsing after the tag before it is loaded and complete.

#19 Disable hotlinking of images

When other website’s ‘hot link’ to your images it steals bandwidth, slowing your site down. To prevent other sites from hogging your bandwidth, you can add this snippet of code to your .htaccess file.

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?ventureharbour.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ – [NC,F,L]

#20 Switch off all plugins you don’t use

With WordPress sites, plugins are usually the biggest culprit for slowing the site down. If there are any plugins that you’re no longer using or aren’t essential, delete them.

#21 Minimize round trip times (RTTs)

Round trip time is the time taken for the client to send a request and the server to respond. It’s affected by a huge range of things, but is primarily impacted by the number of requests that are being sent. As shown in the Pingdom screenshots at the top of this post, I managed to almost halve the number of HTTP requests that were being made, which massively reduced the round-trip time.

To reduce the number of requests, use CSS sprites to call less images, minify and combine your JS and CSS files, and don’t call anything that you don’t need. One of my biggest gripes with WordPress is how plugins that are only needed on certain pages, such as Disqus, or Contact Form 7, tend to be called on every single page, which creates unnecessary requests. Reducing the number of unnecessary requests will reduce your RTTs.

#22 Use CSS Sprites

A sprite is one big image that contains all of your images. They look similar to those sticker sets you used to get with one hundred stickers on a single sheet. Using CSS you can ‘hide’ everything in the image except for a section between a set of co-ordinates.

CSS sprites work because it’s faster to load one big image and use CSS to show the section you want than it is to load lots of smaller images. This is because the browser doesn’t need to make as many requests.

The fastest way to use CSS sprites is to use SpriteMe, which is a tool that enables you to easily turn all of your images into a CSS sprite.

Why page speed is more important now than ever before

With mobile Internet usage expected to take over desktop usage in 12 months time, it’s never been as important as it is right now to fix your site speed. Internet users are less tolerant of slow websites than they’ve ever been, and the shift towards Internet-enabled mobile devices means that if you’re not fast, you’re not going to be seen.

Front End Optimization – 9 Tips to Improve Web Performance

In today’s digital world, there are millions of websites accessed every day for a variety of reasons. Unfortunately, many of these websites are clunky and bothersome to use. Poorly optimized websites are plagued with a variety of issues including slow loading times, being non-mobile ready, browser incompatibilities, and so on.

This post will go over useful techniques you can use to help improve your front end optimization. By focusing on clean code, compressing images, minimizing external requests, implementing a CDN, and a few other methods, you can dramatically increase the speed and overall performance of your website.

1. Clean up the HTML Document

HTML, or hypertext markup language, is the backbone of nearly every website. HTML allows you to format webpages with headings, subheadings, lists, and other useful text-organizing features. With the most recent updates in HTML5, you can also create attractive graphics.

HTML can be easily read by web crawlers, so search engines can be updated with your website’s content in a timely manner. When dealing with HTML, you should strive to write in a manner that is both concise and effective. Additionally, when it comes to referencing other resources within your HTML document there are a few best practices you should follow.

Proper CSS Placement

Web designers tend to create CSS stylesheets after the main HTML skeleton of a webpage has been created. As such, CSS components are sometimes placed near the bottom of the document. However, it is recommended to put CSS at the top of your HTML document’s header in order to ensure progressive rendering.

This strategy will not improve the loading speeds of your website, but it will keep your visitors from waiting on blank screens or seeing a flash of unstyled text (FOUT). If most of your webpage’s visual elements are already loaded, visitors will be more likely to wait for the entire page to load, thus improving your front end optimization. This goes hand-in-hand with perceived performance.

Proper Javascript Placement

On the other hand, if you place JavaScript attributes within the head tag or near the top of the HTML document, you will block the loading process of HTML and CSS elements. This mistake can cause visitors wait on a blank page, and therefore may impatiently abandon your site. You can avoid this issue by placing JavaScript attributes at the bottom of your HTML.

Additionally, when using JavaScript you should always prefer async script loading. This will prevent any tags from blocking the HTML rendering process in the event that it does come across one in the middle of the document for instance.

While HTML is one of the most valuable tools available to web designers, it is often used with CSS and JavaScript attributes that can slow down your webpage. CSS and JavaScript attributes can transform your webpages for the better, but you should take special care and use them appropriately. A good practice with CSS and JavaScript is to avoid embedding the code. When you embed code, you place CSS in a style tag, and you use JavaScript in script tags. This increases the amount of HTML code that must be loaded each time your webpage is refreshed.

Combining Files? Don’t Bother

In the past, you may have combined frequently used CSS scripts into a single file so that you could simply reference one file within your HTML code instead of many. This was a sound practice when using the HTTP1.1 protocol, however is no longer necessary.

Thanks to HTTP/2, you can now take advantage multiplexing to send and receive HTTP requests and responses asynchronously via a single TCP connection.

2. Optimize CSS Performance

CSS, or cascading style sheets, can be used to transform your HTML-based content into a clean and professional document. Many CSS options require HTTP requests (unless using inline CSS), so you should make an effort to minimize bloated CSS files without eliminating vital features.

If your banner, plugin, and layout link styles are all located in separate CSS files, this will require your visitors’ browsers to load numerous files at once. Although now less of a problem thanks to HTTP/2, this can certainly still attribute to longer load times if the files are loaded from external sources. Read our WordPress Performance article to see how reducing HTTP requests improved loading times dramatically.

Additionally, any webmasters mistakenly use the import directive to include external stylesheets on a webpage. This is an outdated method, and it prevents browsers from performing parallel downloads. The link tag is your best option and will also improve the front end performance of your website. Furthermore, external stylesheets requested with the link tag do not block parallel downloads.

3. Reduce External HTTP Requests

In many cases, a large portion of a website’s load time comes from external HTTP requests. The speed at which an external resource loads can vary depending on the hosting provider’s server infrastructure, location, etc. Your first goal when reducing external HTTP requests should be to examine your website with a minimalist outlook. Study each component of your webpages, and eliminate any features that do not improve the experience of your visitors. These features may be:

• Unnecessary images
• Unnecessary JavaScript
• Excessive CSS
• Unnecessary plugins

After you have eliminated the clutter, find ways to trim the weight of your remaining content. Compression tools, CDN services, and prefetching, as explained below are your best options for managing HTTP requests. Additionally, check out our guide on how to reduce DNS lookups which goes hand-in-hand with reducing external HTTP requests.

4. Minify CSS, JS and HTML

Minification techniques can help you eliminate unnecessary characters within a file. When you are writing code in an editor, you likely use indentations and notes. These methods certainly keep your code clean and readable, but they also add extra bytes to your document.

For example, this is a code snippet before minification is applied.

.entry-content p {
font-size: 14px !important;
}

.entry-content ul li {
font-size: 14px !important;
}

.product_item p a {
 color: #000;
 padding: 10px 0px 0px 0;
 margin-bottom: 5px;
 border-bottom: none;
}

 

5. Enable Prefetching

Prefetching can improve your visitors’ browsing experience by fetching necessary resources and related data before they are needed. There are 3 main types of prefetching:

• Link Prefetching
• DNS Prefetching
• Prerendering

With prefetching, the URL, CSS, images, and JavaScript are gathered for each link before you even leave your current webpage. This ensures that visitors can use links to navigate between pages with minimal loading times.

Fortunately, prefetching is easy to enable. Depending upon the type of prefetching you want to enable, you can simply add the rel="prefetch", rel="dns-prefetch", or rel="prerender" tag to your link attributes within your website’s HTML.

6. Increase Speed With a CDN and Caching

You can significantly improve the speed and performance of your website by using a content delivery network. When you use a CDN, you link your website’s static content to an extended network of servers across the globe. This is especially important if your website caters to a global audience. The CDN allows your site’s visitors to load data from their nearest server. If you use a CDN, your site’s files will automatically be compressed for rapid delivery across the globe.

A CDN is one method of caching that can greatly help improve the delivery times of your assets, however, there are other caching techniques that you can implement as well – one of which is to leverage browser caching.

Properly setting up browser caching allows your browser to store certain files within its own cache to be delivered faster. Configuring this method can be done directly within your origin server’s configuration file.

Learn more about caching and different types of cache methods in our cache definition article.

7. Compress Your Files

While many CDN services will compress your files for you, if you don’t use a CDN consider using a file compression method on your origin server to improve your front end optimization. File compression will make your site’s content light and easy to manage. One of the most commonly used file compression methods is Gzip. This is an excellent method for shrinking documents, audio files, PNG images, and other bulky files that have not already been compressed.

Brotli is another file compression algorithm that is still fairly new, however growing in popularity. This open-source algorithm is regularly updated by software engineers from Google and other organizations. It has proven itself to compress files at a much better ratio than other existing methods. Although support for this algorithm is still minimal it is well positioned to be the next default file compression algorithm.

Read our complete article on Brotli compression to learn more.

8. Optimize Your Images

For people who are unaccustomed to the ways of front end optimization, images can be a website-killer. Massive photo albums and large high-resolution images on your site can jam the rendering process. High-definition images that are not optimized can weigh several megabytes. Therefore, properly optimizing these will allow you to improve your site’s front end performance.

Each image file contains a trove of information that isn’t related to the actual photograph or picture. For JPEG photographs, the file contains dates, locations, camera specifications, and other irrelevant information. You can streamline an image’s lengthy loading process by deleting this extra image data with optimization tools such as Optimus. Optimus uses smart compression in that it uses losslessly optimizes PNG images.

On the other hand, Optimus uses slight lossy compression for JPEG images. Although lossy compression actually removes additional data from the image, the Optimus lossy compression settings are defined at a level where the user will see no visible quality loss. This allows users to save big on file sizes while maintaining high-quality images.

9. Use a Minimalistic Framework

Unless you are building your website with solely your own coding knowledge, you can avoid many amateur front end optimization mistakes by using a good front end framework. Although some larger, more well-known, frameworks come with a bunch of additional features and options, your web project may not require them all.

That’s why it’s important to determine what features your project requires and start with a framework that can provide those features while remaining lightweight. Some of the most recently designed frameworks use concise HTML, CSS, and JavaScript code.

Here are a few examples of minimalist frameworks that provide fast loading times:

• Pure
• Skeleton
• Milligram

A framework is not a replacement for careful web design, programming, and maintenance. For simplification, imagine that the framework is a new house. The house is clean and presentable, but it is also empty. When you add furniture, appliances, and decorations, it is your responsibility to ensure that the house does not become cluttered. Likewise, it is also your responsibility to make sure that the framework is not ruined by redundant codes, large images, and excessive HTTP requests.

Front End Optimization – In Summary

Front end optimization can seem like an intimidating endeavor, but you can greatly improve the loading speed of your website by applying the principles of this guide. Remember, the faster your website loads, the better user experience your visitors will have. Therefore, ultimately benefiting you and your visitors alike. Let us know in the comments section if you have any other great front end optimization tips.

13 Quick Tips to Improve Your Web Design Skills

Designing your company website can be a challenging proposition. You’ve got to juggle the expectations of many stakeholders, and you can often hit obstacles that prevent new ideas from emerging.

I was the design manager for a large company website for nearly six years, and during that time, I found myself losing perspective of what our target audiences really needed.  Call it “tunnel vision.” When you work on the same website, it often helps to take a step back and think through new approaches. That’s the purpose of this blog post.

What follows are some tips, tricks, shortcuts and general advice for creating great website design. Can you try any of these to take your web design to the next level?

1) Design in shades of gray, then add color

If your web designer creates wire frames prior to visual designs, then you know the value of starting with shades of gray.  Turn your wire frame into a gray scale visual design, add your photography, then carefully add color to design elements one at a time.

This will prevent an “overdesigned” website and help to place prominence on just the items that need it.

2) Use Keynote (Mac) to create rapid page prototypes

You don’t need Photoshop to create rapid prototypes of web pages, landing pages, call to actions or other web interface elements.  There’s an entire underground movement around using Keynote (that’s Apple’s version of PowerPoint) to create mockups.

There’s even an online repository containing user interface design templates for wireframing, prototyping and testing mobile and web apps in Keynote.

3) Add web fonts to your corporate style guide

It’s 2015, and if your corporate style guide doesn’t include web fonts, then you need to look into adding those so your website has the same governance that corporate documents and collateral does.

If you haven’t looked into this yet, Google Fonts is a great place to start. Find a suitable web font and define usage in your corporate style guide so you use it consistently online

4) Bury those social media icons

You did all that work to get people to your website, and yet you’re inviting them to leave? That’s what you’re doing when you place social media icons in a prominent location of your website, like in the header. Bury the icons in the footer.

If people are on your website, you want them to stay, learn and perhaps inquire about your services, not check out company picnic photos and bowling outings on Facebook. Social media should send people to your website, not vice versa.

5) Ditch the slideshow/carousel

When the homepage slideshow / image carousel came into fashion, it was a way to get lots of information on the first page of your website. The problem is that most people don’t stay on the page long enough to experience all of the tiles/messages.

What’s more is that the messages and images usually aren’t relevant to your prospect’s first visit. What’s the one thing a visitor should take away from their website visit? Promote that one thing — usually what your company does in layman’s terms — and ditch the rest.

6) Simplify navigation

Reducing your visitors’ options might seem counter intuitive, but it can actually help guide people to your most productive content. Rather than overwhelming your website visitors with links to every page, simplify your navigation.

Eliminate drop down menus and especially multi-tier drop down navigation that only the most skilled mouse user can navigate, and go a step further by reducing the number of links in the header or sidebar of your website.

7) Remove sidebars

The sidebar has been an especially popular web design trend for the last ten years, especially on blogs. Many companies are finding that when they remove sidebars from their blogs, it encourages reader attention to the article and the call to action at the end.

Removing the sidebar on our company blog has increased the number of clicks on call to action graphics over 35%.

8) Get color inspiration from nature

Struggling to find the perfect color combination for your website or a call to action graphic? Get your inspiration from nature. You can either use your own camera to photograph natural wonders around you or find landscape photos on the web, the use a color picker to select a color. Nature’s color palette never fails.

9) Step away from the computer

I believe that good design starts with great planning. Getting your ideas down on paper or on a whiteboard can help you iterate through a design, refining it and adding detail as you go along. Drawing on a whiteboard can also make the design process collaborative and allow other team members to give input.

It’s also easy to erase pencil from paper or marker from a whiteboard and make quick changes, and once you have something concrete to work with, snap a photo with your mobile phone and get to work on screen.

10) Use Pinterest to create mood boards

When you’re putting together inspiration and ideas for a new website, or you’re redesigning part of your website, you need a way to collect your inspiration in one place for future reference.

Did you know that you can use Pinterest to create a mood board of your favorite images, colors, layouts, patterns, sample websites and concept material? Another great advantage of using Pinterest is that other designers create and share mood boards too, and they’ve already curated a ton of resources that you can use.

11) Increase your font size

Typography is incredibly important in web design. Text is hard enough to read on a computer screen, so you have to make the important things stand out.

One way to do this is to increase your font sizes, especially for headings and important blocks of text. Consider increasing the size of your normal font, too.

12) Use white space

It may be hard to believe that using whitespace is a hack, but I evaluate websites every day that could use more whitespace. Not every blank area of the screen needs to be filled.

Even though whitespace and simplicity are in style right now, too many companies try to cram everything into a small space, or worse yet, “above the fold.”  Give your design room to breathe, and your website visitors will be able to find things easier.

13) Use the squint test

Want a quick way to learn what’s most prominent on your website? Back away from your computer screen and squint. Most everything will become blurry, and only the larger, colorful, more prominent features will be noticeable.

It’s said that this technique helps a designer understand what a first-time visitor may notice when he scans your website. Will the visitor notice what’s most important?

While this is a big blog post about little design hacks, I’m sure you have some hacks of your own that I haven’t thought of here. What’s your favorite design hack? Why not share it in the comments below? Let’s see how many you can add!