As more and more people today browse the Web using a wide variety of devices and screen sizes, it's essential for a website to get responsive. Studies show that 80% of people now own a Smartphone of some kind. No doubt, this percentage will continue to increase in future too since mobile devices are becoming cheaper and more accessible day by day.
Not sure if your site is responsive? Try this tool to test your site for responsiveness. If your site fails the responsive test, here I'm sharing two ways you can turn your non-responsive site into responsive one, along with a way to make a CMS-powered site mobile-friendly without using a separate mobile URL.
Let's go through each method, one by one.
Upgrade to a Responsive Theme/Template:
Whether your website runs on HTML or a CMS like WordPress, upgrading the current design to responsive is definitely the fastest, easiest and most efficient way to turn any site into responsive. There are innumerable free and premium pre-built responsive templates/themes available across the web, which you can use to make your non-responsive site responsive. All you need to pick a high-quality, well-functioning responsive theme/template, upload and activate it, and you're good to go.
If you're on an extremely tight budget, you may consider using a free responsive theme or template. However, free themes/templates are not as good as you think. Most of them are likely to contain encrypted malicious code that may harm your data files. Since finding a quality free template/theme is a difficult and time consuming task, it would be quite better if you use a premium responsive theme from a trusted theme provider. Before buying a theme or template, make sure it's fully responsive and fast enough to load.
Convert Your Existing Website to Responsive:
If you're happy with the current design of your site, converting your existing website to responsive may be a great option for you. However, this method requires you to have a good knowledge of web technologies like HTML5, CSS3 and JavaScript. Not only you'll have to rewrite most of your website code but also go through each and every element of your current design in order to fix them.
Concretely, this route involves working with three key principles of Responsive Web Design, which are Fluid Grids, Flexible Images and CSS Media Queries. Let's take a look at them one by one!
-
Fluid Grids: Generally, we define the layout of a website in terms of pixel which is a fixed unit, but this is not the case with responsive design. Since a website might render on various kinds of devices ranging from a wide screen television to a tiny mobile phone, we need to define the layout in terms of percentage - a relative unit. With the simple math formula given below, you can easily calculate the percentage value for the each element of a web page:
Target Element/Context = Percentage Value
As an example, if your website width is 960 pixels and you're browsing your site on a 1920 pixels wide monitor, in this case, the target is the wrapper containing your site and the context is the width of browser window. In order for the site to look well on the widescreen monitor, you need to divide the target by the context:
960/1920 = 50%
-
Flexible Images: One of the biggest challenges that you'll encounter when converting your existing site to responsive is making images responsive. You not only have to resize images proportionally but also need to keep their performance up on every device. Among several techniques available to handle images in responsive design, the most popular is given by the father of Responsive Web Design - Ethan Marcotte. Just set the maximum width of an image to 100% and you're good to go!
img { max-width: 100%; }
This simple CSS rule will tell the browser that an image must not be larger than its pixel value, ensuring that the image will never get "stretched" or "pixilated".
-
CSS Media Queries: Media Queries are the heart of Responsive Web Design. Based on the characteristics of a particular device, they allow you to define CSS styles for that device. In other words, they are a powerful "if this size, then this style" tool that lets you define how your site content will adjust to fit the display of a device. A typical media query looks something like this:
@media only screen and (max-width: 320px) {
/* ...styles here... */ }
Use Plug-ins on a CMS Platform:
If your site runs on a content management system (CMS), then you're in luck. Popular CMS - like WordPress, Joomla and Drupal – offer a number of plug-ins/extensions to make your site mobile-responsive without having any separate mobile URL. Although this solution is not fully responsive since it makes a site responsive only for mobile devices, but if most of your traffic is mobile, then you may opt for this option. Let's take a look at different mobile-responsive solutions for popular CMS platforms:
-
WordPress: WPtouch is a popular plug-in to create a beautiful mobile-responsive version of a WordPress site. Not only you can choose from a wide range of mobile themes but also have full control over what should be displayed on mobile devices. A paid version with additional features is also available to help you take your site to a whole new level. Another popular solution to make a WordPress site mobile-friendly is JetPack.
-
Drupal: ThemeKey and MobileTheme are two most popular and widely used Drupal modules that automatically detect whether a user is on mobile and switch the default theme to a mobile-friendly theme. Both modules come with a user-friendly interface and are easy to install.
-
Joomla: You can use JSN Mobilize, Mobile Joomla and Responsivizer extensions to bring mobile-friendliness to a Joomla-powered site. Since Joomla v3.x already supports mobile websites, you should use these extensions only if you're using an older version of Joomla.
Source : articlesbase.com
0 comments:
Post a Comment