7 Ways to Speed Up Your Website

There’s no doubt about it – website speed matters now more than ever before!

As average internet connection speeds increase around the world, web users are becoming less and less tolerant of slow load times. At the same time, Google has stated unequivocally that it prefers to reward fast sites with higher positions in the natural search results.

To take advantage of these dual benefits, you need to make site speed a priority on your site. Any of the following seven tips will help to get you started on this important path.

Tip #1 – Size images before uploading them

If you use a content management system (CMS) like WordPress or Joomla, you’ve probably noticed that you can upload images at full size and then adjust their display size within your website’s backend.

However, doing so forces web browsers to execute multiple commands – pulling up the initial images and then re-sizing them on the fly – which can slow down your site.

To prevent this from occurring, use an image-editing program to adjust images to the correct size before adding them to your site.

Most of us will have access to a simple tool like Preview (on Mac), or even Microsoft Paint (on Windows). With these programs all you have to do is open up the image and re-size it in your editor of choice.

Once you’ve done this you can take your image editing to the next level with a compression tool. Even after re-sizing each image the total file size might be pretty large and this will slow down your site’s loading speed.

One of the best tools available is an online tool called TinyPNG. All you have to do is click the link, upload your re-sized image and this tool will reduce the file size without reducing the resolution.

Then, all you have to do is download the image and upload it to your site.

With this tool your images will look exactly the same and will load much faster.

The first step to a fast site is a reliable web hosting service

Tip #2 – Eliminate unnecessary plugins

The huge number of plugins and scripts that are freely available today makes it tempting for website owners to add more than they truly need. Keep in mind, every plugin you add requires resources to run – and more resources mean a slower site.

Before adding any new plugins to your site, ask yourself if the functionality you gain is worth the trade-off in site speed, or whether the plugin’s content could be coded into your site’s theme instead.

If you notice your site is running slowly, or you believe it could be running much more effectively, perform a plugin run-through.

This involves you disabling every plugin on your site, one by one. After you disable a plugin, run your site through a tool like GT Metrix. This will show you the speed of your website.

If you find that the speed of your site greatly increases after deactivating a plugin, then you’ve found your culprit. If you absolutely require that specific plugin’s functionality for your site to work, then experiment until you find another plugin that doesn’t affect the speed of your site.

Plus, getting rid of plugins can prevent plugin conflicts that arise when you have too many active plugins at once. The more plugins your site has active at any given time, then more likely their code may conflict and cause them to not work properly.

Tip #3 – Make sure your site’s scripts are up-to-date

Depending on the CMS or e-commerce platform your site uses, you may need to check back regularly to determine whether new releases of your site’s scripts are available.

If they are, upgrade your site as soon as possible (making sure that you have a current backup file in place first).  Site script developers are always working on improving their code for future releases, particularly when it comes to site speed.  Updating your scripts to the latest versions could go a long way towards eliminating coded roadblocks that prevent your site from loading quickly.

Now, remembering to check-in and update your website can be tough. After all, you have so much stuff on your plate already.

Lucky for you this isn’t something you have to do on a daily basis. Often, once a month is enough to do a simple run-though of your site and install any updates that might be available.

If your site runs on WordPress, then you’ll find these updates within the Updates tab of your WordPress dashboard. Just one click and your site will install the latest software updates. No need for anything else on your end.

Set a recurring event on your calendar and set aside an hour every single month. Usually, it’ll take much less time than this, but it’s important to build the habit of always ensuring your site and plugins are running the latest version.

Plus, having all of your software up to date will help to patch up any holes that could lead to your site being hacked.

Tip #4 – Make use of CDNs

Content Delivery Networks, or CDNs, are vast networks of servers that are housed around the world. Typically, if you’re not using a CDN, then your users will have to access your web host’s server at its central location.

This can lead to slow site speeds, especially if your visitors are located far away from the central location of your server. Additionally, if you’re just using a single server, there’s a chance it could get overloaded and cause your site to crash.

CDN’s solve both of these problems by letting your users access a cached version of your site from the web host that’s closest to them. Better yet, if one of your server locations is overloaded, then they can be switched to a new server location.

The result? Faster load times that will make your customers and the search engines happy.

To get started, look into the CDN services offered by SiteLock TrueSpeed, MaxCDN, or Cloudflare.

Tip #5 – Enable browser caching

Browser caching is a technology that allows a website visitor’s browser to store copies of your site’s individual pages so that, when the visitor returns in the future, the content can be called up from within the cache rather than reloading the entire page. This saves the number of resources used to display your pages, resulting in faster overall load times for your visitor.

The easiest way to enable browser caching is with a plugin like WordPress W3 Total Cache. To install this plugin on your WordPress site, follow the steps below:

1. Navigate to your site’s Dashboard, then Plugins>Add New, and search for W3 Total Cache. Click Install, then Activate.

2. Once the plugin is activated, navigated to the new Performance tab at the top or lefthand side. This is where you’ll control all of the features of the plugin.

3. There are a ton of features that you can turn on or off with this plugin. If you want to fully configure this plugin, then check out this post by WPMU DEV.

Alternatively, talk to your web developer about ways to integrate browser caching into your server-side scripting.

Tip #6 – Turn on Gzip compression

Gzip compression is a technology that minimizes the size of browser-based HTTP responses – sometimes by as much as 70%.  If that doesn’t make sense, don’t worry.

Long story short, using Gzip compression can speed up your site’s load times significantly.

There are three ways to turn on Gzip compression on your site.  You can:

1. Add the following code to your site’s .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

 

2. Add the following code to the top of your HTML or PHP page:

 

 

3. Install a Gzip compression plugin like the W3 Total Cache tool for WordPress (just keep in mind what we said earlier about installing too many unnecessary plugins!).

Tip #7 – Keep CSS files at the top of your page and Javascript code at the bottom

Finally, keep your site’s code neat and tidy by adding CSS files to the top of your page’s code and Javascript snippets to the bottom when working with raw HTML pages.  

Adding your CSS files to the top of the page prohibits progressive rendering, saving resources that web browsers would otherwise use to load and redraw elements of your pages. Adding Javascript to the bottom prevents your pages from waiting on full code execution before loading – leading to a faster browsing experience for your visitors.

Although these are only a few of the different techniques that can be used to speed up your site, they’re some of the easiest to implement.  This list is a great place to start if you notice your site slowing down.

Having said all of the above, sometimes a slow site is simply caused by inadequate hosting. With HostGator, your site will be served from industry-standard technology and backed by 24/7/365 award-winning technical support via email, telephone, and LiveChat. We make it painless to transfer and are happy to assist every step of the way.

How to Improve Your Website: 15 Ways to Fix Your Site Immediately

When guests come to your home, you want to make a good first impression right? You wouldn’t invite people over for dinner with a cluttered house and then not feed them would you? The same should hold true for your website.

You only have a short amount of time to grab a visitors attention. According to Neilson Norman Group, users will likely read 20% of the words on a page. If your website is cluttered and doesn’t have a clear message or call to action, folks won’t be sticking around for the main course.

Here are 15 ways to improve your website, increase conversions, and make your guests want to visit you again.

1. Add a Value Proposition

The value proposition, or mission statement, tells the visitor what you do and why you do it.

Put your value proposition on your home page, in your headline if possible. Add it to your blog or about page. Let the visitors know exactly what they will be getting if they hire you, buy your product, subscribe to your newsletter or read your blog.

Joe Pullizzi, over at Content Marketing Institute, tells us exactly what we should include in our mission statement:

[our company] is where

[our audience] gets

[what information] that offers

[what benefit].

Orbit’s content marketing mission statement states:

The Orbit blog [our company] is where digital marketers [our audience] can find expert, practical advice on web design and content marketing [what information]. Our goal is to help you get better results from the web [what benefit].

2. Website Navigation

The navigation on your site serves two purposes;

• it helps the user find what they’re looking for

• it helps your search engine rankings

Your visitors should come first, search engines second. Be human. Use descriptive navigation instead of generic “What We Do” text. Use words that your visitors would use and words that your visitors are searching for. It’s fewer clicks for the user and helps search engines indicate your relevance.

This is a great example. When you get to their website, you know exactly what they are offering; pepper spray and safety products.

Pro tip: Don’t use jargon or internal lingo. Companies try to be clever instead of being empathetic to their visitors. No one knows what “RTT Buzz” means. Is that your blog? Say “Blog” then.

3. Call to Action Text

The call to action, or CTA, is huge. You’ve got your users on the site, they’re interested, now what do you want them to do? Tell them!

Use the 1st person voice (I, me, my) to let the users tell the CTA what to do. Example: Download My Guide. Another effective approach is using the WYLTIWLT (Wilty Wilt) test.

According to Jonathan Richards, “one practical solution is to say that the words on a button must make sense after both the interrogative “Would you like to…?” (where the publisher speaks) as well as the conditional “I would like to…” (where the user speaks).”

You should be able to evaluate every button you create using this test.

Note: every button/CTA on Facebook passes the WYLTIWLT test.

If you’re not sure how to word your buttons, I recommend reading How to Design a Button.

4. Call to Action Colors

Find an accent or contrasting color for your call to action buttons. For example, if your site is predominately blue or light blue, find a nice yellow or a warm orange that accents your color palette, while calling attention to itself.

If you can give your user a better idea of what they can click on and what might happen when they do, they’re going to be more likely to take the risk.

5. Try The 10-Foot Test

Ok, time for a little exercise. Pull up your home page. Now get up from your desk and take ten steps back from your computer. Can you tell what your company does at a glance? Better yet, have someone else try it. Can they?

If not, you need to tighten up your messaging. Be specific. Don’t try to be clever.

Unbounce does this well. When you go to their site you know exactly what you’re getting: I can build landing pages for A/B testing and I don’t have to be a tech genius to implement it. Got it!

6. Carousels

Everyone seems to have an opinion about whether or not you should use carousels on your website. But first, you should take a look at the data and context of which they are used and then make a decision on whether or not they are relevant to your users.

According to this study by Erik Runyon, user interaction greatly decreases after the first slide. Not really shocking, but almost no one makes it to the fourth or fifth slide. If you do decide that carousels are needed on your site, keep it to three at most.

Erik also warns against auto-forwarding slides. Tim Ash, a top conversion rate expert, agrees.

It seems counter-intuitive, but motion actually distracts visitors.

“The human brain is hard-wired to notice the onset of motion, which makes rotating banners especially distracting. We literally cannot tune them out.”

Does that mean you shouldn’t have a carousel on your site? Not necessarily. Take into account the message, context and design.

According to Smashing Magazine, using a carousel for image galleries on a product detail page may be very useful to your visitors that are browsing on a mobile device. An auto-forwarding homepage slideshow with weak calls to action probably aren’t as useful.

Do your slides bring value? If the answer is no, then 86 them!

7. Social Proof

Use social proof to entice people to sign up for your newsletter or download an ebook. Have influencers in your industry provide a quote or testimonial like Ian Cleary of Razor Social does.

8. Testimonial Pages

Let’s face it, no one is going to go to your “Testimonials” page. When was the last time you clicked on someone else’s? Exactly.

If you have great clients that say great things about you, that’s amazing and it should be seen. The best way to do this is to scatter it throughout your site. If you use case studies or video testimonials, find a way to tuck them in there, or on product pages.

The point is that no one is going to go looking for pages that praise you. You need to find ways to bring the good things folks are saying about you to the forefront. If you need help, read this complete guide to website testimonials.

9. Team Pages

People want to know, like and trust you before they buy from you. Let the visitor know who’s behind the scenes in your company and what your culture is all about. At the end of the day, people do business with people so let your visitors see who they’ll be doing business with.

Using individual team pages also gives you a chance to rank in search engines when people search for your name specifically. If you have all of your team members on one page, there’s no way Google will know which person to rank that page for.

10. Mobile-friendly

Having a mobile-friendly site used to be a “should have,” now it’s a “must have.” On April 21st, Google updated their mobile search rankings algorithm. Mobile-friendly web pages will now rank higher in mobile search results versus non mobile-friendly pages. You can read all about it here.

There’s a reason Google did this. They want the user to have a good experience when they land on your website. If you have a site that has tiny links and the site is hard to navigate, people are not going to want to stay on your site. You’ve done the pinch and zoom. It’s not very pleasant.

Which site are you likely to have a better experience on?

11. Internal Linking

Don’t let your visitors hit a dead end on your site. Always keep them (and search engine robots) moving. On your service pages add a simple call to action with a link to your contact form.

On the home page, you should link to service pages. Include the name of the service page in the link so the user knows what to expect when they click that link.

Check out this complete guide to internal linking for additional tips.

12. Email Sign Up Forms

Your sign up forms should contain the 3 P’s: visually prominent, offer proof and promise something. Make it obvious and clear what they are signing up for. It’s better to have a smaller amount of engaged users who are there because they want to be than a large pool of folks who were baited.

Here’s an example from Content Marketing Institute:

This is very visually prominent on the page, they show proof by telling you that 100,000 of your peers subscribe to their list, and they promise that if you sign up you’ll get daily articles and an ebook. Check!

13. Forget The Fold

People tend to get stuck in this mindset that no one scrolls below the fold. That’s not true and there are many studies that prove this.

Scrolling is the single most natural action users take on the internet. Yes, more attention is paid to things above the fold because it’s the first thing you see, but that doesn’t mean people don’t scroll and it doesn’t mean you have to stuff everything “above the fold.”

Put your most important messaging at the top and give your users a reason to scroll if needed. If you try to cram everything above the fold, you’re going to end up with a page that looks like this…

Unless you really want to purchase a hovercraft, would you want to stay on this page any longer than you had to? Probably not.

14. Email Addresses vs. Contact Forms

If you’re interested in collecting data and tracking conversions, you should be using a contact form. With every form, you should have a unique thank you page. This way you can set up goals in your analytics and track where your conversions are coming from.

Here’s what your conversion tracking will look like in Google Analytics:

In addition to tracking conversions, it’s easier for most users to fill out a contact form. If the users clicks on an email address on your website, it opens up whatever default email program is on your computer.

I use Gmail, but my default on my computer is Mail. Any time I have to click an email address it automatically opens up Mail. Then I have to copy and paste the email into my Gmail to send a message. Not the best user experience.

Note: there are ways to set your default email options, but for the average non-techy user it’s not as easy as it may seem.

Another user benefit is knowing that your message was received through an “auto response” email. When you send an email directly, you have no way of knowing if they received your message or not until the person responds.

If you’re not sure how to set up goals or track campaigns, check out this post on How to Set Up Google Analytics and How to Track Campaign in Analytics.

15. Thank You Pages

This is one of my favorites. It’s one of the most overlooked, yet effective ways to keep people engaged (and it’s easy to implement). Thank you pages give you an opportunity to have the user sign up for your newsletter, download an ebook, give them a coupon code, add a video, follow you on social media, etc…

A couple of years ago, we added a newsletter sign up to our contact form thank you page. It looks like this:

Here are the results:

We get almost 500 newsletter subscribers a year, just by adding a simple “subscribe” button. If you’re an ecommerce site, offer a coupon code if they refer a friend. See what the results are. There’s almost no cost to add this, but could pay off exponentially.

 

5 Ways To Improve Your Website

 

As the face of your company to the world, a good website is a must-have for your business. Here’s how to make it not only attractive, but functional–for you and your audience.

A main-street business owner can see if consumers are entering their store or walking right by; they know what products are selling off their shelves and which ones aren’t selling at all.

And why should an online business be any different?

Consumers are increasingly making more online purchases each year. Retailers that have both a physical storefront and an online presence have reported an average of 23% growth. So whether you’re a small business or a global corporation, maintaining a strong online presence is a necessity.

It all begins with design and clarity. A beautiful and clear website is one of the most efficient and cost-effective ways to generate leads for your business, especially if it’s built and marketed properly. And conversely, a poor site will create lost business opportunities and enable your competitors to eat into your segment of the market.

But as essential as having an attractive, professional site is, it’s only half of the equation.

Constant monitoring of how your site is performing–and tweaking your site to improve performance–is just as important.

Once you have built a solid website for your business, it’s critical to take a step back and sift through the data to see where your visitors are going when they come to your site and what they are doing when they get there so that you can figure out ways to engage them even more.

Here are the top five things that will poise you for online success in the ever-growing online market:

1. RESPONSIVE DESIGN

More than 50% of all searches start on a mobile device. So if your business is not displaying mobile-friendly experiences for your customers, you’ve lost more than half of the opportunities for new business right off the bat. That’s the bottom line.

Mobile friendly means that your existing site grows and shrinks with the size of the device it’s displayed on, which is called responsive design. You could also have a separate mobile version of your website, though a responsive site is believed to be better for search engine optimization.

In a few years, responsive design will be the standard architecture for all websites, but for now people are still trying to catch up with the times. If you look at any major, successful online business, it will have a mobile friendly website, and it’s usually responsive.

2. USER BEHAVIOR METRICS

Business owners must know how users behave on their websites–this is crucial data you need to grow your online business.

There is a simple way to find out this valuable information and it’s free! It’s called Google Analytics.

This easy-to-use tool will tell you detailed user behavior on your site, which will help you fine-tune your online offerings.

Another good tool, Crazy Egg, shows a heat map of your site and details exactly where users are clicking. Gathering these facts and figures will enable you to create effective pages and, ultimately, higher sales.

Be sure to review your analytics at least once a month.

3. CONCISE MESSAGING

There’s a different mindset and level of attention when reading a website as compared to a print document. All too often, there are long blocks of text with small print. Nothing can turn a customer off more.

Online, you need to get to the point quickly and use bigger type. Visitors are coming to you to solve their problem, so your website should answer their question quickly and easily.

If, for example, you’re selling women’s running shoes online, show your customers what they are looking for and why there’s value. Why should they make a purchase from your site? Is there free shipping? A special offer? Have your messaging followed by a call to action, such as “Shop Now!”

Don’t make users try to figure it out for themselves. That will only make them shop elsewhere.

4. FRESH CONTENT

Just like a store changes its window display every month, you should frequently have fresh content on your homepage and landing pages. People don’t want to see the same thing over and over.

Take Amazon, for example: Every time you visit, they have deals, sales, and new content. This immediately conveys the message that they are relevant, up-to-the-moment retailers, and leaders in their space.

It’s also important to give your visitors the ability to share your content. This allows them to become your greatest marketing ambassadors. And their sharing helps your SEO.

5. LAYERED LANDING PAGES

Driving customers to your homepage is great, but directing them to landing pages that drill down deeper into the site is much more valuable.

Most businesses offer a variety of products and services and need landing pages for each category of product and service. That is the only way to build presence in that market.

Take the women’s running shoes example: That site probably sells many types of shoes. You can’t put them all on the homepage. That would be a terrible idea aesthetically–and you could miss opportunities when a customer does a very specific search. You should have a category of shoes, and within that category, you should have a specific landing page for running shoes.

Furthermore, when you run a pay-per-click (PPC) campaign on Google, make sure you take the visitors to that landing page, rather than your homepage. Be sure that landing page has effective messaging and calls to action, and the title of users’ search is in a header on your landing page. This will help your site also rank organically on search engines and lower your PPC costs.

If you follow these rules, you will be on your way to establishing yourself as a leader in the online space. Remember to stay on top of trends, monitor your results, change your site accordingly, and enable sharing. All these steps will keep you ahead of the competition.

 

12 Web Design Tips to Help You Achieve Success in 2018

There’s a lot more to being a great web designer than simply having the necessary technical skills. Another key element to success is keeping up to date with the latest web design tips and trends from the world of online publishing and beyond.

Keeping your finger on the pulse gives you the option of becoming an early adopter of emerging design trends and styles. This, in turn, can help you to deliver projects, whether your own or for your clients, that really pack a punch. Having a solid arsenal of web design tips to turn to when it’s time to get down to work can also help to speed up your workflow.

Even if you’re a bit of a maverick who prefers to walk your own path rather than following the herd, keeping abreast of the latest web design tips and trends has it advantages. For one, it’ll make it easier to understand the needs and wants of your clients when discussing their vision for a project and they want to emulate something they’ve seen elsewhere.

And if you really want to be original, being aware of what’s popular now will help you to avoid those trending web design tips and styles and create something that is all your own.

So in this article, you’ll find a collection of useful web design tips that will help your WordPress website and the client projects you work on in 2018 achieve success – whether you want to implement them or ignore them in your quest for originality.

When it comes to creating websites, whether for yourself or for your clients, success doesn’t come easy. To increase your productivity and keep your output looking fresh and modern, not to mention optimized for search engines and conversion rates, it’s essential that you’re always learning as many new tips and techniques as possible.

So, let’s explore a few different web design tips that can help you out in 2018.

1. Use Style Guides

Style guides are popular in the publishing world. They can come in the form of large books or documents that media publications follow to maintain uniform styles throughout their content. This can include everything from how states and countries are labeled to how numbers are written.

Web designers can create their own style guides to ensure the sites they build have uniform styles throughout. This is especially useful for designers who collaborate with other freelancers. A well-written style guide can help keep a disparate team on the same page.

2. Phase Out Sidebars

Sidebars create clutter. They were meant to improve the usability of a site by displaying additional navigational elements, such as links to recent posts and popular content.

Over time, it’s fair to say they’ve been hijacked by savvy marketers looking for a way to display email optin forms and other promotional content that doesn’t always offer much to the user experience.

While in theory sidebars containing links and other useful content should enhance the user experience, in reality, very few site visitors actually use them, at least according to heatmap tests conducted by ConversionXL. Therefore, compromising your site’s design in favor of a sidebar for marketing purposes may not deliver the results you desire.

Try phasing sidebars out in your designs, especially if a site doesn’t really need one. Make your content the most important element on a page by using designs that force readers to focus on it.

If the thought of abandoning sidebars altogether sounds a bit extreme, look for a theme that gives you the option of publishing full-width content, alongside more traditional layouts that feature an accompanying sidebar.

You can do a lot with the humble WordPress sidebar and one web design tip for 2018 is to get smarter with the way you do or don’t use them.

3. Start Your Designs Offscreen

Do you create code and designs on the screen at a rapid rate, without a care of how things will turn out as you know you’ll edit and clean things up later on? If so, why not try a new approach in 2018.

Instead of jumping right in and figuring things out as you go, why not turn to the trusty pencil and paper or use a whiteboard to plan an overall site layout offscreen first. Use this approach to get an idea of where you want specific elements to go, much like how an architect uses floor plans to plot out where windows, doors, and rooms should go.

If adopting a pen and paper doesn’t appeal, there are plenty of great wireframing and prototyping web design tools out there that can help you quickly get your ideas out of your head, before you get started in your development environment.

4. Use Larger Font Sizes

Big typography isn’t a new trend or aspect of design, but it’s still a great practice to follow in 2018. This is because it has the power to grab the reader’s attention and places the focus on your content.

Readability on smaller screens, such as mobile devices, has played a huge role in this trend’s rising popularity, but it also fits in nicely with the ever-popular minimalist and flat design trends.

One web design tip for 2018 is to try incorporating larger font sizes in your designs, such as a minimum font size of 18 points for body text, where it makes sense. This includes any text you place in header images or even the text on a homepage when using a large, hero image. Just make sure you focus on choosing a web-friendly typeface that scales well, rather than agonizing about which size to choose.

5. Create More Space

Too much clutter can distract readers and make a site appear overly complicated. That’s one reason why phasing out sidebars is recommended. However, you should also try creating more space in general rather than trying to include as many elements as you can on a page. Again, it helps a reader focus on what’s important while giving you the opportunity to build better-looking designs.

This space is typically referred to as “whitespace” or “negative space,”. However, this space doesn’t always need to be white, especially if you’re building a website that uses large images on its homepage and headers.

Minimize the amount of clutter in your designs and include more space around and between elements to help guide your users through your site. Whitespace can make it clear where a reader’s attention should be focused.

6. Responsive Design isn’t Optional

Mobile device usage continues to grow, especially when it comes to accessing websites. This means that it’s never been more important to ensure your websites are mobile-friendly.

So one key web design tip for 2018 is to fully commit to responsive design. In the past, this simply meant checking off the responsive design box on your to-do list. However, as this technology matures, you need to start considering more than just fluid layouts. Think mobile optimized images, whether hamburger menus are the right choice, and much more.

For 2018, you might even want to embrace the concept of mobile-first web design.

7. Take Advantage of Google’s Material Design

Google ramped up the use of the Material Design philosophy in 2014, and digital designers have been quick to follow suit.

If you’ve embraced the flat web design trend, then it’s probably time for you to jump on the Material Design bandwagon and update your style for 2018. The core concepts of this web design framework include using layers to create elegant shadows alongside the edges of elements, helping to add some much-needed style and depth to the minimal flat design trend.

If you want to get started, there are some great, free Material Design UI kits around that can help get you up to speed.

8. Expand and Reevaluate Your Toolkit

Are there tasks in your workflow you feel could be more efficient or at least, more enjoyable? Then one web design tips that can help you out is to do a little research and find out if there are any new tools that better meet your needs.

Just as new web design tips are emerging all the time, so too are new web design tools. From hot new free apps like Pixate, through to updates to industry favorites like the Adobe CC apps for web designers, it’s always worth keeping an eye out for something new that could help improve your workflow and enjoyment levels.

9. Simplify Navigation

Placing tons of links in your navigation menu, sidebar, blog posts, and even the homepage may seem like a great way to keep people on your site, but it can actually go the other way. Complicated navigation systems create way too many options for people, so much so that they may decide to leave your site altogether.

Placing fewer items in your navigation menus and eliminating sidebars are great ways to cut down on the amount of clutter that exists on your site. This can allow you to build better-looking designs without compromising user experience or conversion rate optimization.

10. Up Your Imagery Game

Upgrading the quality of the images you use in your work is a great web design tip for elevating your projects. Instead of simply using the free images that everyone else has access to, it might be time to invest in a premium stock image service.

The next level up could be to create or commission your own images from scratch, whether that’s going out and taking high-quality photographs, drawing them yourself, or a combination of the two. Combining typography with your chosen images can be another effective way to make them more original and assist you in delivering your message.

Choosing beautiful imagery for your website is a proven way to assist you in achieving your goals and help your content stand out from the crowd.

11. Phase Out Sliders

The decision between whether or not to use sliders is a highly-debated topic.

However, in most cases, they should really be phased out in 2018, especially if you want to decrease the amount of distractions on your site and make it easier for users to find their way around. Sliders don’t do either of those things. They’re very similar to sidebars. They create way too many options for your visitors to choose from, and very few people actually use them.

If it’s your homepage you’re concerned about, opt for a large header space that uses a unique, well-crafted static design that clearly defines your brand of that of your client. Again, play around with big typography to make static images more visually appealing and come up with better page designs that make sliders redundant.

12. Learn A/B Testing

A lot of these web design tips are general advice based on current and upcoming trends in the digital space. However, there’s no guarantee they’ll work for your site.

You also shouldn’t necessarily feel obligated to use or forego certain design elements simply because it’s a current trend or now an unpopular style. A/B testing is a skill you can learn to find out whether or not your designs are working or not.

Maybe you or your client want to use a slider or a busy sidebar and don’t want to give in to the conventional wisdom that states they’re outdated and ineffective. A/B testing is a great way to implement a new design and test its effectiveness yourself. Split testing is also an effective way to negotiate compromises between you and your clients, thanks to the evidence that can help back up your recommendations.

Check out our guide on how to use A/B testing with WordPress if you want to learn more.

Final Thoughts on Web Design Tip for 2018

Continuing to learn and pick up new web design tips, no matter how much experience you have, is one of the most important things you can do to achieve and maintain success throughout your career.

Hopefully, these web design tips have given you something to think about and help point you in the right direction for more learning and experimentations. Perhaps the final web design tip should be not to rest on your laurels, no matter how successful your 2015 was.

Top 10 Pro Tips and Tools for Budding Web Developers and Designers

Web development and design are two great skills to have because they allow you to work from anywhere and create amazing, beautiful sites and apps. Nonetheless, it can be hard to get started when you don’t know what to do. We can help you out with these ten great tips and tools.

10. Get Educated

Tips and tools are useless if you don’t know the basics. If you’re still struggling with the initial concepts of programming and design, we’ve got a few lessons that can help you. To get started with web development, our Lifehacker Night School series can teach you HTML and CSS as well as JavaScript, which pretty much covers the basics. We also have Photoshop lessons which can teach you how to mock up a web site layout. We also have a basic lesson on color theory. To pick up a few more design skills, check out this list of resources. It’ll help you get inspired and discover ways to learn more of the basics. If you want to learn more, check out Code Academy for additional programming lessons.

9. Build Up Your Font Library

Picking the right font can make or break a great design. I mean, just imagine replacing every instance of Helvetica Neue with Comic Sans. Right? Right? Whether you’ve got a font of font knowledge or you don’t know your serifs from your sans-serifs, you can always benefit from a good font collection. My favorite resource is DaFont, but that’s just one of many. FontPark offers over 70,000 free fonts and YourFonts will even let you make your own. For more places to find free typefaces, check out our fonts tag page.

8. Use Dummy Tools

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Man, I could go on writing that genius material for pages with this Lorem Ipsum text generator. If you’re not familiar, Lorem Ipsum (or Lipsum for short) is what many designers and developers use to generate fake placeholder text for their designs. You don’t necessarily have actual content when you’re creating a design for a web page, magazine, or other layout with lots of text. Lipsum generators supply you with placeholder text designed to fill titles, sentences, and/or paragraphs when you’re lacking. But you don’t have to rely on the standard stuff. There are many varieties of Lipsum generators, such as Cupcake Ipsum. Bear claw sugar plum sweet roll. Sesame snaps gummies gummies sweet roll oat cake chupa chups lollipop lemon drops!

Text is not the only thing you might need to generate for your designs. What if you don’t have images? The Dummy Image Generator is basically the Lipsum equivalent for pictures. You just enter a size and it spits out a placeholder. This is very handy during both the design and development processes.

7. Steal

You know how there are no original ideas and everything is a remix? Don’t feel like you have to come up with a design nobody’s ever seen before or original code when there are tons of existing code snippets freely available on the web that you can use as you please. Great ideas come from building on the ideas of others, so feel free to steal a little bit. Obviously you don’t want to copy anyone’s idea verbatim or use anything without permission, but you can gain a lot of inspiration from looking at the work of others and borrowing little things they do to make your design look great and your code even more powerful and efficient. I like Snipt for finding code snippets. When it comes to design, you just need to browse the web. Pinterest is quickly becoming a large resource for posting examples of great design, but you don’t really have to look any farther than the Lifehacker community. We have a number of designers in our midst and recently we featured the landing pages of a few along with tips on how you could learn from their process. Check it out and see if there are any techniques or ideas worth “stealing.”

6. Pimp Out Photoshop

For most web designers, Photoshop is an essential tool. It’s capable of a whole lot, but you can expand its capabilities by adding new actions, brushes, shapes, and more. Actions are basically macros for Photoshop, allowing you to automate tedious tasks you don’t want to do “by hand.” Here are 100 existing Photoshop actions to expand your collection, but if you need something specific you can always just create your own.

Expanding your shape and brush collections can also provide you with new options. Shapes give you vector images you can use in your designs, and brushes will let you paint with a variety of objects and styles. This ultimate shape collection should give you a good start, but you’ll quickly find that if you perform a web search for “Photoshop shapes” and whatever type of shape you’re looking for (start with silhouettes for a good set of options) you’ll turn up some good choices. You’ll find that Photoshop brushes are in an even greater abundance. Just take this collection of 2,000 for example. Brushes can allow you to paint with shapes, emulate real paintbrushes, or even create interesting effects. It’s also easy to create your own.

5. Quickly Generate Complex CSS Code Visually with a CSS Generator

The CSS3 Generator, the CSS3 Maker, and the CSS3 Border Radius Generator are all great examples of ways you can generate the more complex CSS code you often forget. Drop shadows, animations, and rounded corners are very cool effects you’ll want to employ on occasion, but since you’ll use them less often and they require a bit more effort than your average style it helps to have a generator handy to create the code for you. It’s important to know what you’re doing when you’re writing the code and to understand the code that comes out of the generator, but you can save yourself a little time when you’re in a hurry or just can’t remember the exact syntax.

4. Download Free Resources

Design can be tough when you have to take your own photos, draw your own pictures, and create virtually everything from scratch. Sometimes it’s best to have a little help when you, say, need to add an iPhone 4S with interface elements to your layout. The internet is filled with plenty of free and available Photoshop-ready resources to help you enhance your designs without putting in additional hours of work. Take these 30 free gadget PSDs for example. Most of the time, all you have to do is search for the item you want. That said, you can find plenty of great images, backgrounds, icons, and more at sites like psd Graphics, The Noun Project, Design Kindle, and PSD Collector. DeviantART can also be a good resource. Some assets will require attribution and others are simply available for your benefit with no reciprocation required. You don’t want to overuse these great resources, but they can be very helpful when utilized in the right ways.

3. Get a Great Programming-Friendly Text Editor

Just as Photoshop is an indispensable tool to a web designer, a great programming-friendly text editor is to a programmer. We have favorites for Windows and OS X, so be sure to check those out if you’re looking for some good options. You may also want to check out our favorite text expansion apps as well so you can store your favorite code snippets and insert them into your code with just a few keystrokes.

2. Know How Your Site Will Look on Different Kinds of Screens and Web Browsers

It’s easy enough to put together a design for a web site when you’re the only person who’s viewing it. When it’s live on the web, however, it’ll be showing up on screens of all shapes and sizes in various web browsers. Before you deploy, you’re going to want to test and make sure things look the way you want. Screenfly can show you how your site will look on different displays. Browsershots will let you see how your site is rendered by many different browsers running on Windows, OS X, and Linux. All you have to do is choose the browsers you want and wait for screenshots to appear. It may not be as efficient as testing your site on an actual computer, but it’s certainly much more affordable.

1. Use a Framework

Frameworks can make the development—and even design—process go a lot faster. This is because most web projects are not particularly unique in the way they’re created. Just as you’ll end up stealing little ideas and code snippets around the web, you’ll also end up borrowing grand concepts and principles that have long been standard. Frameworks let you take advantage of this by taking a lot of the effort out of standard coding. This saves you time and a lot of the headache that often comes with the tedious process of starting from scratch.

So what frameworks should you use? On the development side of things, Blueprint is great for CSS layouts, Ruby on Rails for Ruby programmers, Zend and Cake PHP for PHP developers, and Django for Python coders. You generally won’t hear the word “framework” in a conversation about design, but the idea does translate nonetheless. The Grid System and the 960 Grid are two great examples. If you want to save a little time by following principles that have worked for ages, check out a framework. It’ll help you adhere to best practices, and you won’t regret it.