Web Design Archives | Jen Lew Marketing & Web Design | Jen Lew
396
archive,category,category-web-design,category-396,ajax_fade,page_not_loaded,,select-theme-ver-3.6,wpb-js-composer js-comp-ver-5.2.1,vc_responsive
Facebook News Feed Algorithm Website Speed Matters
Facebook News Feed: Website Speed Gets Higher Priority

Adapted from Jon Loomer 

Rolling out Facebook is constantly tweaking their news feed algorithm. The algorithm helps determine what users see and what they don’t, all in an effort to make the Facebook user experience is engaging and addicting as possible. The latest impact of the algorithm to the Facebook news feed: Website speed.

The company does note that under the new system, it’s possible that a slower site will see less referral traffic from Facebook, and is helpfully sharing tips for developers to improve their loading times.

This continues a trend for Facebook, putting an emphasis on website speed from a mobile device. They realize that 40 percent of users abandon after waiting more than three seconds for a page to load. This behavior was at least partially behind the development of Canvas and Instant Articles, which provide publishers an instant-load alternative.

Let’s take a closer look at the change to the Facebook news feed algorithm, as well as some of Facebook’s recommendations to keep your content at the top of the feed.

News Feed Update Favors Website Speed

Here is the exact update, according to Facebook:

With this update, we’ll soon take into account the estimated load time of a webpage that someone clicks to from any link in News Feed on the mobile app. Factors such as the person’s current network connection and the general speed of the corresponding webpage will be considered. If signals indicate the webpage will load quickly, the link to that webpage might appear higher in your feed.

As stated above, this update appears to impact mobile only. A slow load time does not guarantee low priority in the news feed, just as a fast load time does not guarantee high priority. But it is one of many factors that Facebook will consider.

While they don’t come out and say it, this will likely mean that Facebook will ultimately favor Instant Articles (also speculated by Sarah Perez of Tech Crunch here).

Instant Articles present an alternate version of your web page that is hosted on Facebook servers. As a result, it loads instantly, which — in theory — provides an improved user experience. It would be easy to assume that such articles will get a boost.

Many publishers remain skeptical of the format due to the loss of control. While it isn’t easy to adjust, you must consider the increased views and improved the user experience when measuring value to the user and your brand.

I use Instant Articles. While I’m not bullish on the format, I consider it a necessary adoption for the time being.

When Will This Roll Out?

Facebook’s updates tend to be gradual, and this is no exception. In their announcement, Facebook says the update will be rolled out “gradually over the coming months.”

How much of an impact will this make to your page and brand? It’s impossible to say. But it would be smart to take a close look at whether the speed of your website can be improved in the interim.

Facebook Recommendations to Improve Website Speed

Facebook offers the following 10 website speed best practices to give your links a fighting chance in the news feed:

  1. Minimize landing page redirects, plugins, and link shorteners
  2. Compress files to decrease mobile rendering time
  3. Improve server response time by utilizing multi region hosting
  4. Remove render-blocking javascript
  5. Use a high-quality content delivery network to reach your audience quickly
  6. Remove redundant data that does not impact how the page is processed by the browser
  7. Optimize images to reduce file size without diminishing visual quality
  8. Reduce the size of above the fold content to prioritize visual content
  9. Use asynchronous scripts to streamline page render time
  10. Dynamically adjust the content for slower connections/devices

If you have a tech person who manages your website, pass this on to them and make sure that you’re doing all you can to minimize load time. That’s what I did!

Tools for Testing and Improving Website Speed

I appreciate that Facebook provides several tools to help us test and improve the speed of our websites. Here are the five tools that they recommend:

PageSpeed Insights: This is a Google tool that runs a test of both a desktop and mobile web page.

PageSpeed Insights

What’s nice about this tool is that it provides a list of specific recommendations for improving the speed of this page.

PageSpeed Insights

Note that you get recommendations for both desktop and mobile. The focus of Facebook’s news feed algorithm update is mobile. However, there’s no reason to ignore the performance of your website on a desktop.

This is actually Jon Loomer’s site speed tool of choice he finds it to be much more helpful and user-friendly — particularly for the non-techie — than the others listed below.

Page Speed: This is just a Firefox add-on that allows you to easily test the page you are currently looking at through PageSpeed Insights.

PageSpeed Insights

YSlow: This is a free Chrome extension from Yahoo! that provides site speed recommendations.

YSlow

The program feels outdated, but it does the job.

WebPagetest: This tool runs three tests before showing a “waterfall view” of load performance and an optimization checklist.

WebPageTest

This tool also has an outdated feel and will be overwhelming to non-techies, but that’s why you should send it to your tech person.

Dotcom-Monitor: This tool runs tests in 23 locations and seven browsers to spot weaknesses.

Dotcom-Monitor

This tool runs tests twice as the speeds for the first and second visit are often different.

Your Turn

I’ve spotted areas of improvement for my website thanks to these tools, and I’m hoping to get things cleaned up prior to Facebook’s update. Have you tested your own website yet? What are you seeing?

Let me know in the comments below!

Wordpress Transfer
How To Transfer Hosting

Step 1: Back Up Your Website’s Files

FTP-Transfer

The very first step of any project such as this is to back up every aspect of your site. This step is good practice before any major change but it is also a requirement of migrating your WordPress installation.

There are many plugins out there that will completely backup your site for you. This backup however, requires a more manual approach. Using an FTP program (such as FileZilla), connect to your web host and copy all files under your website’s directory to a folder on your local computer.

This includes the .htaccess file that is set to be hidden. Consult your FTP program’s help file to have it display hidden files if you are unable to see this file.

Depending on the number of media uploads you have in your site, this could take some time. While this download is underway we can begin step two and make a copy of your database.

Step 2: Export The WordPress Database

Database Export

Exporting your database is a simple process that only requires a few steps to complete. Login to the cPanel account of your web server and open the phpMyAdmin application. Select the database that contains your WordPress installation from the list on the left hand sidebar and once selected click on the Export tab on the navigation menu.

The default settings of a Quick export and the SQL format for the export are sufficient for what we need. Click the Go button and the database export process will begin and a file will be downloaded to your local computer.

Once the database export and the FTP transfer of your files have both completed, you are ready to move onto the next stage.

Step 3: Create The WordPress Database On Your New Host Server

Before we can begin the migration to the new web host, we need to create an environment for a WordPress installation. To do this you must create a database that you can import your SQL data into.

Login to your new web host with the user credentials they have supplied you and connect to the cPanel software. For our guide we will be using the MySQL Databases application. If your web host doesn’t have that application running then you will should contact their support team to discover their method of creating new databases.

The steps to create a database are quite simple:

  • Open MySQL Database and create a new database with an appropriate name for your website.
  • Create a new MySQL user (with a secure password).
  • Add this user account to the new database and grant it All Privileges.

Write down the database name, the new MySQL username and its password. You will need them soon.

Step 4: Edit the wp-config.php File

Browse to the folder on your local computer where you downloaded your website files to. In that folder there is a file called wp-config.php that controls the access between WordPress and your database.

Make a copy of this file and store it in another folder on your local computer. This is necessary for restoring the changes we are about to make should something go wrong later.

Open the original version of the file with your favorite text editor and make the following three changes:

1. Change The Database Name

Locate the following line:

1 define('DB_NAME', 'db_name');

The db_name portion of this line will currently be set to the MySQL database name of your old web host. This must be changed to the name of the new database you have just created.

2. Change the Database Username

Below this you will find the line:

1 define('DB_USER', 'db_user');

In this line you need to change the db_user portion from the username of your old host to match the new username you have just created.

3. Change The Database User Password

Finally, edit the third line:

1 define('DB_PASSWORD', 'db_pass');

As with the others the db_pass section of this line must be changed to the new secure password you created for your MySQL user.

Save wp-config.php and close the file.

Step 5: Import Your Database

Database Import

Now that you have a new database to work with we can begin the import process.

Launch phpMyAdmin from the cPanel software on your new server and select your new database from the list on the left hands sidebar. Once it opens select the Import tab from the navigation menu.

In the File to Import section click the Choose File button and select the SQL file you exported previously.

Un-tick the Partial Import check box, make sure the format is set to SQL and then click the Gobutton. The database import will now begin.

The time this import takes varies depending on the size of your database. You should receive a message informing you of the success of the import when it has finished.

Step 6: Upload The WordPress Files To Your New Host

Now that you have the new database prepared and you’ve reconfigured the wp-config.php file, it is time to begin uploading your website’s files.

Connect to your new web host using your FTP program and browse to the folder that your website is going to be held. If this is the primary, or only site being installed on this web server then uploading the files to the public_html folder is the usual directory.

With the remote directory selected you can upload your website files that should now include the updated version of wp-config.php. As with the earlier download, this process can take some time.

Don’t delete these files from your local computer once the upload finishes. They are still needed until the final steps have been completed.

Step 7: Linking to New URL & Defining New Domain

One issue people always seem to have when moving their site is that they’ve added links to other posts on their site or inserted images directly by pointing to a URL on the server, causing these to break when moved over to a new domain. If you want to quickly and easily search for any instances of your old domain name and replace with the new name I (AJ Clarke) suggest you take a look at the Search Replace DB script on github. This will allow you to do this with great ease. Just make sure you DELETE it when your are done (for security reasons).

Make sure you are running the search and replace on the new domain you are transferring the site to not the old one.

Changing Site URL: By doing a search and replace for the old domain and replacing with the new domain you’ll also be altering the site_url and home url values in the database (Changing the Site URL) which will ensure that when you try to log into your site on the new domain it doesn’t try and redirect you over to the old domain.

* This small subsection was an added note by AJ Clarke.

Step 8: The Final Touches

This step actually includes two separate things with (potentially) several days between them.

Before you can use the site on your new host you will need to reconfigure your domain’s DNS settings. They will be set to point to your old host and you will need to point the correct records to the new server IP address.

This process will depend on where you have your domain registered. The details of completing this process are too varied to discuss in this post, but your domain registrar should have all of the details you need to make this change.

DNS changes can take up to 48 hours to fully propagate. It’s best to do this at a period when you expect lower levels of traffic. During this 48 hour window you should avoid making any changes to your website as you may be changing the old version of the site.

After the 48-hour period has expired you should now be accessing the new web host when you go to your website. It’s at this point you can connect to your old web host to delete the files and database. You should still have a local backup copy of these files and the database export, along with the original wp-config.php file in case you need to roll back the migration. It can be a good idea to hold onto these files for a an extended period just to be on the safe side.

North Fork Web
WordPress 4.4 Clifford Update

WordPress 4.4 ‘Clifford’ focuses on responsive design and includes new Twenty Sixteen default theme.

wordpress-logoVersion 4.4 of WordPress, named “Clifford” in honor of jazz trumpeter Clifford Brown, is available for download or update in your WordPress dashboard. New features in 4.4 make your site more connected and responsive. Clifford also introduces a new default theme, Twenty Sixteen.

Twenty Sixteen

Twenty Sixteen, is a modern take on a classic blog design and was built to look great on any device. A fluid grid design, flexible header, fun color schemes, and more, will all make your content shine.

Responsive Images

WordPress now takes a smarter approach to displaying appropriate image sizes on any device, ensuring a perfect fit every time. You don’t need to do anything to your theme, it just works.

Embed

Now you can embed your posts on other WordPress sites. Simply drop a post URL into the editor and see an instant embed preview, complete with the title, excerpt, and featured image if you’ve set one. We’ll even include your site icon and links for comments and sharing.

In addition to post embeds, WordPress 4.4 also adds support for five new oEmbed providers: Cloudup, Reddit Comments, ReverbNation, Speaker Deck, and VideoPress.

For the Love of Type

North Fork Design TypeDear Small Business owners,
For the love of Type, please use the same font on all of your business collateral. This means that logos, invoices, printing materials and advertising should all look similar and your logo or business name should be the same font everywhere.
Sincerely,
@jenlew

 

10 Essential Features of Every Good Business Website

North-Fork-Web-DesignIn my experience as a web designer, business owners value their website as the most important tool to maintain and keep customers. Sometimes all that is needed is a fresh design or adding new features to an existing site to make a world of difference.

I have put together a list of what I think are the most important features for a small business website.

Each of these are designed to improve your website or give you a list of key ideas for to get started with a new website. I hope you find this list valuable.

1. CLARITY

Do keep it organized, concise and easy to use. Stick to the basics when it comes to navigation and pages on your website. Pay attention to keywords and the most important questions your customers need answered. Leave the details for product descriptions and information.

It is important to be sure that your website is setup in a manner that clearly guides your visitors. You want their eyes to follow a path, encouraging them to view and take action on specific elements. Think carefully about what your marketing goals are for your website.

Don’t become overloaded with information because of all the extra ‘small additions. Before you begin developing your website, make sure the design, content and navigation is laid out in a neat, clean and easy to follow manner.

2. IMPORTANT BUSINESS INFO

Do include name, phone, address, social media links, newsletter sign up and any important information so that customers may find you, call you and contact you.
I am always surprised at just how difficult it is to find the phone number for the restaurant I want to order from or the hours my favorite store is open until.

Don’t bury the info. This critical business information should be visible on the front page. Depending on your business you can decide if a phone number or email address are important but always offer hours and/or contact links as quickly as possible.

3. LINKS TO FIND YOU

Do offer links to find you on social sites, and to contact you via email through a contact page. This is important, a contact page is one of the most important pages on your website. It is the means by which customers can contact you directly without leaving your site. You can also add social links, newsletter sign up form, hours or anything of value that your customers will appreciate.

Don’t think that just because information is on one page of your website it doesn’t need to be on another.

3. TECHNOLOGY & SPEED

Do think about technology. How your website is built is as important as how it looks. Not every web designer thinks about speed, the amount of photos or content on your site. You may want to update the site by yourself or staff and you may need the website to grow with your business. If you create a site by yourself using Wix or Squarespace be sure the templates will grow and show off your business in the way you need it to.

Website speed is important. The last thing you want is to have your website visitors to close your website before it even loads. Website speed is also important for SEO; Google will penalise you if you have a slow website. I’ve listed a few factors which may affect your site speed:

  1. Server location. It’s best practice to have your web server as close to your country as possible.
  2. Large images. Where possible, reduce the size of images. If you have a spot for an image that is 200×200, then make sure you resize that image to 200×200. Some content management systems such as WordPress automatically compress and resize the images for you.
  3. Inline CSS. This one may be slightly technical. Avoid using inline CSS where possible. It is often best practice to keep all CSS in individual files.
  4. Minify CSS, HTML and Javascript. This is something that you may have to talk to your developer about. It basically means removing any unnecessary code that would take longer for a computer to read. For example; reducing comments, removing unused code, using shorter variable and function names, etc.
  5. Responsive design. Make sure your website is responsive for fast loading on small devices.

Google has a handy tool where you can test your site speed and get some ideas for improvement: https://developers.google.com/speed/pagespeed/insights/ Type in your website and see what results you get.

Don’t think that just because someone says they are a web designer or a tv commercial says a self managed site is easy for you to manage and maintain. Ask questions about

4. SEO [Search Engine Optimization]

This is the process of maximizing the number of visitors to a website by crawling and indexing the site so it appears high on the list of results returned by a search engine (Google). SEO will help you position your website properly so that your customers can find you easily when searching for the products or services you offer.

SEO has evolved over the years to consider more than just keywords.

Do pay attention to your target market and what they are looking for, you can more effectively reach and keep those visitors if you know that you offer what they want.

Don’t ignore the data. Get familiar with Google Webmaster Tools. I can’t recommend this enough.

5. NEWSLETTER SIGN UP / LEAD CAPTURE

Do capture email addresses on your website. Whether you send a newsletter every month or every season or never sent one before in your life. Email addresses of your visitors are your future customers. Be sure to add a plugin from your email service provider (constant contact, mail chimp, infusion soft etc…)

Don’t think that your visitors won’t give you their email. If they like what you have to offer, they will provide you an email address.

6. RESPONSIVE

Do have a responsive website. Responsive sites are fluid in movement so they are Mobile, Laptop, Tablet ready. This means that your website has the ability for the visitor to quickly navigate your site on every device. If you don’t know if your website is Responsive check it on Google Mobile Test.

Don’t ignore screen sizes. Even phones and tablets come in different sizes and everyone looks up information on their smartphones these days.

7. FAQ | FACTS | QUESTIONS

One of the key asks I have of every client is “What are the top 5 questions your customers always ask?” Each time I ask this question the clients eyes light up and they are shoot me at least 3 questions immediately and groan about how often they hear these questions. Well here’s your chance to answer them before they ask you.

Do provide a page with clear answers to popular questions about ingredients, materials, policies, requirements or opportunities.

Don’t be afraid of feedback and customer curiosity. Use those questions to help your customers get to know you better.

8. REVIEWS | TESTIMONIALS

Do provide testimonials and reviews. There are a number of ways to add these to your site. You can rely on plugins from social review sites (Yelp, Trip Advisor) and Linkedin or you can input these in a creative way throughout the site or on an individual page.

Don’t rely on the social sites to speak for you. Inform your visitors with information about you and your business.

9. ABOUT US

Do share with your visitors who you are and let them get to know you. It doesn’t need to be long but it does need to be warm and inviting. A simple sentence or two can do the trick. If you feel uncomfortable talking about yourself or providing a photo talk about the Why of your business – how it started or why it started.

Don’t disregard this opportunity to add content about your business that can enhance your search ranking.

10. DESIGN

Do be creative, but don’t let that creativity get in the way of function. Often a customer will have great ideas about design and imagery on a website but functionality is the key. Keeping a website simple to navigate and easy to load on multiple devices is the the most important.

Don’t make your visitors have to work hard to find your information.

I look forward to updating this post, as I finish this list I’m already thinking of a few more things to add such as blogging, navigation and calls to action.

If you have suggestions or ideas on what you think are important for a website let me know in the comments or @jenlew on twitter.