INTRODUCING

RESPONSIVE WEB DESIGN

V.1.4 / 8.11.2012

P. O . B O X 1 4 9 9 , H AY A L M I N A , J I B R O O P. C . 1 1 4 , M U S C AT - S U LTA N AT E O F O M A N , + 9 6 8 9 9 1 0 4 0 5 5 / + 9 6 8 9 7 0 0 6 1 0 4 , I N F O @ A L H A Q Q A G E N C Y. C O M

AL HAQQ NETWORK RESPONSIVE WEB DESIGN

01. 02. 03. 04. 05.

INTRODUCTION HOW IT WORKS RECOMMENDATIONS BENEFITS GLOBAL INDICATORS REGIONAL INDICATORS

06.

Sources: [Link] [Link] [Link] [Link] [Link] [Link] [Link]

AL HAQQ NETWORK RESPONSIVE WEB DESIGN

01. INTRODUCTION

Responsive Web Design is a single solution which responds to di erent screen sizes for an optimal experience across multiple devices. A PRIMER ON RESPONSIVE DESIGN The concept of responsive design the practice of creating digital experiences that adapt to seamlessly deliver content suited to the device context of the users operating system, screen size, or orientation has been around for quite some time. For a variety of reasons, more companies are now giving responsive design serious consideration. The implications of moving to a responsive approach of creating adaptable designs can seem overwhelming, but the benets can be signicant. Users are consuming more content on mobile devices than ever before, and that consumption will only continue to grow. According to IDC, mobile web browsing will soon eclipse desktop browsing worldwide. This consumption of mobile content isnt just happening on the go; 93% of people are now using their mobile devices to browse the web in their homes, according to a study from Google. Designing for mobile devices isnt a new concept either; brands have been investing in mobile applications for years. But native apps arent the only way to take advantage of native device features. Geo-location, notication (sound & vibration), accelerometer, and other app-like capabilities can be achieved through a mobile web interface.

AL HAQQ NETWORK RESPONSIVE WEB DESIGN

02. HOW IT WORKS

DESKTOP

TABLET

MOBILE

IN TECHNICAL TERMS: Media queries allow the page to use di erent CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser. The uid grid concept calls for page element sizing to be in relative units like percentages or EMs, rather than absolute units like pixels or points. Flexible images are also sized in relative units (up to 100%), so as to prevent them from displaying outside their containing element.

AL HAQQ NETWORK RESPONSIVE WEB DESIGN

03. RECOMMENDATIONS

Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Responsive web design represents a fundamental shift in how well build websites for the decade to come.
Je rey Veen, Vice President, Products at Adobe Author of The Art and Science of Web Design Founding member of Adaptive Path

LEADING SEARCH ENGINES RECOMMEND RESPONSIVE WEB DESIGN

Sites that use responsive web design, i.e. sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device. This is Googles recommended conguration. Pierre Far, O cial Google Webmaster Central

At Bing, we want to keep things simple by proposing the one URL per content item strategy. For each website, instead of having di erent URLs per platform (one URL for desktop, another for mobile devices, etc.), our feedback is that producing fewer variations of URLs will benet you by avoiding sub-optimal and underperforming results. Duane Forrester, Bing Webmaster Center

The new [Link] home page is designed with a multi-device future in mind. Nishant Kothary, Sr. Evangelist at Microsoft

AL HAQQ NETWORK RESPONSIVE WEB DESIGN

04. BENEFITS

COPE: CREATE ONCE, PUBLISH EVERYWHERE

SAVE MONEY Financially, going responsive is the smarter choice. While the initial cost may be slightly higher than creating a traditional desktop website, youll be the owner of a online location that performs equally on all platforms whether accessed with mobile, tablet or desktop computer. SAVE TIME For all platforms, your site has to be developed and designed only once, saving your time and energy. Consequently this means less meetings, less events, and less time thinking what to do when the next new device gains momentum. CONSISTENCY Placing a greater emphasis on all screen sizes during the design process keeps the website lean and to-the-point as designers are required to incorporate reduced screen space into their thinking. A fast and lean website benets all users. BETTER PERFORMANCE With a Responsive Web Design, you dont have to worry about updating several di erent versions of a website in order to keep the mobile, tablet and desktop versions consistent. Update one, update all.

USER FRIENDLY, OPTIMAL DISPLAY A responsive website will adapt itself to all devices so visitors have a optimal viewing experience. You wont lose prospects if they cant view the website properly. Its important to take this into account, as the mobile audience and usage continues to grow. (See Indicators) IMPROVED SEO (SEARCH ENGINE OPTIMISATION) For any website, one needs links in order for users to move within the content. Each website for each platform would have its own links, which all would need to be monitored separately. With Responsive Web Design, one website is used for search engines with one set of links, without excess server load or other maintenance challenges. (See Recommendations) WIDER BROWSER SUPPORT, NEW CAPABILITES All browsers already support the technologies that make Responsive Web Design possible. In addition, you can introduce new capabilities when accessed via mobile device, such as location awareness, or an ability to make a phone call directly from your contact page. FUTURE FRIENDLY The lifespan of your website increases; it will be future friendly. The site doesn't need to be playing catch up with di erent platforms. Because your website is relevant in all devices, your visitors will be staying on the site for longer periods of time.

AL HAQQ NETWORK RESPONSIVE WEB DESIGN

05. GLOBAL INDICATORS

February 2011 worldwide sales of smartphones surpassed those of desktop and laptop computers combined. These statistics dont even factor in the rapidly expanding tablet market. (Smartonline, February 2012)
MOBILE AS THE DAILY MEDIUM The use of mobile devices to access the internet is becoming the medium of choice, with more than two-thirds (69%) of all internet users surveyed doing so daily. In addition, consumers are using multiple devices to connect to the web, including smartphones (61%), netbooks (37%), and tablets (22%). (Accenture, Mobile Web Watch 2012) MOSTLY MOBILE ACCESS 31% of current U.S. mobile internet users say that they mostly go online using their mobile phone, and not using some other device such as a desktop or laptop computer. (Pew Internet, February 2012) MORE TIME WITH TABLETS 38% of U.K. tablet owners spend more time on their tablet device than watching TV. (Westminster eForum, July 2012) SMARTPHONES RAPIDLY BECOMING FIRST SCREEN FOR INTERNET USERS Smartphone is rapidly becoming the rst screen (or only screen) customers use to access internet content. As many as 53% of the 90.4 million subscribers are already smartphone users, and you can expect that number to rise steadily. (Verizon, Q3 Earnings Release 2012) 85% OF INTERNET USERS WORLDWIDE CHOOSE MOBILE FIRST The internet users of today have many di erent options and can surf the web on multiple devices. However, while they make use of those opportunities, recent reports have shown that 85% of users around the world name mobile as their rst choice, making it the preferred channel for accessing the internet. (Network Intellect, October 2012) THE LOCAL MOBILE CUSTOMER Mobile search has grown vefold in the past two years: 95% of smartphone users have searched for local information 61% called a business after searching 59% visited in person 90% of these users acted within 24 hours (Google, April 2012)

2013

Mobile devices to overtake desktop PCs as dominant global internet platform.

AL HAQQ NETWORK RESPONSIVE WEB DESIGN

06. REGIONAL INDICATORS

45% of all Middle East & North Africa internet users surveyed use their mobile phones to access the internet.
(eConsultancy, January 2011)

HIGHEST REGIONAL MOBILE DATA GROWTH Middle East and Africa will have the highest regional mobile data tra c growth rate with a CAGR of 104 percent, or 36-fold growth from 2011 to 2016. The expected sharp increase in mobile tra c is due, in part, to a projected surge in the number of mobile internet-connected devices. (Cisco, March 2012) From February 2010 to February 2011, page views from mobile devices in the Top 10 Middle East countries increased by 233%, unique users increased by 142% and data transferred increased by 259% (Opera, Feburary 2011)

THE DIGITAL CONSUMER 66% of consumers in MENA are using the internet to look for products or items to buy prior to purchase. (eConsultancy, October 2011) 44% of all MENA mobile internet users have more than one smart phone. 57% of MENA mobile internet users plan to buy a tablet device. (Spot On PR, February 2011) Internet users in the Middle East spend more than two hours online every day. 32% of MENA internet users buy online. (Discover Digital Arabia, 2011)

WITHIN THE LAST 2 YEARS REGIONAL INTERNET PENETRATION HAS GROWN ON AVERAGE BY 228% (Sekari, June 2012)

95.3m 57%

MIDDLE EAST MOBILE PHONE PENETRATION TO EXCEED NORTH AMERICA The number of mobile subscriptions in the Middle East is expected exceed the 250 million mark during 2012, as mobile penetration tops 100%. With subscriptions reaching 271.27 million by the end of 2013 and rising to 352 million by 2016, the mobile penetration rate will rise from 97.72% from 2011 to 107.09% by 2012, exceeding mobile penetration rates in North America. (Informa, November 2012)

MENA internet population

MENA internet-enabled mobile phone penetration

AL HAQQ AGENCY info@[Link] +968 97 006 104 +968 99 104 055 [Link] 1499, Hay Al Mina Jibroo P.C. 114 Muscat - Sultanate Of Oman

AL HAQQ NETWORK ONLINE CHANNEL AND PLATFORM PROVIDER

AL HAQQ AGENCY ADVANCED DIGITAL DESIGN DELIVERY AND MAINTENANCE

AL HAQQ SOCIETY RESEARCH & DEVELOPMENT CORPORATE SADAQA

AL HAQQ ADVISORY NEW MEDIA CONSULTING COMMUNICATION STRATEGY