Using content to drive traffic to your site

Content plays an important role in driving traffic to your website. Content has many purposes like describing products on ecommerce sites, educating on sites like Wikipedia, entertaining on sites like YouTube, and socializing on sites like Facebook or Instagram. With millions of sites available today, content creators have to find creative ways to drive traffic to their sites.

“The best websites don’t just sell, they educate
and produce loyal visitors.”

Loyalty of users

Visitors don’t want to be overwhelmed with too much content. They want to be able to skim through sites to look for information relevant to them. When they find a site that relates to them, they will become loyal visitors and start to share with others. When they link to your site on their site or social media, this will increase traffic back to your site as others will be interested to see more.

Keywords and links

Adding blogs to your site is another great way to boost your SEO. The links will signal to search engines that your site contains relevant information to specific questions. Sprinkling keywords and links will further broaden your website’s reach. As search engines look through the web for specific words or links, your site will become more visible to others.

Mobile content

The mobile world is top priority related to users. You need to consider the readability of your content for mobile users. Format your content for small screens using bullets, subheads and infographic images. Using videos, social media shares and pictures help make your content bite-sized for users on the go.

Driving traffic back

Below are five sites that I have identified for driving traffic back to their site via strategies such as social media, email, signup forms and mobile app pop ups.

Home depot

While looking for some home improvement items on the Home Depot app, I placed something in my account cart. Later in the day I received an alert on my phone to remind me about the item I had left in my cart. While I didn’t purchase it, the mobile app alert did drive me back to the site to continue browsing for new ideas and price checking. After having a conversation about the items I saw on the app, we then drove to our local Home Depot. I honestly don’t think I would have thought about Home Depot during the chaos of the week unless I had received the mobile alert late in the day.

IKEA

I love IKEA and the way they advertise their products by displaying their merchandise in real life scenarios. We are looking into redoing a kitchen, and we always head back to IKEA for ideas on how to layout the room using the space we have. I don’t know if we will actually purchase our cabinets from IKEA, but the way they market certainly gets the creative juices flowing. I was looking through their site regarding room ideas for kitchens; later that day, within my Facebook feed, were the kitchens I saw while on their site. Brilliant on their part because I clicked on the link and spent another 30 minutes dreaming about the kitchen I wish I had.

Warby Parker

I wear glasses on my casual days, and I love Warby Parker for their price point and fun styles. Every time I receive an email about what’s new, I immediately click and go to their site to poke around. Although I didn’t purchase this time, I added a lot of frames to my favorites for future purchasing. Their emails, ads and pop ups are well done with their clean design and funky photos; they cause the user to want to seek out more. In addition, they always follow-up with emails after a purchase and I see them show up in my social media feed whenever I have visited their site.

Starbucks

Starbucks has figured out how to market to those who are frequent visitors. They entice me with challenges, popups on my phone when I am near a Starbucks’ location, emails to remind me that I have a free drink to use, or how I can earn more stars. This particular email didn’t get me to click through since it was for a credit card application. But usually when I receive a challenge email, it’s a quick click to get started from the email; and you can view in your app how you are progressing towards earning more stars. The Starbucks’ app makes it easy to add money to your account for more purchasing power, or in my case, easy to satisfy my teenager’s addiction to her latest ice tea craving while out with friends.

JCrew

A lot of sites have immediate coupons when you sign up for their email newsletter. It’s a great way for the site to capture emails for future campaigns in order to drive traffic back to their site. While visiting the JCrew site, I signed up to receive the savings; since then I have received several emails showing me new styles and sales that are available that day. They also market their other sites, such as JCrew factory, to theses captured emails. The signup form is a great way to make the user feel special for getting a deal and joining for future communications about their products and site.

 

Image quality and size

We have all experienced a site where the images take what seems like forever and a day to download. It’s frustrating and can lead to the user leaving the site. Large images take longer to download and by large I am not referring to the dimensions but rather the file size. It is important to make sure that the images loading on the site are small enough in size to download quickly as the site loads.

“47% of consumers expect a web page
to load in 2 seconds or less.”

 

Images have a way of bringing a user into the story you are telling, or selling a product the user wants. Crisp, high resolution images are a must to give the user a sense of texture and color. But you need to keep in mind the file size when saving your images, as well as, maintaining high image quality.

JPGs are the most common file type for images on the web. JPGs will maintain the colors, shadows and gradients of photos, because they have a large color palette to work with. JPGs can also be saved in several ranges of quality, allowing you to adjust these settings before saving. You are able to balance quality and file size to get exactly what you need.

Three things to reduce the file size of an image

• Reduce Image Size: Image dimensions
• Save Image for Web to Reduce File Size: File size
• Compress Image: Eliminate additional metadata

Using Photoshop, save your image by exporting and saving for web – File > Export > Save for Web (Legacy). Next you will be able to adjust the quality. Usually a quality setting between 60-75% will work best in file size with no noticeable difference in the quality of the saved image. It will sometimes require a little playing around to find the perfect quality to use. For further compression, an easy way to reduce the file size an additional 5-10% is with image compression apps. I use ImageOptim which is a tool that will remove hidden data in the image file. This type of app can remove additional color profiles and metadata that aren’t needed. It’s a quick and easy way to reduce the file size without losing the image quality.

Ready to get optimized?

Images on the web are more than just a picture. They give the user a visual into a story or an image of a product they are looking to purchase. Images are so important to the success of a site. But it’s important to find a balance in image quality and image file size so that your site doesn’t take a long time to load. If users start dropping from your site, this may affect your SEO.

To get started I chose one of Professor Akselsen images that were shared with us. To optimize this image, I started with the high-resolution photo and brought it into Photoshop. The original file was 900 x 1200 and 987KB.

Once in Photoshop, I exported the image, File/Export/Save for Web (Legacy) and put my quality at 75%. When I saved the image, it brought my file size down to 442KB.

I then brought my JPG into ImageOptim which was recommended in this week’s module. ImageOptim removes bloated metadata to make images load faster. Additionally it saves disk space and bandwidth by compressing images without losing quality. This brought my image size down to 418KB. It’s amazing how the image was cut down more than half in file size but was I able to keep the quality.

If you still need the image to go down in file size, you can choose to resize the image in Photoshop as well as try decreasing the quality when exporting the image.

Helpful tip:
Always remember to keep the original in case you start to lose the image quality you can always start over and play around with the quality or size.

 

Uploading to your website

To create a website, you need to upload your files to your web server using an FTP (File Transfer Protocol). The FTP will transfer your files immediately to view on your site. There are several FTP clients to use such as Fetch or Filezilla. With FTP clients such as these you are able to drag and drop files from your hard drive to the hosting server location.​

What you need

To get started in uploading your files you will need the following information from your web host to get access to your site.

1. 1. Your username
   2. Password
   3. The hostname or URL where you should upload files
   4. Your URL or web address

Ready, set, go…

Next you will open the FTP client that you have downloaded to work with and following the instructions supplied by your FTP client.

• Put in your hostname or the URL where you should upload your files.
• You should be prompted for a user name and password. Enter them in the space provided.
• Select the correct directory for your hosting provider.
• Select the file or files you want to load onto your website, and drag them to your FTP client.
• Visit your website to make sure all of your files have uploaded correctly.

Tip: If your web host tells you that you do not have FTP access, you will have to use their FTP site to upload your files. Remember to check your website to ensure your files have uploaded correctly.

 

Designing with Responsive Web Design in mind

Responsive Web Design (RWD) is now the web design standard best practice. It uses flexible layouts, images and CSS (Cascading style sheets) to design web pages that detect the user’s screen size and page orientation. Responsive design makes sure that the design works on all devices which utilize various screen sizes such as: mobile, iPad or desktop. What The Heck Is Responsive Web Design?

When the iPhone was introduced, developers were tasked to build separate sites to accommodate whether a user was on a desktop or mobile device. This caused a lot of additional costs and frustrations. Web designer Ethan Marcotte developed “Responsive Web Design”, publishing an article in 2010 that discussed the ever-changing world of web design. Responsive Web Design Marcotte explained that building separate sites for every device would not be sustainable in the fast-changing environment of web development. He came up with a new concept called it responsive design which calls for flexible and fluid layouts that adapt to any screen size.

Getting started

Choosing to design with responsive web design methodology is essential, so that your site will be presented properly on any device. Responsive design will give the user a seamless experienced as well as increase how your site will rate in SEO algorithms and be visible in search results. Is Responsive Design A Ranking Factor?

Whether you are the designer or looking to use a template to create your site, basic understanding of how a site will be built is important. A successful site is the marriage of both design and code, each depending on one another to create a seamless experience. While designing, you have to envision each user experience and how your design/content will be displayed. If you chose to create your site with a template, many hosting sites contain templates which are responsive and easy to use. These pre-programmed templates will help save time and money as you develop your design.

Helpful tip:
Remember, as you put your content together, keep previewing your site. It is important to see your site in the different screen environments to make sure the user experience flows well between each screen size. 

We are in this together

Designers, coders and savvy internet users will all benefit from the basic understanding of how each phase works together. Both design and code need to build upon each other in order to have a final product that will create a beautifully built user experience. In this new responsive design environment, all hands need to understand each stage of a site’s growth. Together we will create a beautiful internet experience. Designing for a Responsive Web