Internet media. White Paper. Design in the Post PC Era

Transcription

1 Internet media Design in the Post PC Era White Paper Five years ago the PC Desktop and Laptop rained supreme as the to access an organizations Internet presence. Following the rise of the smart phone (iphone )3 in 2007 a profound shift has occurred. By a variety of metrics (memory sold, site visits, total units or sales volume) the Smart Phone and Tablet has or will soon pass the tradition desktop as the dominant Internet. This shift and the new technologies and platforms it has enabled has fundamentally changed the design process, this paper explores some of the issues. There are nearly 70 million tablet users in the U.S. alone, a figure that has doubled from the year before. This means that nearly 30% of the country s Internet users are browsing on a tablet. John Meyer UX Magazine Design-s Page 1 of 6 Copyright Stephen Trask

2 Desktop PC 2008 Design in the PC Internet Era QVGA HVGA The PC era design process was driven by some basic statistics: p iphone 480p market conversation system Mobile / Tablet CGA 240i WVGA WVGA WinPhone7 VGA 720p HD Android Desktop WSVGA SVGA Netbook x p XGA iphone4 WXGA WXGA ipad 95% + access the Internet thru a Windows OS 17" 19" LCD monitors 1200p UXGA WSXGA p HD 1080 SXGA XBox BluRay PS3 WinPhone7 WUXGA Apple Samsung 24 5:3 1536p 68% used Internet Explorer as browser the remainder used Firefox The majority of PC s had a screen ratios of 4:3 some where 5:4 or 16:9 and most had a Screen Pixel Density at or near 96 ppi WQXGA :9 QXGA 3:2 8:5 (16:10) 5:4 4:3 Design Issues where straight forward, the platform was a given, some consideration was given to screen, to use SVGA or slightly higher subset as a standard. What versions of Internet Explorer to support and which pug-ins to use. Flash being the most significant consideration. Flash by its scalable nature would solve many of these. It s different today! Design in the Internet Everywhere Era In 2013, Windows no longer dominates on the Internet. Flash is functionally gone, no longer shipping for most mobile s and being phased out at the OS level on the desktop. Mobile s have surpass PC s in total sales and traffic. Digital was once a one screen affair, it is now a multi-screen event. And a wave of new technologies coming: the long discussed merge of Internet and television, Google Glasses (wearable computing), the Corning Internet glass model, augmented reality s and the explosion of the Internet of Things, where all types of s cameras to cars are Internet enable. Steve Jobs unveiled the iphone to the public on January 9, 2007, at the Moscone Center in San Francisco. It s different Today! And tomorrow, whoa... Design-s Page 2 of 6 Copyright Stephen Trask

3 Internet Everywhere 2013 Desktop PC Tablet TRASKconsultancy Mobile Device Wearable Device Future is Glass 201* Design-s Page 3 of 6 Internet of Things Copyright Stephen Trask

4 Evolution of the Web Credits Made with some friends from the Google Chrome team 2011 & 2012 versions by Hyperakt and Vizzuality 2010 version by mgmt design and GOOD Sources Wikipedia, CanIUse.com, W3C, HTML5rocks.com and Mozilla Developer Network - Browser screenshots used in this infographic were sourced with best efforts from the web community. 1 How to design for the Internet everywhere? How to design for the Internet everywhere? It is almost impossible to test all technologies and all platforms. The matrix of screen, aspect ratios and capacities is huge. The design approach Traskconsultancy has chosen to pursue is three fold: 1. Standards (namely HTML5,CS3) 2. Sophisticated Server Platform 3. Adaptive - Responsive Design and Technologies Standards HTML5 HTML5 is a markup language for structuring and presenting content for the World Wide Web and a core technology of the Internet. It is the fifth revision of the HTML standard, as of December 2012, is still under development. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and s. HTML5 is not software that has to be installed but rather a new version of HTML. Web browsers must support this new version of HTML in order to correctly display web pages using HTML5 functions. Are we there yet? Fast. Secure. Responsive. Interactive. Stunningly beautiful. These are words that were not associated with the web until HTML5. HTML5 introduces many cutting-edge features that enable developers to create apps and websites with the functionality, speed, performance, and experience of desktop applications. But unlike desktop applications, apps built on the web platform can reach a much broader audience using a wider array of s. HTML5 frees users from the hassles of having to install apps across multiple s. They can start running a new app the instant they click a link or an icon. Design-s Page 4 of 6 Copyright Stephen Trask

5 2 Sophisticated Internet Architecture Traskconsultancy s Market Conversation System Brand Building in the Cloud provides the intelligent server environment. The current system 7 provides extensive support for HTML5 and version 8 expected to be deployed in 2014 will be HTML5 native. [MCS] is Build on Drupal. Drupal is open-source software distributed under the GPL ( GNU General Public License ) and is maintained and developed by a community of thousands of users and developers. The Drupal system architecture, combined with the structure and application of the [MCS] system, offers a unique brand building tool. Drupal can be readily configured to act as an Intranet or Extranet solution. Drupal is used as a back-end for a large number of corporations and organizations including Sony, IBM and U.S. Department of Commerce. See document MCS Overview for system specific details 3 516,844 people in 228 countries speaking 182 languages power Drupal Responsive Design - Adaptive Technologies Responsive web design is an approach to web design in which a site is crafted to provide an optimal viewing experience easy reading and navigation with a minimum of resizing, panning, and scrolling across a wide range of s. Leveraging the Market Conversation Systems Drupal architecture the system detects whether the current browser has a feature naively implemented or not. The Internet receives the content and media optimized for its capacities. The system detects your visitor s screen size and automatically creates, caches, and delivers appropriate re-scaled versions of the images. diagram adaptive 1.0 Internet desktop - tablet page detect and auto direct mobile s adaptive design and content Clients Vendors Staff Secure Area Admin NETWORK TECHNOLOGY Brand Development Program Brand Guidance [mcs] Sub-Systems /Newsletter Document Management Media Management custom HTML5 apps Press Area Brand Area Design-s Page 5 of 6 Copyright Stephen Trask

6 Example Adaptive 100% images Set 4:3 Horizontal 4000x3000 4:3 3:2 Horizontal 4000x2667 3:2 16:10 Horizontal 4000x :10 5:3 Horizontal 4000x2400 5:3 4:3 Vertical 2250x3000 4:3 3x2 Vertical 2000x3000 3:2 6:10 Vertical 1875x3000 ipad mini IPad -1-2 IPad x x x1536 iphone 1-3 / ipod Touch 480x320 iphone 4 / ipod Touch 960x640 16:10 Galaxy Note Nexus 7 Galaxy Tab 7.7 Galaxy Tab 10.1 Kindle Fire HD 7 [4] MacBook Pro 13-inch MacBook Pro 15-inch Kindle Fire HD 8.9 [3] Nexus 10 IMac 27 MacBook Pro 15 Retina 1440x x x x x1800 5:3 Vertical 1800x3000 5:3 Galaxy SII Nexus 1 Lumia 920 Nexus x x768 16:9 Horizontal 4000x :9 6:9 Vertical 1684x :9 Lumia 800 Lumia 900 Droid Droid 3 iphone 5 / ipod Touch Galaxy Nexus Galaxy Note II Galaxy SIII Microsoft Surface Thunderbolt Display 1:1 3000x3000 1:1 1:1 854x x x x x x x x1400 Thumbnails - Site and Brand Images Design-s Page 6 of 6 Copyright Stephen Trask