Here is the problem: Many websites are not geared up to be viewed in this way and with screens being so many shapes and sizes, data can go missing.
Here is the solution: Responsive Design – designed for digital technology on the go. Due to the ever-increasing demand for mobile technologies and the need to access information on the go, ictQATAR’s website recently implemented a responsive design theme. Read on to learn how it works.
Single Code to Rule Them All
Responsive design is a cost-effective approach for accommodating the wealth of new devices, without having to create multiple versions of your site for each device. This new method ensures that your audience can access your most important content from any device on the market, by displaying an optimized layout of the same content through understanding the display size of your screen, whether that is a desktop PC, tablet or smartphone.
ictQATAR already had a mobile website for mobile devices. The dedicated site contained only a simplified subset of the full site. With responsive design, we were able to include almost 98% of the site content using the same code and design elements.
The responsive design theme is optimized for desktops, tablets, and mobile devices, presenting the site in a different visual manner based on window size. However in order to be usable, responsive design is not simply an adjustment of layout, but needs to go farther by examining what users want to do at each screen size.
In general, smartphone users access information on-the-move and tend to be distracted. They also are frequently in a rush, and want to quickly find the information. Tablet users, on the other hand, are apt to be in a more relaxed atmosphere, many using their tablet devices for entertainment and browsing sites and services of personal interest. PC (desktop and laptop) users are multitasking and typically in work-oriented environments. Another key distinction is smartphone and tablets are touch-enabled whereas PC users interact with content via a mouse. Each of these screens call for a differing set of interactions and information display.
The Devil’s in the Details
Many aspects of the site change when switching between the different screen-size break points. On smartphones and tablets, interactions need to have larger touch areas to accommodate imprecise touch gestures.
In our case, at the smallest sizes, elements such as the site’s primary navigation, language switcher, and search field were removed from the content area completely, replaced by a bar at the top of the screen that includes buttons that, when clicked, display the navigation (including dropdown accordions) and search functionality in a modal overlay. This allows more of the content to be visible.
Content also needed to be optimized for the various screen sizes. On smaller screens, the layout is usually single column; therefore, important information needs to be presented first. In addition, each content block in the main column and sidebars had to be evaluated to determine whether it was essential to the mobile experience.
Interactive functionality, such as slideshows, movie players, and other 3rd-party plugins, also needed to be examined to make sure they functioned on the various mobile devices (e.g., Flash is not supported on iOS devices).
The Arabic Challenge
The ictQATAR website is a bilingual site. Making a site Arabic is more than simply “flipping” the pages to be right-to-left orientation, and making it responsive on top of the language switch presented a unique challenge. However, because the site had originally been designed with progressive enhancement in mind, retrofitting the site to use a responsive design was easier than it would have been otherwise.
Testing on multiple mobile devices at once is time-consuming. Adobe recently released Shadow, which allows the same webpage to be displayed on multiple devices simultaneously by using an app to synchronize displays. This helped us to test the responsive design layout on a Desktop, Android, iPhone, and iPad all at once. However, the tool does not account for user flow or touch interactions, which still had to be tested per device manually.
See for Yourself
To view the responsiveness of the site, visit the site on a mobile device or enter “http://www.ictqatar.qa/en” in your browser, and then adjust the size of your window in and out in the lower right corner to view the site as it would appear on different sized devices. You can also use Quirktools’ Screenfly or Responsinator to quickly get an idea of how the site might look on a variety of devices.
Below is a handy YouTube video which explains the principles of Responsive Web Design in a video tutorial
Forum One has worked with ictQatar since 2010 to design, develop, and launch their current English-Arabic bilingual site on the Drupal 6 platform, and has continued to support them with usability and site enhancements since.