Apple Tweaks Website Design: Adds HTML5 Animation [video]

Wednesday, January 26, 2011
By OP Editor

Last night Apple Store site was closed for an update. Some people speculated Cupertino is adding the white iPhone 4 for sale, but it turned out to be a design tweak.

Apple website design update, 2011

Apple Menu Bar Update

Apple made a subtle change to its menu bar, using a darker color instead of the aluminum / brushed metal look, macrumors noticed. (Graphics by Apple blog ObamaPacman.com):

Apple Navigation Bar 2011 update

Apple Adds Classy HTML5 Animations

Apple also introduced subtle and classy HTML5 animations:

The new Apple HTML5 animations include:

  • Products zoom into the display window when page loads
  • When you select different product category (use mouse or arrow keys), the Apple products races to line up, jiggling slightly as they stop to stand at attention
  • Apple website menu bar drops down (when you visit any apple page the first time in a new tab (28 seconds in video), otherwise the menu fades in)
  • Search bar stretches out when you select it (not shown)

The new Apple website HTML5 animations can be seen on the Mac and iPod page. Works on latest Safari (5.0.3) and Chrome (8.0.552.237) browsers. It degrades gracefully with no animations in Firefox of Internet Exploder Explorer.

Apple Navigation Design Optimization

Apple Navigation Menu Design update 2011 January 26

Apple reduced the navigation menu file size too. The older Apple globalnavbg.png takes 29KB, while the new elements, consists of 3 PNG files, take up a total of 16KB. That’s almost 50% file size reduction.

Meanwhile, white iPhone 4 remains elusive just like double rainbow and Duke Nukem Forever.

Share

Related Posts

  1. Leaked: CBS Making Website iPad Ready with HTML5 Video Playback
  2. Apple Adds: CBS, National Geographic, Nike, Spin to HTML5 enabled sites
  3. Microsoft Internet Explorer 9 web browser Follows Apple & Google’s HTML5 Lead
  4. Apple Website Design Hints Aluminum to Liquid Metal MacBook Pro?
  5. Microsoft Improves Firefox, Adds H.264 Video Codec Support

Tags: Analysis, Apple, HTML5, Video

Site Search

iPad Air 2 Case

Popular Tags