Dissemination of views, information and knowledge without any cost or ado was made possible after blogging dawned upon us. Lets take a look at some of the burning topics, general discussion, innovations and techniques from our Editor’s desk

  • Jul 15 2013

    Responsive Design vs Mobile Sites: What Should You Opt For?

    Let’s start this post with a short little debate on why we really need a responsive design or a mobile site. Though the answer is quite simple that people are switching to mobile, and have started to access the web on handheld devices, but let’s not be simple anymore. Here, we show you some stats, which will make it clear to you that it’s high time that you either get a responsive site or a mobile site to maximize your business on the web.

    According to Kontera Technology, the consumption of smartphones is increasing at a very high rate, and 22% of all internet content consumed in the US itself is on mobile devices, which is expected to grow to 27% within the six months time in 2013. And in 2012 the year on year growth of U.S based web traffic that access the web using mobile devices is up by 430%. Additionally, Automotive, Telecom, Sports, Tech and B2B are some of the industries that are being accessed on mobile devices more than any other industry. Isn’t that an eye opener?

    Now let’s get back to the topic!

    Since HTML5 & CSS3 came into existence, the face of web development industry has changed. In the year 2007, when Apple Inc., introduced the first generation iPhone, individuals and businesses started to get mobile specific websites to ensure that they never miss out on their customers. And that surge gave birth to mobile sites, which are now in danger of losing their own identity to Responsive Sites as the industry has noticed a sharp fall in the demand for mobile sites. The major factor behind the steep fall in mobile sites popularity is not only HTML5 & CSS3, but there are a lot of contributing factors, which includes invention of tablets such as iPad, Samsung Tab, a great range of smartphones available in different screen sizes.

    Apart from this, there’s another factor which eventually made businesses switch to responsive design rather than opting for a mobile site, and that is the expansion of screen sizes of desktop monitors. Earlier we used to have a 14 inch CTR monitor, but now there’s no dearth of screen sizes and you can easily buy a desktop monitor with 17 inch, 19 inch, 21 inch or higher screen size rendering a resolution over 2,000 pixels. And this has eventually made it miserable for companies and business individuals to counter all screen resolutions with a standard webpage resolution that is of 960 pixels wide and 800 pixels long. Moreover, if you render the same webpage on a smartphone, which generally have a screen resolution of 400 pixels, the users would have to scroll down and scroll to right to be able to view the available information.

    In addition to this, there are also devices that of retina eye display, which eventually means a very high pixel-density display, and one of its live example is Apple iPad’s retina display. Moreover, if you compare the first and second generation iPads with its third generation variant, you’ll notice that all three are of same size, but renders the web pages at an altogether different resolution. The resolution of the first and second generation iPad is of 1024 pixels by 768 pixels, but the third generation iPad’s resolution is of 2048 pixels by 1536 pixels. This makes the situation more complicated as it leaves us with two devices having same physical dimensions (almost), but renders the web pages at different resolutions.

    However, with all the fuss around the downfall of mobile sites and the rise of responsive design, and there are various companies who are in dilemma to understand what is best for them and how they can enhance their users experience on their site no matter what device they use to surf the web. And today that’s what we will discuss with our blog post, and provide you with certain solutions that may help you overcome all your problems. Additionally, we will also discuss the pros and cons of Responsive Design and Mobile Sites.

    Let’s start with Mobile Sites first and then we will discuss about Responsive Design.

    Mobile Sites

    Mobile sites were introduced to counter the problems that the mobile users used to face while accessing the websites over their handsets. The main aim of a mobile site is to present the content of a desktop site in a manner, which ensures that the users didn’t have to scroll right and left every now and then. To understand it better, let’s give you an example; suppose a user visits a site on his desktop computer, the browser will render its version that works best on desktop monitor’s resolution, but if a user visits the same site on his smartphone, the mobile browser will render the mobile version of that particular site, which would have been optimized specifically for devices with small screen and resolution.

    You can call it as a clear-cut approach to accomplish the actual goal, which is to never miss out on prospects as you never know what device a user would use to surf your site. And if you want to target the desktop as well as smartphone users simultaneously then you need a site that works on both the desktop and smartphone, which means to have two different sites with same content. Once you have both sites up and running, a visitor trying to access your site will be re-directed to the version that runs flawlessly on his device.

    However, going ahead with this approach includes a number of technical obstacles to overcome. For instance, the first major problem you may face is detecting a user’s device while he tries to access the site, the second problem would be maintaining the exact content on two separate websites, and the third problem would be to make a way to cater to the users using tablet computers or notebook computers for accessing the web. Though all these obstacles have a solution in place, but it is worth to note that crafting two separate sites that apparently act as one will add levels of intricacy that would otherwise not exist.

    Pros of Having a Mobile Site in Place

    We now know that people have started to think beyond mobile sites to increase their reach and target their audience better. As a result you can easily say that mobile sites have fallen out of favor. However, we believe that there’s still some ray of hope left for mobile sites. That’s because at times companies want their users to have a different browsing experience from the phone, and for that a mobile site would be a perfect choice. As it would be designed separately, from the ground zero, and special considerations can be implemented to give an all together different and better mobile browsing experience.

    Additionally, we believe mobile sites have a larger role to play with web apps. As at par levels of interaction and functionality is quite difficult to render from a desktop site version to handsets with small screen sizes. For example; a web app on a desktop computer can be placed out in various sections. Some sections can display the app related info, while others have sections can be used for controls to manipulate the existing info, which means a web app can be made on one page. But as far as a small device is concerned, all parts of the app (the displayed information, the controls, etc.) might require to be put on different pages. Thus, the content might be the same for both the mobile and the desktop web app, but its entire structure may differ completely. And just because of the broad differences in the basic requirements both the sites, a mobile version may prove to be the wisest and appropriate choice.

    Cons of Having a Mobile Site in Place

    Building a dedicated mobile site for your business or personal use would mean that you’ll end up having two sites (if you already have or planning to have one launched sooner or later). And with two sites in place, everything should be done twice. Though we know that both sites can render the same database and may even share the server-side code pretty well, but other than that things need to be done two times. All the design work, front-end development, and UX work is reproduced automatically. Reproduction refers to both money and time.

    Another issue that works as a hindrance in a mobile site as a preferred choice to serve the mobile based audience is there is no single device, in fact, there are plenty of them, and come in all sorts of screen sizes; the big, the small, and the smallest. And as the technology progresses, new handsets come and the old ones. With that it becomes really tough to counter dozens of screen sizes, and resolutions from one site, and we can’t build a separate site for each possible mobile device, or are we?

    Whenever, we talk about mobile sites, it refers to an attempt to give the targeted mobile using audience a rewarding mobile browsing experience no matter what device they use, and how they access the site. But, building or providing a site for each possible mobile handset is impracticable.

    Responsive Design

    When a Mobile Site becomes something that is difficult to opt for, the question that arises in everyone’s mind is; how to build sites that can work across all devices flawlessly.

    Two three years before, the answer to this question was not in the picture. But now web developers have been able to find it, all thanks to the birth of HTML5 & CSS3, which is called as Responsive Web Design.

    Now you might be thinking how a responsive design works. But this blog post won’t be a good place to go into the responsive design’s details like how to implement it in a web design; instead it is crucial for us to know how it influences our process, and it’s vital to understand how responsive design works.

    But let’s define what exactly a Responsive design is. Responsive Design is a way to coalesce fluid layouts (which gets reduced and becomes large as a browser is resized) with media queries, which are a part of cascading style sheet’s conditional statements that apply styles if certain conditions aren’t/are met) to create a site which can adapt to the web browser’s resolution.

    For example; a media query can confirm if the utmost width of a viewport is less than 480px, and if so, it will implement the particular CSS style given for the viewport less than 480px. However, if the viewport is higher than 480px, the style won’t be implemented. Additionally, media queries are helpful to detect the device orientation and other characteristics of the device used by the visitor, providing us with full control over when styles are applied and how.

    Basically, each listed media query form a separating line, where the fluid layout gets altered depending upon the new styles available for that screen resolution. A separate line acts as a point where the next media query takes over to the last one and new style gets applied to the design. With responsive design, we can produce websites that fits best to the device screen sizes depending upon their pixel dimensions.

    Pros of Responsive Design

    When you’ll have a closer look at Responsive Design, you’ll notice that it is completely resolution-independent. It’s easy to implement the responsive design on a website rather than creating a separate mobile site and it also lets you render one codebase across all devices, no matter what their screen size, resolution and orientation is. That means only one cascading style sheet is required or enough along with an HTML document to create a responsive layout supporting all latest web browsers.

    Other than working on different resolutions of each mobile device to render the web efficiently, we can create separating lines for out content and design. We can analyze the points where the fluid layout starts to break and create separating points to counter the changeover involving differing page widths efficiently.

    At last, responsive design also compels us to think about the presentation style of our web content, as with responsive design it’s the content that generally breaks, therefore, we have to concentrate on structuring out content, so that responsive design becomes possible. Another reason for it is that with a wide range of screen sizes of desktops and mobiles, we are compelled to consider how our content will display on an enormous range of devices; how our content will look like on a mobile phone? Moreover, if we shorten-up the content, what are the things that should be displayed on the handheld devices? And if certain content is inappropriate for the handset, should we exhibit it on the website rather than a mobile site?

    Cons of Responsive Design

    There is nothing that is impeccable, in fact, all things have certain pros and cons associated with them, and responsive design is no different. As we stated before, older browsers do not support media queries (the modern day CSS styles), however, we still have certain solutions for it. There are two points that matters while acclimatizing to responsive design. The first point is; responsive design needs different approach while designing for the web. That’s because the design has to adjust to various appearance factors and resolutions, hence, we need to give more consideration to HTML markup. With responsive design in place, we can easily develop a website that functions smoothly on a 400px wide mobile phone, and can also scale to 2,000px resolution without a glitch. Though attaining all this, and much more is quite simple, but it really takes an enthusiasm to clinch the dynamic nature of content along with a little bit of precaution.

    Another point that we want to discuss here is that to make responsive design work flawlessly, one needs to overcome the style of writing static-width layout codes, where people don’t give due importance to semantic markup, and instead focus more on achieving the given design no matter how it comes. As going with that approach to make a responsive site will make life miserable, as you may end up making it complicated and then you might need to spend more time wireframing the separating points in the designs to ensure that the HTML and CSS code stays clean and semantic.

    Posted by ajeet Posted in: web design Comments: 0