Another OS release, another great review by John Siracusa. Some might find John’s depth maddening (the review’s word count is probably larger than most other OS reviews online combined), but I think that’s exactly why it’s so essential. Treat it like a small novella: have a drink, sit on the couch and parse through the whole thing for a few hours on a low key night. If you love tech, it’s great entertainment.
With the keynote announcement of the new iPhone and Apple Watch this month, select parts of apple.com have undergone a significant redesign. Curious to see how Apple stacked up against its competition, I researched the front end tech behind their new home page, iPhone 6 and Watch product pages. With only the web inspector as a guide, it’s an imperfect look, yet overall I’m impressed with how far Apple has come since their last major redesign.
Much more was added with the September refresh. For the first time I spotted a Modernizr-like detection script that runs in the header. It illustrated Apple moving away from device specific styles and functionality (e.g. checking the browser user agent string to adjust content for iPad or iPhone) toward universal feature checks that adapt to whatever the browser supports. In addition, for both the iPhone 6 and Watch product pages, Apple delays select imagery from loading (Figure A) by a few seconds. This “lazy load” effect reduces page weight and increases page speed.
There’s also smarter use of animation as the user scrolls down each product page. Apple added CSS3 animations all over the iPhone 5S product page a year ago, but their usage has expanded significantly since then. Animations are smartly limited to opacity and 3d transforms that stay fast by leveraging the computer’s GPU.
My only disappointment was the lack of sprites for some imagery, most notably the sub “explore” menu on the product pages. Arguably combining eight or more images into a single request won’t make a large difference, but it still feels like a missed opportunity.
Responsive web design: B
For the first time Apple relies heavily on media queries for a legit first class responsive web experience. Apple has used media queries in the past, but mostly for small tweaks like moving a product image from landscape to portrait orientation. Now there’s a major breakpoint to radically alter the site navigation and most imagery has fluid sizing to take full advantage of mobile device viewports. There’s also a custom responsive grid for aligning select elements. SVGs comprise the top navigation, a subtle nod that the usual 1x and 2x raster images won’t cut it for super HDPI devices like the iPhone 6 Plus.
The responsive design motif is a big step forward yet feels mildly safe: I wanted to see Apple exploit native responsive imagery (the picture element or srcset attribute of the img element), especially considering iOS8’s Safari supports srcset. Apple also uses device-width and device-height heavily in their major break points which seems unnecessary: if I navigate to apple.com with a slightly narrow browser on my laptop, it feels odd to just cut off content and add scrollbars when there’s a better optimized view available.
Unlike past designs that relied on occasional text images or web safe fonts, Apple has transitioned mostly to modern, custom web typography. Myriad Pro is deployed at several weights throughout the site and it’s a manageable (albeit a bit higher than I’d like) download at a bit over 300k.
Nevertheless, I wasn’t crazy about several paragraphs of product detail that use the thin Myriad Pro Light against a low contrast background (Figure B). It looks great on HDPI devices (e.g. Macbook Pros with Retina Displays, modern mobile devices) but can be a bit hard to read on lower resolution displays.
Design and layout: A
Tech quibbles aside, Apple nailed their new design aesthetic for the home and product pages. They’ve done their homework in what’s common to modern design: generous white space, grid ratios, lots of vertical scrolling, “flat” layout that lacks depth and shadows, along with “full bleed” imagery that covers the entire browser viewport. Even carousels, controversial web elements that arguably lack engagement, are used well to highlight the Apple Watch. All carousel panes point to the same link and highlight the same product to avoid engagement issues. At the same time, the carousel’s huge imagery and slow transitions evoke a high-end, luxury vibe to match the aspirations of the Apple Watch itself.
Apple’s new design isn’t just a nod to modern web trends either; Apple sets off in its own direction with a few small flourishes (Figure C). First there’s Apple’s spin on the now ubiquitous “hamburger” menu icon for narrow width browsers: Apple uses two lines, not three. Also when users open the mobile navigation, the pages display a lightweight, scrollable navigation menu. It’s a big deviation from the expected “off canvas” listing where navigation covers the viewport or slides the existing content off to one side. I didn’t care much for the menu design at first, but it’s growing on me and does succeed in setting Apple’s design apart. I also really liked the “explore” on the iPhone and Watch product pages. It’s functionally a mega menu but the extra imagery and large hit targets give a more breathing room and a high-end feel.
Apple has come a long way since their last major refresh a year ago. Some issues with their responsive design decisions aside, they’ve finally caught up with most modern web practices. There’s even a few of their own “Apple-like” touches in their design to keep things fresh. Hopefully Apple will extend this design soon to other parts of the site, especially their support and e-commerce pages which are in serious need of a refresh.
There are hundreds of new features in iOS 8 and the ecosystem surrounding it that signal a far-reaching reimagination of what iOS apps should be capable of, the extent of user customization on an iPhone and iPad, or the amount of usage data that app developers can collect to craft better software.
Seven years into iOS, a new beginning is afoot for Apple’s mobile OS, and, months from now, there will still be plenty to discuss. But, today, I want to elaborate on my experience with iOS 8 in a story that can be summed up with:
iOS 8 has completely changed how I work on my iPhone and iPad.
I’d consider Federico a much more hard core power user than most, but his argument is pretty sound. For years I’ve been extremely envious of Android users and their custom widgets, keyboards, and third-party sharing capabilities. No more.
In light of today’s annual big Apple media event, Quartz’s Dan Frommer crunched the numbers of how these events historically play out. Frommer examines average presentation time, video style, Steve Jobs’ stage time versus Tim Cook’s and other material. Very interesting.
I have a habit of installing quirky screensavers on my Macs as a throwback to an earlier era. But with my latest Macbook Air I fell in line with the default settings sans screensaver, dissatisfied with what was out there. That all changed when I saw this screensaver by designer Robert Padbury, developed by Steve Streza. It’s a twist on the iOS7 lock screen with options for white on black or black on white typography. It’s minimal and extremely elegant.
Federico Viticci over at MacStories knows his iOS apps very well. The guy oversees and has written hundreds of posts for MacStories, so we shouldn’t be surprised given the high quality of writing over there that he’s very well qualified in his opinions.
If you’re looking for some fresh apps to start the new year I can’t think of a better list to start from.
If you’re an iOS user there’s a lot of app sales going on for the holidays. But there’s no better single sales grouping than over at App Santa. Very respected iOS dev teams with some excellent apps. I use Tweetbot, Clear+, One Password, and Launch Center Pro daily. I only use Scanner Pro every so often, but it’s essential for keeping track of receipts, especially on business trips.
Granted, if Nintendo started making games for mobile it’d still be making games, which isn’t a huge momentous change. But it does mean giving up on their commitment to hardware. And that leads us to the other reason it doesn’t make the switch:
For things that scroll or zoom, touchability means that the content under your finger moves with your touch, without any lag or jitters…
…For buttons, touchability requires something different. Touchable buttons need borders. By “borders” I don’t mean outlines, (although outlines are included in my usage of the word). I mean borders in a broader sense. A button is a tappable area, clearly delineated from the un-tappable content around it by an obvious border.
Native app design isn’t my background, but the switch in iOS 7 from clearly defined buttons with borders and gradients to raw text labels always rubbed me the wrong way. Jared makes a strong argument why. (via Jeffrey Zeldman).