How to make your WordPress Theme Responsive

responsive web design

Today, every website owner wants a mobile version of their site. It becomes essential to have a fully responsive site on different devices like iPhone, iPad, BlackBerry etc. and all screen resolutions must be scalable and compatible.

In fact, in the next 4 to 5 years, we will likely need to design for several other new inventions.

In the sector of web design and development, we are quickly getting to the stage of being unable to maintain the various new resolutions and devices. For many sites, creating and developing a website version for each resolution and new device could be impossible.

You will rarely find a business owner who doesn’t understand the term “mobile-friendly.” Nowadays, every web design companies have the responsive feature highlighted bold and clear on their service package. If you want a top notch list of web design agencies and have a fair amount of budget, this can help you out.

However, there are tons of freelancers as well as web design agencies that deliver quality work with a small budget. Here is how to do it: If you are looking for a professional website designer Sydney, a simple search on Google with your same phrase is enough. You will get a good chunk of a list to choose from.

 It goes like this – If you can’t make a site responsive, it’s not worth the sale at all! But is the hassle of going through design companies worth it, when you have a list of themes ready to be integrated right away?

Well, the solution depends upon your needs and customization requirements. Thus, it becomes necessary for us to find out the appropriate solution that can help you create a completely responsive website.

Want to learn more about WordPress SEO, UX, UI, website optimization, speed optimization, conversion rate optimization? Visit WPAll Today.  

Responsive Web Design

Well, a responsive web design is a concept that conveys that the design and development should respond to the behavior and environment of the user, which is based on screen size, platform and adaptation.

The practice consists of a blend of scalable grids and layouts, images and an excellent use of CSS media queries. If the user changes from their laptop to iPad, the site should automatically transform to the appropriate resolution, image size and scripting abilities.

Let’s Discuss the Concept of Responsive Web Design

Ethan Marcotte explained the concept of Responsive Web Design in his article. He said that the responsive web design derives from the idea of responsive architectural design, where a room or space automatically adjusts according to the number of people within it.

In his theory, he compared the responsive web design with the responsive architecture where he mentioned how physical spaces response according to the presence of the people when they passes through. He further explained that with the help of robotics and advanced technologies, architects adjust a room’s temperature as it fills with people. 

He also elaborated that how companies are using the “Smart glass technology that has the potential to automatically become opaque when a room’s capacity reaches a decided density with the aim to give extra layer of privacy.

It simplifies that we don’t need to develop custom web design for a particular group of users. It is the easiest way to improve user’s experience because with this design you can hide the content into the site.

Like responsive architecture, web design should automatically adjust according to the preferences of the user. It shouldn’t need numerous custom-made solutions for each new category of users.

Responsive web design needs the most conceptual way of thinking. However, several notions are already being practiced: media queries, fluid layouts and scripts that can reformat web pages and develop automatically.

But, responsive web design is not only about flexible screen resolution and automatically resizable images, but also about a completely new way of thinking about design. Let’s discuss all of these features.

How to Adjust Screen Resolution?

Screen Resolution

Seemingly, different mobile devices come with different screen resolutions, orientations, and platforms. New devices with new screen sizes are being refined every day, and all these devices may be able to control variations in size, color, and functionality.

Some are in portrait, others in portrait; still others are even completely square. As the rising popularity of mobile devices such as iPad, iPhone and advanced Smartphones has the potential to transform from portrait to landscape at the user’s notion.

In order to design for both the landscape and portrait, we need to consider the hundreds of different sizes of screen. Of course, it is possible to compile them into major categories, design for each of them and make each design adaptable if necessary.

Obviously, it is difficult to create custom solutions all the time for new devices. So, how to deal with this situation?

Part of the Solution:

Make all the Components Flexible

In the recent past, when flexible and adaptable layouts were considered as a “luxury” for sites, the only things that were flexible in design were the layout columns and the text. Images could swiftly break layouts, and even adaptable layout columns broke a layout’s form. In fact, the flexible designs were not really that flexible; they could give or take some hundred pixels, but they couldn’t adjust from a big computer screen to a netbook.

Now you can make things more flexible. Images can be automatically adjusted, and we also have workarounds so that layouts never break (though they might become illegible in the process).

However, it is not a complete solution; the fix gives us far more options. It is good for devices that switch from a portrait orientation to landscape quickly, or for when users switch from a big computer screen to an iPad.

In order to create a complete responsive design, there should be a perfect blend of fluid grids, fluid images and excellent mark-up. Undoubtedly, creating fluid grids is a common practice, and there are various techniques for creating fluid images:

  • Hiding and Revealing Portions of Images
  • Creating Sliding Composite Images
  • Foreground Images that Scale with the Layout

Apart from the technical perspective, it is also essential for us to resize the images very carefully. If your resize image is too small, then it would appear to be of low quality. Therefore, the image is classified into two: one (of the illustrations) that is set as a background and to be cropped, and to maintain its size, and the other (of the name) resize the image proportionally.

But keeping the name of the website visible and not cropping it off was important.

<h1 id=”logo”><a href=”#”><img src=”site/logo.png” alt=”The Baker Street Inquirer” /></a></h1>

Here, the h1 element carries the illustration as a background and the image is aligned according to the container’s background (that is the heading).

This is just an example that makes responsive web design powerful. But even with smart solutions like this, a layout can become too short or narrow to look right.

Flexible Images

create responsive images

Another serious problem that needs to be resolved with responsive web design is “Flexible Images”. There are many advanced techniques that can help you resize images proportionately, and most of them are easy to done. Well, the most popular option is to use CSS’s max-width for an easy solution.

img { max-width: 100%; }

Since, no other width-based image styles override this rule; each and every image will load in its original size, until and unless the viewing area becomes narrower than the original width of the image.

The maximum width of the image is adjusted to 100% of the screen or browser width, so when that 100 % becomes narrower, the images will automatically fit to the size of the particular screen.

The notion behind fluid images is to deliver images at the maximum size. You need not to declare the width and height in your code, but instead allow the browser to resize the images as needed while using CSS to guide their relative size.

It is an outstanding and simple technique to resize images elegantly.

The maximum width of the image is set to 100% of the screen or browser width, so when that 100% becomes narrower, so does the image.

Don’t forget to note that max-width is not supported in Internet Explorer, but a great use of width: 100% would solve the problem in an IE- specific style sheet.

The above is a great instant solution and the perfect start to responsive images. Well, resizing an image for mobile devices can be very simple, if the original size of the image is meant for large devices.

Filament Group’s Responsive Images Technique

This technique is presented by the Filament Group who takes this problem into consideration. It not only resizes the images in proportion, but also shrinks the image resolution on smaller devices to ensure that very large images don’t misuse space irrelevantly on small screens.

However, this technique needs some files that are available on Github. First, a JavaScript file (rwd-images.js), the htaccess file and the last one is an image file (rwd.gif).

Then, we can use just a bit of HTML to reference both the larger and smaller image’s resolution: first the small image, with an .rprefix to simplify that it should be responsive, and after that a reference to the bigger image by using data-fullsrc.

<img src=”smallRes.jpg” alt=”” data-fullsrc=”largeRes.jpg” />

The JavaScript file adds a base element that enables the page to separate responsive images from other images. When the page loads, all files are re-written to their original forms, and only the small and large images are loaded.

With the use of other techniques, all higher resolution images would have had to be downloaded, even if the larger versions would never be utilized.

In fact, this technique is completely supported in today’s browsers including Safari, Chrome and Opera, IE8+ and the mobile devices that use these browsers.

Custom Layout Structure

You may want to change the layout altogether for extreme size changes, either through a separate style sheet or through a CSS media query. Well, this is not a problem because most of the styles can stay the same while specific style sheets can adopt these styles and move elements around with floats, widths, heights etc.

If a style sheet created the layout too short or narrow, wide or tall, then we could detect that and change to a new style sheet. Then, the new child style sheet would inherit from the default one and define the layout‘s structure. The following is the style.css (default content):

/* Default styles that will carry to the child style sheet */

html,body{

background…

font…

color…

}

h1,h2,h3{}

p, blockquote, pre, code, ol, ul{

}

/* Structural elements */

#main-wrapper{

width: 80%;

margin: 0 auto;

background: #fff;

padding: 20px;

}

#content{

width: 55%;

float: left;

margin-right: 3%;

}

#left-sidebar{

width: 15%;

float: left;

margin-right: 3%;

}

#right-sidebar{

width: 15%;

float: left;

}

Here is the mobile.css (child) content:

#main-wrapper{

width: 90%;

}

#content{

width: 100%;

}

#left-sidebar{

width: 100%;

clear: both;

/* Additional styling for our new layout */

border-top: 2px solid #ccc;

margin-top: 15px;

}

#sidebar-right{

width: 100%;

clear: both;

/* Additional styling for our new layout */

border-top: 2px solid #ccc;

margin-top: 15px;

}

Displaying or Hiding Content

Now, it is possible to shrink content proportionally and rearrange components to make the content fit as a screen gets smaller. But this process is not as easy as we think. We have best practices for mobile environments, more readable content, easy navigation and more.

Responsive web design has the potential to allow the user to pick and choose the content from the site from their mobile devices. Luckily, CSS has been enabling us to display and hide content with ease for years.

Display: none;

This one declares display: none for the HTML block element that requires to be hidden in specific style sheet or discover the browser width and do it via JavaScript.

In order to hide content on smaller screens, we can also hide content in our default style sheet (for bigger screens) that is available only in mobile versions or on smaller devices.

In fact, for smaller devices, you don’t need to keep the mark up on the page. It just takes up resources and cause unnecessary scrolling or breaks the layout.

The following is our mark-up

<p class=”sidebar-nav”><a href=”#”>Left Sidebar Content</a> | <a href=”#”>Right Sidebar Content</a></p>

<div id=”content”>

<h2>Main Content</h2>

</div>

<div id=”left-sidebar”>

<h2>A Left Sidebar</h2>

</div>

<div id=”right-sidebar”>

<h2>A Right Sidebar</h2>

</div>

In the default style sheet below, we have hidden all the links to the sidebar content as our screen is large and we can present this content on page load.

The Style.css (default) content:

#content{

width: 54%;

float: left;

margin-right: 3%;

}

#left-sidebar{

width: 20%;

float: left;

margin-right: 3%;

}

#right-sidebar{

width: 20%;

float: left;

}

.sidebar-nav{display: none;}

Now, we will hide the two sidebars and show the links to these pieces of content. Alternatively, the link could call to JS to cancel out the display: none when clicked and the sidebars can be aligned again in the CSS to float below the content.

The following is the mobile.css (simpler) content:

#content{

width: 100%;

}

#left-sidebar{

display: none;

}

#right-sidebar{

display: none;

}

.sidebar-nav{display: inline;}

If you want to show and hide content, rearrange layout elements and automatically resize the images, then a design can be converted to fit an immense variety of screen sizes and device types.

Conclusion

In this blog, we shared the tips and tricks that can help you make WordPress theme responsive. Of course, the fully-responsive website that can fit perfectly to the multiple screens sizes increases the productivity of a website owner and also gives a smooth user experience to the mobile users.

If you are looking for more responsive options, tips, and tricks Techie State can be a great resource.


Author Bio:

Lucy Barret works fulltime with WPGeeks Ltd., a leading WordPress Development Company. She handles all WordPress customization projects with her team of experienced developer who are dedicated to provide 100% client satisfaction. Follow her company on social media networks like Facebook and Google+


 

No fluff tutorials, articles, reviews from the world of WordPress
Written by WordPress pros & delivered to you.

Simple.

Latest Themes


Latest Plugins


Theme Collection


Categories