Making Fedena Website Mobile-friendly: The Story Behind

Fedena-Mobile
With the role mobile phones play in our lives today, there isn’t a single doubt about the role handheld devices (especially mobile phones) play in taking forward businesses. Reach of business/product is greatly influenced by the number of mobile phone users covered. Not only that, Google has made it clear that websites that do well on mobile will get a solid boost in search ranking as well.

1

The above image shows the user experience our page (www.fedena.com) provided with respect to mobile users. It clearly depicts that the site is not mobile-friendly. Mobile friendly websites have gained so much importance and popularity that Forbes has included it in their marketing checklist. Delivering audience the content they want, within the context they are viewing it, is the one thing any business should take care of.

Let’s get Started

We wanted to build a mobile-friendly version of our site and there were two approaches to choose from:

  1. Modify the existing version
  2. Build new one from the scratch

The second approach make things simpler as all you need are a design, an approach and a mechanism of handling various devices, screens and resolutions. At Foradian, our Fedena website was already functional and much in use. So we had to think of the ways to reach out to the entire range of customer base and also we wanted to do it ASAP. The below image shows the distribution of our visitors on different devices:
2

Approaches

For search engines to understand that our website is set up for mobile too, we had to follow one among the three designs that Google has put forward for all the developers:

  1. Responsive Web Design
  2. Dynamic Serving
  3. Separate URLs

Having separate URLs seemed easier to implement as all we had to do was rewrite the contents and provide the views. Once the user tries to open a page through mobile, he/she will be redirected to the mobile version of the site i.e., m.fedena.com just like Yahoo! did earlier. This approach has other constraints like maintaining two versions of the site, being sure that all pages are provided with different views and that a page will have two URLs. Also Bing and Google advocate a one-URL approach for find-ability and SEO. So we thought of going with the other two designs and implementing them.

Our Approach

Dynamic Serving is a setup where the server responds with different HTML (and CSS) on the same URL depending on the User Agent requesting the page. User Agent is the string the browser sends to the server hosting the site which indicates the details of operating system being used, its version, the browser through which the site is being visited and its version so that the server can tailor the site according to the browser. Responsive web design (RWD) is a setup where the server always sends the same HTML code to all devices and CSS is used to alter the rendering of the page on the device. Simply put, Responsive design is a single version that auto-adjusts to display properly on all devices except the oldest cellphones or feature-phones.

However, the first two approaches have an advantage over the Separate URL approach – we need not have to have two separate URLs for the different versions. Also, we need not have to write separate views for each and every page; only the pages that are most important or viewed by many need to be handled.

How about implementing them both? Yes, we implemented both of these setups. Here’s how – depending on the User Agent, we planned to display a different layout. All handheld devices and desktop versions would have a different layout. But if that’s the case, how would we display content according to the screen sizes of handheld devices! That could be done through responsive design. So, it came down to two different layouts depending on User Agent and using media queries for each screen size or a screen size till a limit. Media Queries help in writing different styles for same classes and using them according to the media type and size.

Designing Priorities

At this stage, once the approach has been decided, we needed a design that is simple yet informative. Our aim in designing was to let the users have all the information they need and in the context they like but without sacrificing our content. For all mobile version of sites the top requirements are – a good design that would help users get the basic information he/she needs and the navigation links for every other page, keeping menus short and sweet, putting contact information up and front, providing links and adding videos and other features to keep the user engaged are sure ways to future-proof the site. Even the forms are simplified so that there will be no inconvenience to the user at any point. We have also decided to remind them as to which plan they are interested before filling the form which brings more clarity in them. Our design team did a splendid job and provided us the simplest UI with all the elements.

3

The above screenshot has been taken after Fedena website is made mobile-friendly.

Why a Framework

After getting the design, the first thing that we needed to decide upon was whether to use a framework and which one to use in that case. Challenge was to develop a modular structure that enables the content to best fit any screen size. To write the entire responsive CSS from scratch and making sure it works well in all browsers is a tedious task. That is where these frameworks enter and make life much easier.

Choosing a Framework

Among all the frameworks, Pure by Yahoo! caught our attention as it stands true to how it is described, as “an ultra light-weight and responsive set of CSS modules that can be employed in web projects at ease and they are responsive too !!.” Even though there were many other equally good frameworks along with Pure, its minimal and flat design which ensures that it would stand out of the way if needed was the foremost reason we chose Pure.
4 The above screenshot shows the size of the loaded page (541 KB) which is much smaller than the size of the desktop version. The page load size when viewed on a mobile internet device compared to being viewed on a desktop browser is comparatively smaller as the entire framework minified and Gzipped is only 19KB .

Development of the mobile version with design and frameworks and more

Featuring a video, content hiders, menu links as simple as they seem, implementing all these  might be a little difficult if we choose to ignore all the resources and plugins present. However, with the thousands of jQuery plugins and scripts present to assist in implementation, the developer just needs to choose the one that suits his/her requirement. In our case, we were happy with what jQueryUI accordion was providing and it took lesser time than writing it from scratch. We choose Owl Carousel, a touch enabled jQuery plugin that allowed us to create the beautiful responsive sliders. Apart from that the optimal use of jQuery/Javascript functionality made the implementation part much easy.

5

Now for a quick comparison, the below screenshot was taken before we started working on our website to make it mobile friendly.

6

Our Fedena website is now a mobile-friendly site. For a company that encourages its team to think like a customer, we are happy that our customers are now able to connect with us through their mobiles without any difficulty. More and more users are now accessing our site from their devices without any inconvenience. We are able to reach out to a wider user base, thanks to our mobile-friendly website.

7

As you can see in the above screenshot, we were successful in making fedena.com, a mobile-friendly site.
This article is written by:

IMG_2811 (1)  Poornima G

A developer by profession and an explorer by nature, she tends to learn new things from every avenue she traverses and finds happiness in implementing them in her endeavors.
Beyond the work-space, she intends to lose herself in sleeping, travelling and reading.

Share Button

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?