Website redesign is a tough but necessary part of growing as a business and adapting to modern UX expectations. Good website managers perform routine site checkups to measure a website’s performance. Certain metrics point to a need to make major or minor changes, such as low server traffic, high bounce rates, and low conversion rates. It’s vital to have a firm understanding of which metrics matter most to your website during performance checkups.
Some hiccups can be easily fixed, while others may indicate that it’s time for an overhaul. We’ve compiled a list of some of the key performance indicators to evaluate your website’s performance. Every company will have unique considerations, so be sure to develop a checkup schedule tailored to your specific business strategy and goals.
Overall Search Engine Traffic
While high traffic alone is not by itself a solid indicator that your website is performing well, it’s still vital to accurately measure your overall website traffic. Most business to business purchase interactions start with a web search and modern consumers readily turn to search engines to research products and brands before purchasing. It’s vital to capture as many organic searches as possible.
Google and other search engines are constantly updating their algorithms to create a more level playing field for marketers, so if you notice a sudden drop in your overall site traffic, or this year’s traffic doesn’t seem to reflect last year’s, your site may be outdated. In some cases, proper optimization may only take a few tweaks. However, this isn’t always the case. A significant loss of traffic may indicate that it’s time to try a new approach to your website’s design.
Mobile devices account for most Google searches, so if your website isn’t optimized for mobile, you’re going to take a hit with your search result rankings. Over the past several years, “mobile-first” has been a mantra for website developers. If your last website redesign was before the mobile explosion, you more than likely need to update.
A bounce occurs when a user clicks on your site, then quickly clicks back and away from it. The modern consumer has a very short attention span, is very ad-conscious, and has little patience for slow-loading websites. If your site doesn’t load promptly and reliably, they will quickly leave and search for an alternative. Most mobile consumers are searching for brands, goods, and services on the go, many times while in the store considering a purchase! It’s imperative to get their attention quickly and keep them interested so they stick around your site.
High bounce rates aren’t the only penalty for poor mobile optimization. If your site isn’t optimized for mobile, then it probably hasn’t been updated or redesigned in quite some time. Google prioritizes websites with a consistent update history and a healthy history of links and backlinks. If your outdated webpages are full of dead or undesirable links, you’re paying a penalty in your search rankings. Missing out on the sheer number of mobile searches is a tremendous loss.
Your conversion rate is the number of successfully completed actions compared to your overall traffic. For example, if 10% of your landing page’s visitors sign up for the mailing list on the page, then that page has a 10% conversion rate. If you notice your conversion rates slipping, it may be time for a change. Search engines can change their algorithms and cause some aspects of your page to hurt your search result rankings over time.
Ultimately, the goal of your website is to convert leads into sales for your company. If any of your webpages are underperforming or start declining in their apparent ability to convert, it may be time to reassess those pages. Measure how long visitors spend on those pages, whether or not they’re following through on the pages’ desired actions, and adjust accordingly. In some cases, you may need to redesign entire pages.
Since each page of your website should serve a purpose or encourage visitors to perform a desired action, you need to measure how long it takes the average visitor to complete these actions. For example, you could post a blog that has a call-to-action at the end, leading the user to click a link and learn more about the subject matter or a particular facet of it. If your visitors are only rarely clicking the link, it may point to a problem with the blog’s content or its failure to draw interest. If people don’t spend more than a few seconds on your written content, this could signal the same lack of interest.
If it takes longer than expected for visitors to enter an email address, finish checking out with a transaction, or performing any other desired action, this could be an indication of poor webpage performance. If pages take too long to load or update, it may be turning some potential leads away. While dedicated customers may simply wait for actions to finish, new leads typically won’t be as patient. Longer completion times usually indicate user uncertainty or poor page performance, both of which are considerable issues for marketers.
If you find your website’s maintenance taking up a much larger portion of your operating budget than expected, of if your website support costs continue to increase, you may only be applying temporary fixes to serious website issues. Assess how much you’ve spent on IT and web development costs over the last few years. An upward trend should be considered a problem.
Your website is crucial to your business. If your company doesn’t exist online, it really doesn’t exist at all. It’s vital to ensure your website is offering an acceptable return on your investment. If you’re devoting tremendous resources to developing high quality content and value to customers, your website needs to faithfully convey these things to visitors and capture their interest. Maintenance costs lower the return on the investment you make through your website, and a redesign can be a fantastic method for improving your website’s performance.
One of the best metrics you can use to evaluate your website’s performance is to ask your visitors about their experiences. Consider deploying survey tools to ask visitors a few questions about their time on your site, such as whether or not they found what they wanted, whether or not they intended to make a purchase and if so, how easy the checkout process was. Surveys are a good way to evaluate the UX your site’s visitors are having, and most visitors won’t mind taking a few seconds to offer feedback.
If you deploy surveys but receive minimal engagement, consider incentivizing survey participation with a promotional offer or discount coupon. You may even want to send surveys to recent buyers’ email addresses to ask about their visits. Another method that helps promote survey engagement is promoting your survey to a targeted group of users. If you send a follow up e-mail thanking a customer for a purchase for example, include survey links that are tied to information about upcoming products or discounts. Users who have already purchased your products and are satisfied with their experience are more likely to be invested in improving your business. Honest customer feedback can help you identify users’ pain points when engaging with your site. Too many customer frustrations mean it’s time for an overhaul.
Ultimately, considering a website redesign can be daunting, but if these metrics and your other key performance indicators show decline or less growth than you expect, it’s time to make a change.
Sometimes completing a task in a new way spurs innovation. Whether you’ve got a laundry list of hacks you routinely use or you typically work by the book, try something fresh this month! When you work in any creative industry, being creative is your job. However, the need to be creative all day every day can take a heavy toll on your inspiration. If your designs have started to look like a signature template or you’re overwhelmed with orders, these shortcuts, tips, and tricks can help.
As a designer, you probably start with a sketch mock-up of the website first, right? Staring at that blank page while you wait for ideas to start popping up can seem intimidating. Sometimes you might even encounter the dreaded "designers’ block." In situations like this, working backwards can be helpful. Start with the endgame first. Build the design based on where the customer will end his or her journey. For example, is the goal the customer viewing the gallery or adding a product to his or her shopping cart? This will shape the navigability of the website and what elements of design should take priority.
The Post-it Trick
It's not uncommon to become overwhelmed with ideas. You're a designer; it's your job to be creative! Narrowing down those ideas is how you end up with a comprehensive and workable design, but that's easier said than done. Imagine fitting your design ideas onto a single Post-it note. This exercise will help you determine the most important aspects of your work. This is because the size of the Post-it note accurately represents the attention span of today's average web users. Remember, less is more.
Make Global Changes Easy
Using the asterisk as your CSS selector lets you quickly apply changes to everything on the website. This can be extremely helpful in the beginning stages of design when you're trying out different looks, fonts, or other elements. It's also a fantastic way to make site-wide changes if you've found a recent problem while doing a website health check. Just make sure to remove it before the code goes live.
See Changes Without Reloading
Isn't it a pain to make website changes only to reload the browser to see how they look? Well, now you don't have to. CodeKit is a remarkable new tool that lets you see browser changes right away without having to reload the page. It's especially helpful for Mac users, since reloading a browser can really cut into design time. CodeKit is a fine way to make sure you've complied with web design best practices without having to wait around for the page to load.
Resize Videos With One Click
HTML5 is a simple way to edit and embed videos, but you can still encounter issues with responsive sizing and areas where HTML5 isn't supported. FitVids is a jQuery plugin that allows videos to resize themselves seamlessly without losing quality or fluidity.
Create Palettes Like a Master Colorist
Just because you're a web designer doesn't mean you're a master of color schemes. Color is important to a website, but color theory is so nuanced that designing a color palette can sometimes eat up a lot of time. Luckily, there are plenty of apps available that take the guesswork out of combining colors. Apps like Adobe Kuler and Paletton let you choose a color from the color wheel. They will then display secondary and tertiary choices. You can see palettes for monochromatic or multicolor schemes.
Export Images Without Losing Quality
Web design and Photoshop go hand in hand, but occasionally, exporting an image from Photoshop to PNG can be a real pain. One classic trick is to export as an 8-bit PNG image. This reduces file size without compromising image quality.
However, this doesn't allow you to export transparent images. If you need the image to be transparent, use the plugin tool PNGQuant. It converts 24-bit and 32-bit images into a tiny 8-bit file but still lets you keep the transparency.
Design Beautiful Fonts Easily
Typography-based sites are still on-trend and are undeniably beautiful. However, no matter how simple they look, they can sometimes be a challenge to design. From building fonts to comparing font palettes and adjusting line lengths, font design can become pretty time-consuming.
Typecast, a relatively new design tool, allows you to design typography-based websites easily. What's more, it integrates with Google fonts. You select a font from Google fonts and click the link to visit the Typecast site. There you can make adjustments to the font, like weight, size, spacing, and line length.
Overdesign is the bane of the web design community, and it happens more often than you’d expect. It's easy to get carried away, adding too many elements, colors, or features to a website. In a time when minimalism is cherished, overdesign is an instant turn-off for viewers. How do you ensure you never cross the overdesign line?
Start with shades of gray. While using Photoshop, you can display your wireframe in grayscale. Once you've added photography and other elements, slowly add color, bit by bit. Start with the most important elements on the page. That way, you accent the important aspects without the risk of going overboard.
Make Rapid Prototyping a Breeze
Rapid prototyping is essential for getting your client on board and excited about your project. Did you know you don't need to use Photoshop to create rapid prototypes? Keynote is a rapid prototyping tool that works across an array of devices. It also has an active community of users who regularly contribute templates for all aspects of prototyping, from wire framing to testing apps.
Use Pinterest to Remember Your Favorite Elements
Pinterest isn't just for recipes and DIY inspiration. A lot of designers actually use Pinterest to create mood boards for future or current projects. It's like making a collage of your favorite designs and saving them for later, except they're much easier to retrieve.
The Pinterest mood board lets you save images, colors, patterns, samples, templates, layouts, fonts, and anything else that catches your eye. Next time you're stuck in a design rut, check your mood board for some fresh ideas.
Find Out What Pops on Your Site
You're nearing the end of your mockup process and you want to make sure the important parts really stand out. Here's a quick way to figure out the most prominent features of your design: take a few steps back from your computer and squint. This will make almost everything on the page blurry, and only the boldest, most attention-grabbing features will be noticeable. The average internet user has a very short attention span. When a visitor first lands on your website, he or she will quickly scan the page. This trick helps you see the website through your visitors' eyes and what elements are most likely to capture their attention.
Shortcuts and tricks like these take the mundane aspects out of design and let you focus on the fun parts. Design shouldn't be about tedious tasks and boring chores—it should be about creativity and fun. As you gain more experience, you're likely to find even more shortcuts that work for you and make your professional life a lot easier. Now get out there and start building some beautiful sites.
Getting ideas before setting about the task of writing a blog can be tough, especially when the topics are dull due to a boring business or industry that a blog writer is called upon to write for. Then the creative juices dry up and the writer is left fumbling for ideas to start writing the content. But the job has to be done and the means to get out of this ‘writers’ block’ has to be found. In this article I’ll examine some ways by which you can discover ideas for writing good content consistently even when the topics are uninteresting.
Initially to have stunning technologies and functional web or mobile software website or web application were enough to capture the market but with advances in technologies had nullified the feeling of something new to technology's effect and now users are becoming more and more smart and concentrated the good user experiences to choose the products. Thus this is the era of usability and user experiences. Among the all factors for good use experiences the performance of web and mobile software gaining momentum so the web and mobile software building is now performance oriented.
When you belong to the performance field and want your company to performance oriented for your website or mobile applications you need to create awareness among the members of your company who are concerned with this. If you are lucky and your CEO had recruited you to manage the performance issues your way is clean, but your company is not much interested then making the performance a priority in your organization is pretty challenging.
In order to make your company performance focused you need to start with the top level where these persons are the leaders of various groups or departments of the organization. This is important because you need to involve different sections in your performance campaign like engineers know that how to optimize the product so you can speak in terms of reducing the regressions and fewer outages with that folks and convince them. The UX team would like to hear about longer sessions, more sessions per month like user metrics and same the way finance team would be agreed to reduce operating costs in words of hardware, power consumption, data center bandwidth, etc.
Thus, involving various departments in your performance culture for effective web and mobile software building process would be beneficial so spread your words across the product management department. Marketing as well as sales department should not be spared here. This is easy if you can identify the key persons in these departments and can use right vocabularies for them.
If you speak in the language that how performance can improve the numbers of unique users from search engine marketing as a result of a faster website makes happy the marketing and sales persons. Therefore, using the terms that resonate with the department you are addressing is important.
To make more and more persons interested in your performance campaign you should carry out some detailed search on your web and mobile software building project and find out the useful stats and present them smartly drawing charts. Now your next step should be to pick a right product to focus on like the product that is in the list of top ten, but doesn’t catch the number one product since that is a cash cow for your organization and nobody would like to experiment with it.
Picking the right product alone is not important to assure success but the persons who work on the web performance optimization for a web and mobile software building project are more important so try to choose the team which can devote you more time and willing to help you so you need to revisit this team each time in the future.
In first part we defined that what is situational performance optimization and taking that further we will evaluate the traits of the situational performance optimization.
Sometimes web developers can’t be enumerating by every possible variable but we can try to identify the primary ones. To get us started down this path below is a list of common traits that can truly affect performance. I tried to give an example for each of those of what Situational Performance Optimization could mean for it.
The most important thing to remember is that no all the sites are same. Some of the sites are visually light, while some are extremely complicate. Some websites regularly keeps on updating and changing while some are just static. Some of the sites out there have independent pages, while the rest of the other just use self-modifying page.
Every 6 weeks Firefox & Chrome ship new versions while some old browsers retain for somewhat long. Let’s take a very common example; most still support IE 7 while some sites deprecated IE 6 support and the 6-years-old IE 8 still accounts for over 15% of web traffic. Mainly the older versions of the browsers lame web developers’ ability to use data URIs, CSS media queries and the like, resulting in less optimized pages for all clients. It has been seen that some browsers introduce new capabilities and that we want to tap into. With recent examples in case of Chrome such as pre-render and WebP image format, what it is good if all rest of the browsers follow these trends!
It’s an undeniable fact that is never going away is that some networks are awesome, and others make web developers want to pull your hairs out. Treating a new Google Fiber link same as a poor reception cellular connection or a congested Starbucks Wi-Fi network makes no sense. Reduce image quality when the latency of the connection is bad. High quality images improve the user experience. Sometimes under certain conditions even your designers would agree they hurt more that it can be bearable.
Today most of the web developers are optimizing for a clean cache scenario. For the vast majority of measurement tools today cache is the default option – and sometime you have only one as simulating a “correct” cache state is really very tough. There’s little advice around how to optimize your cache, particularly when cache is not scriptable and this is become awkward when you are using your cached performance. I believe there’s a lot that can be done if we put our minds to it while browser cache is not scriptable. At the least move all uncacheable at the bottom of the page or make them sync.
With more and more companies using, advocating or offering RUM solutions there’s no doubt for Real User Measurement 2012 was a big year. A better understanding of the complex world comes with these new solutions for our websites live in. Average load times mean very little, and load times differ dramatically between different situations RUM usually shows load times that are double or more what synthetic tests indicated. Taking simply means it’s complicated for web developers.
Unfortunately to handle this new granularity, our optimizations have not yet evolved. Speaking in black and white terms about what you should do, and offering little situation-specific advice current optimization best practices are defined as one-size-fits-all almost without fail. From our rich RUM data we get primary optimization advice that states “you’re not as fast as you think so it is better you as web developers try harder”.
In this article here we are going to discuss about what we see as the next frontier for optimization techniques – Situational Performance Optimization (SPO). Let’s see some insights into what’s available today, and point out some areas we – as a community - should work on improving.
Why don’t we start with what is a Situation? Here’s the answer to it; a situation means a specific interaction between client and server – in each case where a browser loads a web page. Including the structure of the website being browsed every situation is unique in many ways the browser’s cache state, and the current network conditions.
While tuning the page for each situation the goal of Situational Performance Optimization is to make our optimizations aware of this context. Through the RUM solution we already are having the measurement tools in place what we’re missing is using the best practices and the tools in our web development.
By best practices we can know what situation we should consider, and what we should do about them. For instance they can tell us about not using the domain shading for Android browsers, or of serving lower quality images when the latency is high. With a reasonable cost the tools are required to help those things.
Today more and more websites are serving a single version of HTML to all their clients with the common expectation of redirecting Smartphones to a mobile site, and so we do not boil network conditions to the application layer. For reducing the level of expertise required of the web developers, we need tools that at least provide situational awareness to the code generating the page, and at most perform the actual optimization.
Sometimes it happens that there are so many Situations and just a little time for them. But we can’t specify every possible variable, but we can try to identify the primary ones. They are Network Protocols, Cache State, Network Conditions, Browser Capabilities, and Website Content & Structure. So we will discuss them in our next episode I mean next part of this series for renowned web developers.
Since 2003 we've been dedicated to creating website for businesses small and large, that are beautiful to look at, and help turn visitors into customers.