Mobile Solution: Responsive Design on ictQATAR

ictQATAR is the website for the Supreme Council of Information Communication and Technology for the Government of Qatar, which is in charge of technology innovation and implementation throughout the country. 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.

In light of the ever-increasing importance of mobile technologies and access to information, the latest upgrade that Forum One has performed for the site was to implement a responsive design theme.

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 be 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.

Optimizing Layout

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.

Multi-device Testing

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.