Introduction:

In the last article we discussed about "Advantages and Disadvantages of Ecommerce Business".

“Doing The Same Thing Over And Over Again And Expecting Different Results”

This is what we call insanity. If you think that you are doing everything right but the desired result is still awaited, then you need to go back, test and then optimize your policies. We all have been ranting and raving about responsive themes, but we never dared to look beyond it. In this blog, we will discuss how to get high performance from your WordPress themes.

Gauging the performance of your Responsive theme

Choosing the size of a responsive web theme matters because it affects the end users as well as the web servers. Due to heavy weightage, server needs more time to get extra file and with each such file, extra milliseconds are added in the loading time. On the other hand the user have to wait till the total number of kilobytes are loaded. Apart from using Media Queries various WordPress themes now use several other techniques to respond to the browser's.

Being choosy pays off!

Designing a responsive website is more than just defining different number of columns in a website. This question was for all the websites designed for mobile users, without concerning the fact that these were CMS. Before choosing a theme you need to first go through the following set of questions:

Does your project needs a mobile development?

With the proliferation in the mobile devices it is highly unlikely for business owners with up to date market knowledge and trends to say no to mobile first technology. However, one cannot go on for adopting all kind of technological development. Though, earlier we had a choice for adopting mobile designs, but now with the advent of Google's algorithm it becomes crucial.

Read: Creating ​Mobile ​Responsive ​Design

How many steps do we need?

Performance of a responsive website depends highly on the screen it is viewed on. Responsive design does not mean that the screen should adjust on the mobile devices such as tablet, phablet or smartphones, wherein responsive means that your website must be fit to wide screen sizes. The best option is follow device-agnostic approach which focuses on web design instead of device functionalities.

Do you understand the layout and formatting of the responsive pages?

In order to craft a successful layout you need to display the elements one by one. Now, when it comes to wide screens we must make sure that the headings must be larger than the content, whereas when it comes to smaller screen the ratio drastically changes.

How to tailor your application for mobile devices?

Displaying content via multiple columns needs a particular hierarchical flow, as each page comprises of its own unique content and secondary content is the one which is displayed on more than one page. This content approach is difficult to follow while designing for mobile screen. You need to ensure that you need to remove the irrelevant content from the mobile screens. On contrary if you think that you need all those pages then draw out a proper methodology such as long scrolling to display you content. Further, as per thumb rule the elements which do not supports the title of the page is not the primary content.

Measure your Websites performance

Now after all the detailed analysis and study you have finally chosen a WordPress theme and have decided on the content placement and stuff, do not think that you have accomplished your goal. The next step is to know whether you did it right and is your website well accepted by users. There are numerous tools present in the market to gauge the performance of a website. However, you can count on Google Page Speed and for second choice keep Gtmetrix for analyzing the current performance of your website.

Read: 5 Best Things You Should Know About PHP 7

With 7 Google Page rank and Alexa rank 11, Gtmetix serves as an incredible tool for analyzing your website. Along with page speed results this tool uses YSlow ( a tool from Yahoo for measuring performance). Do not worry as you do not have to do much and all you need to do is to enter the url of your website to get a comprehensive performance report. Further, it allows comparative analysis for a healthy competition.

Poor performance!

Plugins can ameliorate the performance

One can certainly meter the performance of their website, however this leads to the crux: how to improve?

With a wholesome development of community existing for more than a decade have found solution of this unnerving questions. We have plugins namely auto optimize, WP Super Cache and several other which can work as a performance booster for your WordPress website. These plugins are easy to install and ready to use which have the potential to ameliorate the performance of a poor performing websites.

Present the cached version

Caching works as a performance booster!

As we know that every time a user enters a website, content is fetched from the server and then displayed on the browser. In case of static resources the data will fetched every single time a user visits the website. This is certainly not an optimal technique, as the server has to do a single task over and over again.

In order to optimize this functionality we have well engineered plugins such as WP Super Cache, which ensures that the users get to access the cached website which removes the unnecessary loading of content again and again.

I hope this might help you!

Conclusion:

The long and short of the complete article is that we need to pull up our socks in order to do reach another level of web development. There are a lot of optimization techniques for WordPress which one can harness to provide top notch solutions.

Author Biography:

I am Savy Nacion, working as a technology specialist in Markupcloud, PSD to Wordpress conversion company, based in Rochester, New York. He has over 10 years of experience in the technology industry.

Introduction:

Hey Guys! Last article was about "How to Install Ubuntu 15.04 Along With Windows 8 (Dual Boot)".

Unlike a conventional desktop oriented website, the one which has been created for the mobile screens is a lot more in demand. It is a responsive website which automatically adjusts itself to fit the screen of device that the site is being viewed on. All the content, whether it is the text, images or video get moderated to ensure best display on the screen under focus. Whether you're a publisher, a designer or a developer, taking care of your site's mobile responsive design is something that can render flawless experience to the targeted users. In this post, I'll be walking you through the vital steps that must be followed for building a fine quality mobile responsive design.

What kind of mobile responsive design are we going to create in this tutorial?

Here, I'll be creating a simple e-commerce product detail page for a t-shirt firm. So, while ensuring that the customers are able to make the purchases conveniently, we'll also be making the product review easy-to-access, followed by utilizing customer's location for enhancing the overall mobile shopping experience.

A look at the basic structure

It is essential to author a semantic HTML5 markup that will allow you to ensure completely manageable and fully accessible adaptive experiences. The reason for this being that semantic markup is fully portable and can be easily accessed on a variety of mobile devices, desktop browsers, tablets etc.

Coming to the individual steps for creating mobile responsive design

Step 1- Set the Viewport

While for a majority of non-mobile-optimized websites, most of the contemporary browsers set up a larger browser viewport, in case of designing a website using mobile responsive design, we'll be using viewport meta tag for setting the screen width to the device width as shown below:

<meta name="viewport" content="width=device-width, initial-scale=1" />

Step 2- Adding the flexibility to load the website content conditionally

Here, we'll be creating two new HTML documents for the auxiliary content viz: reviews.html and related.html. Unlike the default way in which the content is accessible via links available on the page, we can use a little bit of javascript for loading the content as and when user requests for the same or when the screen's resolution reaches a specific breakpoint.

Step 3- Use HTML special characters

As an attempt to decrease the need for background images, it is recommended to use HTML special characters. In this tutorial, I've used $#9733 for creating a solid star (★) and ☆ for creating empty stars (☆) for the product ratings.

Step 4- Include a clickable link within footer

Here, we'll use the tel URI scheme for including a clickable link to customer service number, within the footer. Here's a look at the tel URI scheme:

<a href="tel:1234567891">123 456 7891</a>

Step 5- Add style enhancements

With a strong semantic markup in place, it's time to add some style enhancements as explained below:

Create separate style sheet for screens with larger displays

Here, we'll be creating two CSS files viz: style.css and enhanced.css for delivering basic styles for screens with dimension less than 967px. We'll be using media queries for serving the new styles for screens with dimension greater than 967px as shown below:

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style-967.css" type="text/css" media="screen  and (min-width: 967px)" />
<!--[if (lt IE 9)&(!IEMobile)]>
<link rel="stylesheet" href="ie9.css" type="text/css" />
<![endif]-->

Adding Mobile-first styles

Next, we can start off with adding shared styles and advanced layout rules as shown below:

/* Avoid this style */
.customer-list img {
  width: 30%;
  float: left;
}
@media screen and (max-width: 967px) {
  .customer-list img{
    width: auto;
    float: none;
  }
}

The mobile-first approach will now look like this:

@media screen and (min-width: 967px) {
.customer-list img {
    width: 30%;
    float: left;
  }
}

Next, we'll be applying media queries as shown in the below code snippet:

/*Display 2 per row for medium displays*/
@media screen and (min-width: 480px) {
  . customer-list li {
    width: 50%;
    float: left;
  }
}
/*Display 3 to a row for large displays*/
@media screen and min-width: 768px) {
  . customer-list li {
    width: 33.33%;
    float: left;
  }
}

Step 6- Use CSS for reducing HTTP requests

Have a look at the below CSS which will play a vital role in saving HTTP requests so as to improve the overall performance of your website. For instance, CSS gradients can replace background images for decreasing the count of image requests and rendering a greater control over the original design.

/*Using CSS gradients rather than background images*/
header {
  background: #333; 
  background: +linear-gradient (top, # 333 0%, #555 100%);
}

Step 7- Add Javascript enhancements

To start off, we'll be adding functionality to the site's navigation. In the HTML5 Markup, we'll using a list #top-menu for toggling the visibility of navigation as well as the search bar on all small screens. Have a look at this:

<ul  id="top-menu" class="top-menu">
  <li><a href="#">Menu</a></li>
  <li><a href="#">Search</a></li>
</ul>
<nav id="main-menu" class=" main-menu">
  <ul role="main-menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
  </ul>
</nav>

Additionally, we will include a resize listener which will find whether there's any possibility of displaying the search bar and navigation. Have a look at this:

var swidth, sheight ;
$(window).resize(function(){
  swidth = document.documentElement.clientWidth;
  sheight = document.documentElement.clientHeight;
  setElements();
});
  
//Set elements according to differ screen size
function setElements() {
  device = (swidth < breakpoint) ? true : false;
  if (!device) { 
    $('#top-menu').show(); 
  } else {
      $('#top-menu').hide();
  }
}

Adding functionality to the Image Gallery

To start off, we'll be adding functionality to the site's navigation. In the HTML5 Markup, we'll using a list #top-menu for toggling the visibility of navigation as well as the search bar on all small screens. Have a look at this:

Have a look at the below code snippet which will allow us to build an image carousel using the available thumbnail images:

function intslide() {
  container.html('<div id="img-slider"><ul /></div>');
  imgSlider = $('#img-slider');
  $('nav a:first-child').addClass('active');
  
  $('nav a').each(function() {
    var href = $(this).attr('href');
    imglist += '<li data-src="'+href+'"></li>';
  });
  
  imgSlider.find('ul').append(imglist);
      
  $('nav a').on('click', function(e) {
    var slidepos = $(this).parent().index();
    e.preventDefault();
    loadImg(slidepos);
    if(swipeEnabled) {
      mySwipe.slide(index, 500);
    }
    updateNav(slidepos);
  });
}

Adding functionality for Related Content

A code snippet will allow us to pull in related content in case any one of the below two conditions are met:

 When a mobile user clicks on related t-shirts or the product reviews links

 When screen has enough space for loading the auxiliary content

The code snippet that I'm referring to is shown below:

function setElements() {
    device = (swidth < breakpoint) ? true : false;
  
  if (!device) {
    loadContent(); 
  }
}

//Set up content
function loadContent() {
  var $content = $('.content');
  $content.each(function(index) {
    var $this = $(this);
    var contentLink = $this.find('a');
    var contentFragment = contentLink.attr('href');
    var realContent = $this.find('.demo');
    if (realContent .size()===0 && $this.hasClass('loaded')===false) {
      getContent(contentFragment,$this);
    }
  });
}

function getContent(src,container) {
  container.addClass('showcontent');
  $('<div class=”demo” />').load(src +' #content > div',function() {
    $(this).appendTo(container);
  });
}

As an approach to keep the web pages lightweight, I recommend using Closure Compiler for chopping off all the unused bits of the jQuery library. Other impressive alternatives include popular micro-frameworks like Zepto.js etc. Finally, don't forget to pay special attention to ensuring seamless off line access to your website. This will serve as a brilliant surprise to mobile users who aren't connected to the Internet at times.

We're done!

Conclusion:

With that it's a wrap on this post which made you familiar with the basic steps of creating a mobile responsive design. Hope by having a responsive design, it will become convenient for you to adapt to all the future mobile devices and browsers quite conveniently and instantly.

Author Biography:

Samuel Dawson is a comprehensive expert in Designs2HTML Ltd involved in the process of to convert HTML to Wordpress in a top manner.