Responsive web design
April 10, 2015
Jean
Today, about 35% of the traffic on UGAL comes from mobile devices : 20% from smartphones and 15% from tablets. Desktop traffic still dominates at 65%, but it is not going to last and the share of mobile will continue to grow.
It is time for UGAL to specifically address the needs of those visitors with smaller screens. Being a bit late to the mobile party gives us a strong advantage: choosing among mobile technologies is far easier today than it was 2 or 3 years ago. That is why we have chosen to extend UGAL with support for responsive web design. The changes will be available in the next few weeks.
Different technologies for mobile websites
There are 3 ways to create mobile friendly websites:
- Create a mobile website. Mobile users are redirected to a website dedicated to their needs. Not all content is displayed to mobile devices, and they usually come with a "View full desktop site" link somewhere at the bottom of the page.
- Use browser detection to generates different HTML/CSS code for the same URL and depending on the browser that was detected.
- Use responsive web design. The same code and content is sent to all devices, under the same URL. It is the code itself that is responsible for adapting to the browser environment (desktop or mobile).
The pros and cons of each method have been widely discussed and over the years responsive design has become the best option:
- The same URL works for all devices. Meaning that it does not break URL sharing accross devices and does not confuses search engines for indexation.
- The entire website content is available to mobile devices, not only the few pages that have been chosen to be optimized for them.
- There is no browser detection involved server side, which is always flacky and prone to errors.
- It is the HTML/CSS/Javascript code itself that contains the instructions on how to adapt depending on the screen size. Meaning that there is only one code base to manage.
The strongest argument against responsive web design is that it is not optimized for the limited bandwidth available to mobile devices, since they need to download the same amount of data as desktop clients. We do not believe that it is truly an issue as available bandwidth keeps growing, including for mobile devices. The few extra KB of data to download are transparent to the overall user experience, even for mobile devices.
The evolution of web design
Responsive web design is a natural evolution of web design. It follows the evolution of devices we use to navigate and web design is finally seen and understood differently than print design. It is not about pixels and alignments anymore. It is about adaptability to devices and usability regardless of the device.
How will UGAL change?
Migrating a website made with UGAL to use a responsive design will be relatively easy:
- Most of the HTML generated by UGAL will not change. The most notable change will be the addition of a viewport meta tag in the HTML headers when a responsive theme is used. The standard HTML markup might change a bit in some areas like the shopping cart page or the checkout pages, but that will be about it.
- The CSS files for the themes will need to be modified with media queries instructions, and fixed units (pixels) for sizes will need to be replaced with relative units (ems and percentages).
- While we try as much as possible to implement Javascript less solutions, we might need to inject new Javascript code for things like the navigation bar.
Once the HTML markup changes are in production, we will start updating UGAL's standard themes to make them responsive. If your website uses a custom theme, you will be able to migrate it as soon as we release the HTML markup changes. This is still a few weeks away.
Note that if you do not want to use a responsive theme, you won't have to change anything to your website, UGAL will stay compatible with your current theme.
We hope this posts better addresses the questions you had after Google sent emails warning you that your website is not mobile friendly. It will be soon!
Please email support@ugal.com with any questions you might have about this change.