Does it really matter if your site is “Mobile Friendly”?

Yes-We're Mobile FriendlyYup, it does really matter. A lot. There are two reasons. The first is that a mobile friendly site looks and works a lot better for your visitors. I’m sure you’ve experienced viewing a non-mobile friendly site on your phone. Even with a big phone screen, it’s hard and frustrating to navigate a non-mobile friendly site. On a mobile friendly site visitors easily access the content, and effortlessly navigate ecommerce offerings and purchasing funnel.

The second reason is Google. Beginning April 21 2015 Google announced that it was “expanding its use of mobile-friendliness as a ranking signal”, and that the change would “have a significant impact in Google Search results”.  What this means is that if your site in not deemed mobile friendly by Google, your search ranking will decrease, which means customers may not see your site listed when they search for relevant keywords. Or your site may be listed below a competitor. Which would be not good at all.

So, it’s important, even critical, for your site to be mobile friendly.

What does Mobile Friendly really mean?

Mobile friendly means that your site gives a good user experience when viewed and interacted with from a mobile device. Things like:

  • Formatting the content so the visitor only has to scroll up and down, and not side-to-side on a tiny screen
  • Making the text big enough to be readable on a phone screen
  • Spacing links far enough apart so that a finger can click just the link desired
  • All of your site’s cool features work
  • And lots of other technical stuff the Googlebot cares about

So, how do you know if your site is mobile friendly?

To determine the mobile friendliness of your site, do these two things: First, the quick and dirty method: look at your site on your phone, or, on a larger device, squish down your browser window until it’s as narrow as column as it can be. (This is how it looks on a large phone). Now, try to navigate your site. You’ll know if our site is NOT mobile friendly – it should be obvious because it will look bad and be hard to use. Here’s an example of a site that is not mobile friendly:  

This page is not mobile friendly – See how the text is cut off on the right side?

 

 

But even if it looks good to you, it might still have non-mobile friendly components, so that’s why you next need to ask the expert, Google. Use Google’s free tool to analyze your site. Plug in your urls and Google will tell you how it sees them.

Here’s an example of results you don’t want to see:

mobile-friendly-test

 

If you don’t pass the Google test, don’t despair. With WordPress it’s relatively easy to modify the theme to make it mobile friendly, and there are also some free WordPress plugins to help with this.

For new sites built on WordPress, there is no need to worry. Any modern WordPress theme will be mobile friendly out of the box.

Optimal Way to Host WordPress

Mark Jaquith  Next Generation WordPress Hosting Stack   WordPress.tvThis post is based on Mark Jaquith‘s 16 October 2014 talk Next Generation WordPress Hosting Stack.

WordPress is dynamic and so every time a page is rendered it is created on the fly. Systems like Movable Type used to prerender all their pages but with large (more than 1,000 pages) WP site this is impractical.

Speed Considerations

You can measure speed of download using the Network Tab in Inspect Element of Chrome.

 3 seconds + : Performance Emergency, you will lose users

1-3 seconds : Users will be annoyed but most will stick with this suboptimal experience

.5-1 second: May seem a little bit slow but not noticeable

250-500 ms: Good, users engaged

<250 ms: FAST

<100 ms: INSTANT

Mark mentioned that he managed to get his site http://havebabyneedstuff.com/ display in 29 ms.

WordPress Hosting for Performance

You need to do it yourself using a VPS (Virtual Private Server); Mark recommends Linode and Digital Ocean.

  • PHP-FPM – use to run PHP on Nginx: http://php-fpm.org/
  • Latest version of PHP (5.5 at the time of writing), much faster than previous versions, has a built-in opcode cache.
  • HHVM (HipHop Virtual Machine) Alternative to PHP-FPM, project by Facebook. Amazing performance benefits and fully supports WP. Set up site monitoring because still a bit unstable, but can be 4-5 times faster than PHP-FPM
  • MySQL
  • Caching – Nginx is Mark’s preferred way to cache, see his set up here. HTML output caching is crude, object caching is elegant. WP supports this in core, by default it uses object caching. Mark recommends using redis for caching (Pantheon is the only WP hoster currently using this).Also use the PHP caching functions such as wp_cache_set() to cache. The rule of thumb is to cache any data that’s expensive to build or that talks to remote servers.Here’s Mark library that wraps the WP Transients API (option for soft expiration).
  • Measuring – Mark uses New Relic for analyzing why a site/query is slow.

Recommended WordPress Stack

Nginx (with caching)
PHP (HHVM)

MySQL
Redis

Update from WordCamp San Francisco 2014

WCSF14-4-of-7I had the wonderful opportunity to attend WordCamp San Francisco 2014, the year’s largest conference about WordPress.
This event is one of the highlights of my year – it’s exciting to meet new people, and to hear about cutting edge developments in the World of WordPress. I recommend watching Matt Mullenberg’s (WordPress founder) keynote speech:

Some notable ideas

Screen Shot 2014-06-23 at 10.10.30 AMComing up in Version 4.1

  •  Improve the editor features.
  •  Improve the performance of drop-down menus of users and posts (ie. the page parent selector), most likely by implementing Select2.
  •  UI on the user profile screen which displays a user’s logged in sessions and allows them to be logged out.
  •  New default theme, Twenty Fifteen.
  •  Improved UI for installing and updating plugins and themes (async installation), possibly core too.
  •  Improvements to media management on mobile devices.
  •  Ability to install new languages after install.
Overall it feels as if in 2015 WordPress is about to undergo a transformation in internationalization and flexibility – a lot of fast change is ahead!

Why we recommend our clients switch website hosting to WP Engine

wpengine logoMany of our clients come to us with websites hosted with companies like HostGator, Bluehost, HostMonster, and even GoDaddy. We currently recommend their redesigned site be moved and deployed at WP Engine.

Why WP Engine?

There are several reasons why WP Engine is a superior value for a larger, more complex website, and it is a better choice than a typical shared hosting provider.

Pros

WP Engine specializes in hosting WordPress websites

Joomla-Drupal-WordpressThat’s all they do, and they are very good at it. They don’t provide email or DNS services. They don’t host html, Drupal, Joomla, or Cold Fusion sites. Their architecture is optimized to provide the best security and performance for the unique requirements of WordPress. Many hosting companies claim they support WordPress. But when you’re hosting WordPress, you need specific support. If a plugin breaks, or a theme file doesn’t work, and you’re hosted with a typical hosting company, they’ll throw up their hands and say We’re not responsible! We just provide the server and the bandwidth, buddy. But at WP Engine,  their staff consists entirely of WordPress experts, so they will help you track down and troubleshoot your WordPress issues. 

Security

cyberattackAs WordPress continues to grow to represent a significant percent of all websites it becomes an increasingly popular target for hackers, malware, spammers, and other unwanted attention. A hacked site can modify your content, grab email addresses and other information about your users and subscribers, use your server to send out spam, have your site show up in browsers with black list warnings, and may result in your hosting provider shutting the site down. Your security on typical shared hosts can be compromised not only through weaknesses in your site, but vulnerabilities in other sites running on the same server. WP Engine provides separate file system roots for each customer so that hackers can’t get into your site through the back door. And should your site get hacked, their hosting package includes the services of the best-in-business Succuri.net that will clean out the malware, restore your site, and monitor it against future incursions.

Performance

speedometer_fast-wallpaper-1024x768No matter what you do on your individual WordPress site to optimize page-load performance you can only improve it so much on a typical shared hosting provider. WP Engine takes WordPress performance seriously and has created a custom optimized architecture for their servers that ekes out every last bit of speed for your website, things that you just can’t do on a typical shared hosting service. Google says they lose 20% of their traffic for each additional 100 milliseconds it takes a page to load, so reducing your page load time from 3-4 seconds to 1-2 seconds makes a big difference in how far a customer will travel into your site to get the information they need. WP Engine provides this optimization, you don’t need to install, configure and maintain local caching plugins. Here is an example of a before and after. The original page on HostMonster took 4.82s for the first part of the page to show, and 1.61 seconds later it finished loading for a total of 6.43s for the full page to render. After moving that site to WP Engine that page load time dropped to 3.87 seconds, almost a 40% decrease in load time.

Page initially loaded in 6.43 seconds

Page initially loaded in 6.43 seconds

After moving site to WP Engine page load time dropped to 3.87 seconds, almost a 40% decrease in load time

After moving site to WP Engine, page load time dropped to 3.87 seconds,  a 40% decrease in load time

Convenience

easyOnce a website is in production, we recommend making a copy of the production site as a “sandbox” or staging site where you can experiment with updates, theme changes, new plugins, etc. without affecting the public-facing production site. Keeping the staging site synced up with the production site so you are testing the latest version of the site can be a problem. WP Engine recognized how important this is and provides a one-click button to make a copy of your site into a staging area. It only takes a couple minutes to make the copy so you no longer need to worry about syncing, you just make a fresh copy when you want to update the sandbox. And when you are finished and the changes on the staging site are approved, another single click copies your updated site to the live production site.

Cons

Price

Green Dollar SignWP Engine hosting is more expensive than typical shared hosting plans and you also pay separately for each website. Typical shared hosting plans currently run about $12-$15/month (after the initial discounted introductory price expires). WP Engine charges $30/month (but this cost includes the Sucuri.net malware detection, alerting, and cleanup services that you would pay $7.50/month for if you were not at WP Engine). So really the difference between WP Engine and a typical shared hosting plan is about $10/month if you only have one website.)

WP Engine only hosts WordPress websites, no domain registration or email accounts

no_email_iconA typical web hosting company like GoDaddy, HostGator, or Bluehost can provide, in addition to web hosting,  your email accounts, and domain registration. When you move your website to WP Engine you will have to have have another supplier provide the domain name hosting and the email services for your domain.

But if first impressions are important for your company, your website’s reliability and performance should matter to you. I can’t think of a better way to get that than by hosting your WordPress website at WP Engine.

How to display videos on your WordPress website

It's super easy to embed videos, images, and other content into your WordPress site. With WordPress, you don't have to use the html embed script from the service.

To embed video or sound from a cloud service like YouTube into a post or page all you need to do is to paste the URL to it into your content area

It’s super easy to embed videos, images, and other content into your WordPress site. With WordPress, you don’t have to use the html embed script from the service.

To embed video or sound from a cloud service like YouTube into a post or page all you need to do is to paste the URL to it into your content area

Read more

WordPress site migration, copying your site and moving it

There are several reasons why you might want to copy your website, you may want a

There are several reasons why you might want to copy your website, you may want a “sandbox” to experiment on without affecting the public-facing production site, or you want to change hosting companies to get a better deal, faster performance or more functionality. Also having a complete copy of your website is a great insurance policy should something happen to your host and your site is lost.

Read more

Trilliant Inc. – featured client website

Trilliant Inc.'s website is featured in our Portfolio section. It uses a customized WordPress theme to present a graphically rich experience for a multi-national, multi-lingual website. Although the website contains many pages of content about the organization, its technologies and products, the site is easy for the client to maintain and update while maintaining consistency in navigation and display.

Trilliant Inc.’s website is featured in our Portfolio section. It uses a customized WordPress theme to present a graphically rich experience for a multi-national, multi-lingual website. Although the website contains many pages of content about the organization, its technologies and products, the site is easy for the client to maintain and update while maintaining consistency in navigation and display.

Read more

How to see what your Website looks like on a Mobile Device

NoDiamonds_iPhone4-150x279pxMobile devices like smartphones and tablets continue to increase their already significant share of website views. According to Walker Sands, a rapidly growing public relations and digital marketing agency for B2B and technology companies, its most recent Quarterly Web Traffic Report found 23 percent of total website visits in December 2012 derived from mobile devices, an 84 percent increase over December 2011, and a 283 percent increase over January 2011.

You should know how your website will look and work on a variety of these devices. Do you need a Responsive design that scales appropriately when the browser width is reduced? Do you need a separate mobile theme or website? Do your media files display on iOS devices?

You could build a collection of iOS and Android devices to use for testing your website, or you could use a convenient online tool at the Mobile Web Transmogrification Portal. According to the website:

The Mobile Web Transmogrification Portal is the only online simulator that spoofs user agents and allows you to surf the mobile internet from the comfort of your desktop browser.

TAKING A SCREENSHOT ON MOBILE DEVICE

This online emulator is also great if you need to capture a mobile device screenshot of a web page since you get a picture of the web page and the mobile device itself. The alternative is to make a screenshot on the device and mail the file to yourself (see: How to capture a screenshot on an iPhone/iPad or Android smartphone).

Here’s how the online emulator looks
(click here if you want to go to the live version on their website):

NoDiamonds_Samsung

click this image for a larger view

Watercourse Way Bathhouse Spa – featured client website

watercourseway_homeWatercourse Way Bathhouse Spa’s website is featured in our Portfolio section. It uses WordPress as a CMS along with many WordPress plug-ins and some of No Diamonds’ own customizations to create an inviting visual exploration of the facilities and an extensive presentation of services and rates.

Why It’s In Our Portfolio

watercourseway_home_samsung

  • Watercourse Way’s website is graphically rich and optimized for both desktop, tablets, and smartphones.
  • The theme is responsive, adjusting content and images to fit the browser window,
  • In addition, a separate smartphone theme was built to provide the best experience with the smaller viewing area of smartphones and the slower bandwidth of the cellular networks (click the image to see a large view),
  • Lightbox popup windows were used to show greater detail of the tub room facilities, clicking on a photo opens an expanded view/slideshow of the photos on that page.
  • No Diamonds created a shopping page for Watercourse Way’s customized Gift Cards letting the customer select options and purchase online.

Gunmetal Truck MFG skateboarding site Featured Portfolio Website

Gunmetal Truck’s website is featured in our Portfolio section. It uses WordPress as a CMS and a blog. No Diamonds has customized an out-of-the-box ecommerce solution to provide a graphically-rich shopping experience and a seamless cart summary via a javascript popup window.

Gunmetal_home_full-length

Why It’s In Our Portfolio

Gunmetal Truck’s website features video clips of its products in use and a graphically-rich shopping experience with a javascript popup window shopping cart summary.

 (click on the images below for a larger view)

  • Gunmetal_product-categoryThe homepage header features a large image of one of skateboard trucks that shows a different style/color each time the page is loaded during repeat visits,
  • The homepage also features the latest video blog posts showing off the products on the street,
  • The out of the box ecommerce shopping cart system was customized by No Diamonds to show an easy to understand cart summary in a popup window.

CGunmetal_product_detail with_cart_popup-window-500px

Contact Us

Let us know how we can help you: