Category

Design

Proper Content Creation

Keys to Proper Content Creation

By | Design | One Comment

 

Content creation can be one of the most difficult and tedious parts of the design process. Even if you can create the perfect layout and aesthetic appeal your site can still be boring and turn off potential customers. The content that you fill your pages with are the heart and soul of any site. It is the bridge that connects your ideas and information to any potential customers viewing your page, which makes it essential to get right.

Thesaurus, thesaurus, thesaurus…

Using a thesaurus while creating content for your site is one of the most valuable tips I can give you. A thesaurus is a fantastic way to spice up your language. It allows you to use a much wider range of vocabulary that you might otherwise be unaware of and can help you get your point across much easier. It is important to know the limits of the thesaurus, however. Using words that are too difficult for the average audience, or that would be completely unknown to yourself without the aid of a dictionary are a no go. That’s not to say large and complex words should be completely avoided, just that word choice should always be used to enhance the readers understanding and experience.

Learn the Lingo

As a web designer, and more specifically a content manager, I can tell you that there will be many times that you are asked to build a site for an industry you know nothing about. As someone who sits behind a computer most of the day, I’ve found my knowledge of the road repair industry a tad bit sub par. While it may seem time-consuming to delve into the finer points of an industry when creating a new website, It creates a much better outcome.

Learning not only the vocabulary words but the many processes that are involved with the industry you are creating a site for is imperative. By having a base level knowledge you can better represent the industry you are making the site for, which leads to a better overall product and a better user experience.

Knowing how to present the information you have acquired is another important step in the content creation process. If I were to create a site selling equipment to road repair companies, I can expect the user to be pretty acquainted with the terms and process of that industry. Very few consumers would be looking for road repair equipment if they had no fundamental understanding of how road repair works. On the other hand, if I were creating a site for someone offering road repair services to individual consumers, such as those looking to repair or replace a driveway, coaching them through the terminology and processes offers a better overall user experience. By helping them to understand more of what goes into the service being offered, they are more likely to purchase the service.

Keep it Real

When building a site, whether it is for yourself or for a client, it is key to present the business in a very flattering way. However, it is very easy to go overboard. If you were to present a company as a large workforce when it only employs two individuals, the customer could end up feeling duped and as a result review the service poorly. Whether offering a product or a service, the customer should be presented with factual information that allows them to make an informed decision about their purchase. It is better to provide a customer with incentives such as low cost or high-quality service rather than to mislead them through the content on a website.

3 Ways to Make Your Website Load Faster

By | Design, Technical | No Comments

Speed is starting to become increasingly important in an increasingly mobile world. A slow website ruins the user experience. A lot of people will just leave if a site loads too slowly. While we do live in a world where internet speeds of getting increasingly faster (see Google Fiber), mobile connections haven’t exactly caught up yet.

What makes a website slow?

Let’s throttle a web page and see what takes forever to load, a real-life example. But real fast let’s go over what I’m talking about:

The Lingo:

What is throttling?: When you purposefully slow down a connection. This could be to reduce internet usage or to test page speed like what we’re doing here.

How is this being measured?: Feel like following along? Go to a website and right click the page and click “Inspect”. From there you want to click the “Network” tab. Inside of the network tab you will see several options. You are going to want to click “Disable Cache” and then to the right of that you want to select the “Fast 3G” option and refresh the page. The page will be running as if it were on a fast 3G connection, essentially you’re simulating being someone with slow internet. You’ll notice a significantly slower loading page and all of the files that are being loaded for it to be used.

Onto our test:

We’re going to use a commonly known website like Facebook in this example. What we’re going to run a test similar to what is described in the “How is this measured?” question. We are using a “Fast 3G” network with a disabled cache on Google Chrome.

The Results:

As with most blogs or websites, the most time-consuming things to load were images and JavaScript files. We had 1 image alone take 14 seconds alone that was a PNG and a Javascript file that took 12 seconds for time. The page overall took 31.77 seconds, which is way too long to wait for a website. Another kicker for sites that I’m surprised didn’t come up for Facebook’s case is CSS files. Some CSS files are absolutely massive and a lot of the time you don’t even end up using everything inside it so it becomes wasted space because it has to transfer the whole file over for the pieces that it will use.

What You Can Do:

1: Optimize Image Files:

This can be done either through Photoshop or through Jpegoptim for Jpegs and optiPNG for PNG images if you’re comfortable with your host’s terminal. There are also several free online tools available that you can use to optimize the different types of images you might have. It’s also worth noting that you should probably use the proper image type for its use case. For example, if you have an image on your website that is a PNG but doesn’t have any transparency on it, convert it into a Jpeg to help load times. Let’s say you have a graphic on your website that has only so many colors, a GIF image type might be right for that particular graphic.

2: Use G-Zip Compression:

G-Zip is a way to compress your site before its sent to your user. Hence reducing the overall file size. Heres a general idea on how it works.

Think of Gzip compression like the compressed .zip and .rar files you have on your computer, but the type your server uses to make your site load quickly for your visitors.

Gzip is another thing you would need to have your host likely enable and setup for you if you’re unfamiliar with your terminal.

3: Minify CSS & JavaScript

This is a big one… Massive CSS and Javascript files can have their file sizes reduced significantly with minification. What is minification you might ask? Its when you go to remove all unnecessary characters from your code. Like unneeded spaces or comments. Basically, you put all of your code on one line. Heres an example:

The above example uses CSS and JavaScript. While one is much more human readable than the other, they both provide the same results. But the minified file is smaller because unneeded characters are gone.

Keep your users happy, optimize your websites and web applications.

Know some more ways you could optimize a site to load faster? Feel free to discuss below!

5 Terrible Web Design Trends That Need To Die

By | Design | No Comments

Working in web design and development in Iowa I get to see a lot of interesting things when it comes to websites that need serious work. A lot of which are just dated websites with dated layouts, and terrible user experiences due to something just outright annoying. So here a few web design trends that need to die.

1: Autoplaying Music & Video

 

Nothing screams “leave this website” like a sound suddenly blasting through your speakers as you begin to load a page. Whenever something like this is asked about, I often recommend that you do not do it. Think of it this way, say it’s very late at night and you’re in bed with your significant other. You can’t sleep so you’re browsing the web on your phone or laptop looking for something. You begin to load a web page and lo and behold you have your volume turned up all the way and suddenly the web page is blasting music or auto-playing a video. You hit the back button faster than the flash but it’s too late, you have woken up aforementioned significant other. If you want media on your site; you should instead give your users the option to play it if they would like. This will keep your bounce rates low and keep you from causing an awkward situation when you’re browsing in a quiet place.

2: Websites Laid Out With Tables

I am actually surprised I still run into these; usually on really old websites or sites that were built on an old platform. Tables are meant to do one thing and one thing only: Organize data! Someone out of their mind decided that they should make it so the tables would have the ability to have an invisible border, and this spawned the to use tables as a tool for layouts. The reason why this is a horrible idea is typically these sites are not mobile-friendly and therefore mobile users are likely to just leave the site. You need to have a website that provides a great experience to mobile users (responsive design should be standard these days). In fact, this is so important that its worth mentioning mobile internet users surpassed desktops. That is very important fact, which brings me onto my next point.

 

3: Websites That Were Designed In Flash

This is another one that is related to mobile but also is as old as dust. It’s worth mentioning that most smartphones these days do not run flash. Not only that but Adobe themselves announced that they will no longer be supporting it. Hence it will become deprecated. The reason being is because modern web technologies like HTML5, CSS3, and Javascript are replacing it. Yes, Flash used to be awesome for displaying cool animations but these days it’s dated and easier to replace with lightweight alternatives. Another painful reality about Flash is the fact that many dated websites are still vulnerable to attack from a security hole Adobe patched years ago. Reason being is these Flash sites are probably still Flash sites because they have yet to be updated.

4: Way Too Many Gifs

 

 

Ok, gifs are awesome when you need to describe what you have to say on social media, and they are really making a comeback. However, a million animated gifs on one page is a terrible idea. Not only does it look horrible, but it distracts the visitors from the main content on the website. Assuming they didn’t smash the back button already. You can already assume that this can hurt the effectiveness of the site. Yes, websites like this do still, unfortunately, exist.

 

 

5: Sites With Separate Mobile Versions

Alright so you guys might burn me at the stake for this but I think we should evolve past having 2 separate websites. Us programmers have a few acronyms for when we do work. Some of them are KISS (Keep it simple stupid), YAGNI (You Ain’t Gonna Need It), and finally, DRY (Don’t Repeat Yourself). Why would you have two versions of a website if you could just simply make a single mobile-friendly version? There is no point in developing what is essentially two websites. I consider it to be inefficient and of course, breaks the DRY principle. You are indeed, repeating yourself with two sites.

Overall when you go to make a site you need to keep a few things in mind. User experience, design, and effectiveness. Those are the basics. Not all sites are future proof and many go neglected. Don’t let your site be one of those. Take care of your site with one of our care plans.

 

How Often Should I Redesign My Website

By | Design | No Comments

A mistake a lot of businesses make is that they see a website as one big project and say “Ok we have one! That’s done, whats next?” However, it should be noted that just having a site does not mean it will be stable, maintained, and stylish forever. Which means that you should have it reworked every few years so then you can adapt to the design trends of the future and keep up with modern security standards. In fact, we redesigned our website around four times. This is what the original GearSite website looked like:

 

 

But this is to be expected for an internet marketing company that does web design and development. How often should a regular business (not a web design company) update their site? If you want a quick answer, I would personally say update your site layout and function every 2-3 years. There are so many businesses out there that have websites that have not been updated in five, six, even ten years! This bothers me. It ruins the buying experience for many customers who would like to contact this business through their website, resulting in a high bounce rate. These high bounce rates are particularly present in mobile users because these sites aren’t usually new enough to be mobile friendly. A website that lacks a responsive design would definitely need a redesign to even be remotely up to today’s standards.

Lack of maintenance from web designers kills websites:

There is a point where technology on the server side, which is likely maintained by a system administrator or a team of system administrators, out paces the technology on the website. This causes the code on the site to become deprecated and eventually obsolete. This happens due to the continuous advancement of technology. If you wait long enough, the site will likely fall apart all-together depending on the technology that it’s built upon. A good way to tell if your website has gone stagnant is if it has broken forms, images not showing up, lack of responsive/mobile friendly design, functionality breaking. A stagnant site also increases the risk of viruses.

Proper website function should be tested frequently by your web designer. It should always be noted that websites are never a one-time deal and they should always be maintained. It is also recommended that you have the site backed up by your web host frequently. By doing that, it is possible to revert back to the backup should something happen that results in a site-wide failure.

Good maintenance should keep your site from needing a redesign

Like vehicles and homes, proper maintenance now can reduce the cost later. The lack of maintenance on a website and/or a cultural shift in design are what eventually leads to the requirement for a complete redesign. For example, if your website was built with flash, it is important that you contact a web design agency. Sites built with flash do not work on mobile and are very unappealing to potential customers. Making a site mobile friendly would also require a redesign. However, if you keep in touch with your web designer or agency and request updates when necessary, a full on redesign should almost never be necessary.

Why web design is important

We live in a digital age and a consumer’s trust is critical to lead generation on a website. That’s why a modern and functional design that has a good user experience is critical to online success. You don’t want the business of your customers to be turned away to a competitor because they represented their company better than you did. An appealing design coupled with excellent SEO creates a nearly unstoppable online presence that actively works to present your business in the best possible light.

 

In short, you would want your website to be reworked every two to three years. You could reduce the expense by having your web designer or web design agency do maintenance involves modernization over the months. This should help with the price when it comes to a major overhaul which your site will likely need down the road.

Where to Get Free to Use Media

By | Business, Design, Marketing | No Comments

A challenge many businesses face is finding media that they can use for free. It’s good to understand that you can’t just grab images off of Google. The reason being is because copyright laws and Licensing can get in the way, along with possibly get you in trouble. So I’m going to be writing this article telling you where you can find free to use images that you don’t need a to attribute credit to (CC0). Even images that you’re allowed to use commercially, and if you wanted to you could modify the images as well. Not only will I tell you where to find images, but I’ll also tell you where you can find things like icons and videos that you can use on your website or other media like print and social.

Free to Use Images:

Pixabay:


Pixabay is my go-to website when it comes down to free to use images that I do not need to attribute for. They have a very large selection of images on the web that photographers around the world contribute to. Not only that but they also have several vector graphics on there as well help convey a message to your customers. You can freely use modify and distribute these images. The only stipulation is that if an identifiable person is placed in a bad light or in a way that people may find offensive you cannot do that unless they give their consent. Meaning you cannot use them for something pornographic, unlawful, or immoral. Pixabay is an amazing resource when it comes to free to use images. I encourage donating to the authors whose images that you download the most. You can do this by clicking the coffee button under the profile picture of the author when viewing an image.

Pexels:


Pexels is another great website that has free to use images that have optional attribution. Pexels of course also says that the pictures are free for personal and even commercial use. The restrictions again are similar to that of Pixabay where you cannot represent the person that may be identifiable in the image in a bad light. They even encourage you to contribute your own images if they are high quality. You also have the option to donate to them which supports free to use images on the web. The button is at the bottom of their about us page.

Unsplash:


Unsplash is another website that you can use to download even more free to use images. According to their Manifesto, the concept was born from the pain that they as the creators had in finding great usable imagery. Just from looking through their library I can tell you that a lot of the images that they offer are high-resolution meaning that they’re very good quality. And like Pixabay and Pexels they offer a Creative Commons Zero license.

What you can’t do with any of these images:

You cannot portray recognizable people in photos in a bad light without their permission. If there are any trademarks, logos, brands, or anything else related to a different company depicted in the images (Like a Coca-Cola sign), that does not mean you could suddenly go about using that company’s logo. You will first need to ask for permission from the company.

Videos:

Pexels Videos:


This is another awesome place for you to find videos that you might need for your website or blog. If you’re just stitching a video together and you need some sort of HD stock footage or you’re looking for something to be a buffer between your different scenes Pexels Videos might be the place for you. This is actually where we got the video background for our homepage. The videos have the same rules as the pictures stated above and are also under a CC0 license.

Pixabay Video Filter:

free to use video by pixabay
If you go to Pixabay’s website and you look at their search bar you’ll see that they have a video filter. You could use this video filter to find other free to use CC0 videos. Those of course, with the same rules that I mentioned above, do not require attribution. Also, like Pexels, Pixabay provides HD video that you can use for your projects.

Icon Fonts:

Icon fonts are typically used by web developers and designers to give websites and web apps a better user experience. Could you imagine a world without icons?

Font Awesome:

font awesome - free to use icon fonts

Font awesome is a massive icon pack along with a web designers best friend. We use them quite often for many of the websites that we design along with web applications that we develop. What an icon is able to do is provide a better user experience along with conveying a message better.

Fontello:

fontello - free to use icon fonts
Fontello has a huge collection of icons on their website that could be integrated into your site or a web app. They give you the ability to choose whichever one that you want along with download your selection. Fontello does not also require attribution.

Why does it matter if media is “free to use”?:

It is technically stealing if you go to Google images and download an image that you end up using for a commercial purpose. This is called piracy. The reason why it’s illegal is that the original artist who created the image did not give you permission to go and take it off of whatever resource you took it from. That’s because the author is the original copyright holder even if there is no copyright symbol on the image. When you visit these different websites that I talked about the media that they offer is free to use on your own site. With attribution being recommended but not required. Using these sites keeps you away from hefty copyright fines that can cripple most small businesses. Decreasing risk and liability significantly, that’s why it matters. You can learn more about the CC0 license here.

How do we use These Resources?:

As a web solution company, these resources offer savings that get passed down to the customers who would no longer have to purchase images or other forms of content. These sites are often used for our web design service and you can find many traces of us using these resources on our own site (Reverse image search). By using Google Images.

Good Use of Image

It’s All About Image

By | Design | No Comments

Everyone can appreciate a good image. Supposedly an image can speak a thousand words. I disagree. I think that images are better used with words. As developers, its easy to see how an image can be used to make a clearer point, or to add extra flair to a web page.

Proper Image Context

Being selective with images is key. You never want to use an image out of context. In other words, you wouldn’t use a picture of the Mona Lisa when discussing the differences in dog food brands, just because you think the Mona Lisa is pretty. It’s okay to get picky when deciding on images for a site. You want to find an image that properly conveys your purpose. Take GearSite for example. We used plenty of pictures in our site, but we made sure they all made sense in context. We mainly used pictures that show our design process, our staff, and our location. These all help to better illustrate our points. Using images related to your business or topic of conversation are crucial to an exceptional site.

File Size

Balancing quality and load time is also important when selecting an image. We all know that the higher quality an image is, the better it will look, especially when displayed on larger devices. But you have to offset that quality with file size. Making file sizes to large can cause several problems. Using large images can slow down your load speeds, making it annoying or frustrating for your customers. Large load times can turn customers away from your site, costing you sales. The larger the file sizes the more space your site takes up on a server. The last thing a system administrator needs to deal with is a lack of space and the last thing you want is to be griped at by said administrator.

Images are incredibly important, especially in websites. A visual can help convey a complicated topic, or it can serve to make your site a little more decorated. Either way, selecting the proper images, and balancing the quality with the file size are integral for building and maintaining a successful, and profitable site.