A Brief Look At Responsive Web
Nowadays, “responsive” is one of the most heard words around people working with web technologies. Every customer wants their web applications to be responsive. What customers actually mean by saying “responsive” is that they want a web application working in every kind of screen size. But is responsive approach is really the right solution to their problem? Understanding customer needs and providing the best solution for their case is developer’s duty. In so many cases, making a fully responsive web application can get you in lots of trouble. The purpose of this blog post is to understand which kind of applications should be built in the form of responsive web. I will try to answer the following questions;
· When should we develop in this manner and when we shouldn’t?
· What are the pros and cons?
· Are there better approaches than responsive web?
· Is there a faster way to develop?
· Is there a better way to improve code quality?
· Should we develop Mobile web and Responsive web together?
· Do hybrid applications provide a different approach or complete solution?
Basics of Responsive Web
In responsive web designs, elements in page can resize, reposition themselves or even disappear and move to another part of the page, which happens when screen size changes. Basically there are three types of resolutions developers consider; big desktop or laptop screens, medium tablet screens and small mobile phone screens. Three different kinds of user experience solution should be present in any responsive application.
When screen starts to get smaller, the elements in application (inputs boxes, labels, buttons images etc.) start to get closer and if possible shrink in size. As the available space left start decreasing for such elements in the screen, they start to reposition themselves from top to bottom. Now imagine there is a huge website in front of you with so many functionalities, images and so on. The user will have to scroll down to reach the desired part, which is at the very bottom of the page right now. As a solution in responsive design, the elements do not only change in size and reorder themselves; they might completely move somewhere else. For example, functionality may move into hamburger menu or into a floating action button. Menu style and usage may completely change. Sometimes there are side menus at both sides of the application. User starts to use touch screen instead of a mouse. Therefore, the whole user experience changes and responsive design should consider all kind of user experience issues.
Basics of Mobile Web
Many companies serve two different websites. One as their main website such as “example.com” and the other as a mobile web page such as “m.example.com”. This product should have two different applications working together. One of them is a desktop design (preferably responsive), which is only for tablet and desktop users. Other one is web application designed and developed only for mobile devices. (There is also another approach to make mobile web responsive for tablets, however, not preferred. Since mobile web has only one type of screen size (which is all kind small screens), designers and developers can only focus on one type of user experience solution. Elements can be easily aligned across the screen. Flows can be designed for only mobile users.
Basics of Hybrid Applications
There are different ways to develop hybrid applications. But the one that we consider in this blog post is hybrid applications working in WebView. This kind of hybrid application is basically a web application which still can be downloaded from application stores. Same product can be added to “play store” and “app store” and also be used as a mobile web application. With this kind of approach there is still need for web applications for desktop and tablets. Hybrid application can also be designed to be responsive in order to use in large screens, however, due to increasing code complexity and effort, is not very preferable.
Responsive Web vs. Mobile Web
It is not very simple to compare these two concepts as they both have good and bad sides. Thus, one should go through different topics and try to understand both technologies.
User Experience
Responsive Web;
In responsive design, elements should resize themselves to fit the page. Whether you are in desktop or mobile view, pretty much the same page is used to answer user experience issues. So, designers and developers should be very careful as whatever they want to put into the screen should be suitable for both large and small screens. They may start from small screen design and make this design responsive to turn into big screen design (tablets, laptops, desktops). But in the end they may end up with a large screen web application which looks like a mobile application. In mobile applications there are sliders, side menus, floating action buttons and users use the applications with their fingers. In large screen, users can use the whole screen and see lots of elements together while small screen provides only a little part of the content and user needs to navigate through top to bottom.
Making a web page both for large and small screens together may not end up as imagined in the beginning. Instead of one design you will need to consider three different designs which can transform into one another. While native developers only work on one design and focus on specific tasks, making an application as good as a native application might be a little troublesome. Moreover, users may feel uncomfortable using a web page application if it is poorly constructed. A web developer may want to focus on mobile design first but this time the large screen solution might seem as a large mobile application. Surely, one can always design a completely different application for each screen size, but this time size of the application will increase (At this point one might consider making two different applications and serving them together). However, this will solve most of the user experience problem. Small screen devices can have fully native like feeling while desktop part will be easy to use with mouse. But another problem will occur doing that. Development and design processes may take some more time. There will be more elements to maintain in the application which may result in increasing bug fix and quality assurance time. Moreover, size of the application will also increase (more images, more css and JavaScript files) which will end up decreasing the performance in web page which also affects the user experience in a bad manner.
Mobile Web;
With this approach, both user experience and performance problems will no longer exist.
There will be two applications: one just for mobile phones and other one is for tablet, laptop and desktops. Both can be well designed for their target users. Both will have only necessary files, css and JavaScripts for themselves, hence the application size will be smaller. Pages will load faster resulting in better user experience. Maintenance of two applications, pros and cons will be discussed under maintenance title.
In case of user experience, mobile web implementation seems like a better solution. Faster and more target specific development pleases users more.
Speed
Responsive Web;
Responsive web sites might be a slower website due to size of application. Application will contain larger css and JavaScript files.
Mobile Web;
The mobile site will only contain necessary elements. Mobile users will be automatically directed to mobile sites and won’t need to download files necessary for large screen web pages.
Design
Responsive Web;
This type of design should be simple and include less design elements. As the site becomes more complicated it can be difficult to alter any design elements into other screen sizes. Because a responsive design must respond to many different screen sizes, the developer will have to make many compromises if plans to do a lot of layout changes.
Mobile Web;
Allows for total creative freedom on the full website. The sub-site should be treated as a responsive design.
Making a responsive design is not an easy job. The elements move all over the website and get new shapes. Elements position themselves for each different screen size. It may look pretty same as there will be a few different designs for mobile, tablet and desktop. But in responsive design all the way from mobile to desktop, all designed elements should be considered together as a single design. This may cause unexpected results if not designed or developed carefully. So mobile web is less risky and easier for design perspective.
SEO
Responsive Web;
Good for mobile and web ranking since there is only one web-page. SEO hits do not get separated into two applications.
Mobile Web;
Since it is only designed for mobile, it is easier to design a website with better user experience. Mobile web apps pass Google mobile-friendly tests with better results. But there are still two applications to consider with different hit rates. Redirection might also be a downside for SEO. There are also ways to fix this issue for mobile web such as serving applications under same directory.
Since responsive sites lack performance compared to mobile web sites, they will get less points for SEO because of lower loading speed. Both have good and bad sides for SEO. I would call that a deuce. Moreover, SEO in single page applications is another problem. Google bots are getting better every day, but rendered pages still have better Google indexing points than single page applications. There is a workaround for that. Only Rendered pages will be served to robots from server. But if Google realizes that you are showing different pages as rendered pages than your single page application, your site totally may be taken out of indexing. And it is still easier to maintain SEO of a website when it is not a single page application. (This is another topic I want to consider in another article.)
Development and Maintenance
Responsive Web;
Responsive design and development is not an easy job. It needs more attention, developers and designers must be more careful. There may be more bugs and more quality assurance performance. All elements and functionality in application should be available in all sizes. User experience should be considered very well. Applications getting larger will also cause performance problems. Developers have much bigger css and JavaScript files to handle. Bug fixes will need to be performed over all devices. Quality Assurance Engineers should test everything in every device. But, there is only one application to maintain. Even how hard it is to do, it will always be less effort to build and maintain then two applications. Development cost will be less and maintenance will be easier. But we still can not say, it is two times easier than mobile web to maintain and develop. Responsive web is still much more harder to design, develop and test.
Mobile Web;
After all the implementation, you have a perfect website both for mobile and desktop, better user experience, all functionalities are easier to use. Your website loads faster, your application size is smaller. But all these things come with a price, which is development and maintenance cost. One still has two website to handle. They are easier to maintain but still there are two application.
Conclusion of Comparison
Both responsive and mobile web applications have their pros and cons. So are we supposed to choose one of them and leave the other one behind? Actually no. There are different cases that we should choose one over another. Let us reconsider them both. Responsive sites are cheaper to build and maintain, might have better SEO but have worse user experience, harder to implement and harder to design and also slower. Maintaining functionality across platforms is so hard that even some websites remove functionality from their responsive mobile sites. Mobile web applications are more expensive to build because you will also need a desktop version. Probably they will have lesser SEO points but designing and developing is easier, have much better user experience and faster than responsive web pages.
Common approach is to use responsive design and development for simple sites. The less functionality there is, the easier to design and implement. User experience is easier to achieve. But for complex sites, companies almost all the time go for mobile web design. Youtube, Facebook, Garanti Bank, Bank of America, Milliyet etc. are all huge websites, which have mobile web. User experience and speed seems like a choice big companies make in exchange of price. Zubizu’s web site is simple, does not have much functionality and it is well designed. So neither user experience nor speed is a problem for Zubizu although it is a responsive web site.
To sum up, if you are making a small website while working with talented designers, go straight for responsive web design. As long as you keep it simple, the problems I mentioned above will exponentially decrease. If you are dealing with a huge application, don’t make yourself get in trouble and go straight for mobile web. Design each screen carefully and focus on user experience.
Hybrid Applications (Working in WebViews)
So, where do hybrid applications come into the scene?
Actually hybrid applications provide a nice solution for a different scenario. Before I finish I would like to talk a little bit about this. There are few ways to make hybrid development: NativeScript, React Native, Xamarin are great ways to do it. But today I will consider Cordova-based applications working on WebView. Let us consider that we are developing across all platforms for a customer. We need two applications for mobile phones which will be downloaded from stores and a web application for all screen sizes.
So what are the options we have?
One native IOS, one native Android, one mobile web and one tablet-desktop-laptop web
In this case, development cost is huge. There are four different products that should be maintained and developed. As long as the customer can afford it, this option yields the best products, small, fast and easier to maintain for each one. SEO is at its best. Best user experience can be implemented without any problem.
One native IOS, one native Android, one responsive web
In second option, native part remains same. Web part changes a bit. If the application is not that complicated with so many features, many functionalities and many elements on screen. Even speed, user experience, design process and development process will not pose a problem as long as product is simple. However, if it is a complicated one as you will face a few problems biggest one being the user experience. Design and development process will be your second one. Lastly you might have a little speed issue.
One Hybrid app for IOS, Android and Mobile web and one large screen web application.
In this case, we no longer face any problems with web part. We will have two different products: one is focused on small screens and the other is focused on big screens. Mobile focused hybrid app is going to be same as Mobile Web application, which can also be built into IOS and Android, meaning that our Mobile Web application will be wrapped and put into stores for phones. Users downloading application will think they are using native applications while they are only using web pages. This is a pretty nice solution decreasing your product number from four to two. But as every other option, this one also has few downsides. Native application appearance is pretty easy to achieve these days with hybrid applications. Nevertheless, performance is a problem for Cordova-based hybrid applications (Xamarin, NativeScript and React Native do not have performance issues like Cordova-based hybrid applications). From my experience if development is done well, this problem is easy to overcome.
In the end, it is all about examining the problem right and opting for the solution suited best for the case at hand.
