Category: web standards

Posted on

WatchOS 5 adds support for web content rendering

Apple recently announced updates to the core software on all of their hardware platforms with various interesting new features.

One feature that jumped out when looking through it all was support for displaying web content in watchOS 5, it’s important to clarify that they haven’t added a standalone Safari app to watchOS but instead it enables any links sent via Mail or Messages to be accessed and then displayed right on the watch.

To get a quick overview it is worth taking a few minutes to watch the “Designing Web Content for watchOS” video on the WWDC2018 videos site as it gives a good overview.

Here’s a few thoughts and info about key aspects that I picked up from watching the video:

User navigation / interaction

  • You can scroll using the Apple Watch’s digital crown or via pan gestures
  • Double-tap to zoom in / out on the page content
  • Back/Forward navigation is controlled either via an overlay UI brought up via a  firm press on the screen or by swiping back and forward from the edges of the screen.

Web browser feature support

Content is optimised for display on the Apple Watch so certain features are not supported in watchOS 5:

  • Video playback
  • Service workers
  • Web fonts

If the web content being accessed is responsive then it treats the content as being 320px wide, the same width as if on an iPhone SE (iPhone 5 or older width). So text may be smaller but at least it will basically render the smallest breakpoint content, so it doesn’t require any new even smaller breakpoint to be catered for.

This is done by overriding the “initial-scale” value and provides a viewport with the dimensions 320px by 357px and reports a media query size of 320px. So existing responsive content will render on the Apple Watch without requiring any changes – at least from a layout perspective, worth noting the lack of support for Web fonts as this will likely have some rendering impact as it falls back to alternative fonts in the font stack do display.

Optimising content for Apple Watch

Even though responsive content will be rendered quite well by default it is possible to optimise content for display on Apple Watch.

The above image shows the standard responsive content being displayed on the Apple Watch, basically just the same as it would be on an iPhone SE (minus any web fonts of course!).

Responsive Layout on Apple Watch

Using a media query it is possible to modify this layout to display as a single column. There is an example given in the video which obviously won’t apply for all uses, but basically it uses “min-width: 320px” as the baseline for showing the content as two columns, so any content below that would render as a single column. Again, how this works specifically for your layouts will vary, but there will be some methods to use for frameworks like Foundation or Bootstrap etc.

“Disabled-adaptations” meta tag

The important addition to using a media query though is a new meta tag which disables the default adaptations that the Apple Watch makes when rendering content by default:

<meta name=”disabled-adaptations” content=”watch”>

With this meta tag in place the device width will be treated as the real width of Apple Watch’s screen. This again has similarities to how content was handled when the iPhone originally came out, existing content is displayed as best as possible but there are ways to optimise for the device if you want to.

Form controls on watchOS

Making use of HTML5 form control types is really important on watchOS, setting the type attribute to “email”, “tel” etc will bring up a specific, full screen UI to allow interaction.

Additionally making use of labels, placeholder or aria-label attributes enhance the context given when interacting with these controls. Hopefully you’re using these already but here’s another reason to do so.

Safari Reader on watchOS

This is a feature found on iOS and macOS which basically formats pages to show a more readable version of web page content. It’s a little unclear from the video but it sounds like pages that are “text heavy” will get displayed using Reader, although I’m not 100% sure how that would be determined exactly if so. Perhaps this is a way to handle big pages that might have a lot of adverts on it? Reader view is an option that users can choose by firmly pressing on any page to bring up the navigation overlay, so even if content is displayed normally a more readable version can be accessed.

Semantic markup in Reader view on watchOS

Reader view makes good use of semantic markup, using the “article” tag helps the display of content, and attributes like “item-prop” and other semantic tags like “strong”, “em”, “blockquote” etc enhances the display of content in Reader on watchOS.

Open Graph meta tags

Using Open Graph meta tags is something that makes sharing content around the web such as into Facebook, Twitter etc look better by providing specific preview content such as images, titles etc. watchOS makes use of these Open Graph meta tags to make the previews for any shared links look as good as possible.

That’s a quick overview of some aspects of watchOS 5’s support for web content, there’s definitely a few things to consider in there but if you’re building pages using responsive layouts and using semantic HTML then things should work fairly well without having to do anything.

The biggest issue I see initially is the lack of support for web fonts, that seems like it could cause some display issues due to the fallback to alternative fonts in the stack or if web fonts have been used for icons etc.

I’m also interested to know what the impact on battery life on the watch is like when loading and rendering multi-megabyte web pages which are not uncommon these days, I think Reader view is going to be an essential feature for viewing web content on Apple Watch.

Posted on

Outlook comes to Mac, will it make Microsoft ‘Fix Outlook’?

Microsoft’s Mac Office team recently announced that the next version of Mac Office 2010 will replace the Entourage email client with a purpose-built for Mac version of Outlook. This is interesting as it suggests that Microsoft see the forthcoming Exchange support built into Mac OSX 10.6 as bit of a threat.

The current email client in Mac Office, Entourage, is a poor citizen of OSX 10.5 due to its single database that is not very compatible with OSX 10.5’s Time Machine back up function. So Entourage was at least due for an update, however, bringing Outlook to Mac at least makes things a bit more consistent between Windows and Mac Office suites. I dare say a number of Windows to Mac switchers will be quite happy to see the addition of Outlook.

Will Outlook for Mac’s HTML email support suck like it does on Windows?

With the announcement I think many web designer / developers might likely have the above question in mind! If you’re not in the habit of creating HTML format emails then you may not understand what the problem is, basically since the release of Office 2007 for Windows the rendering of HTML emails in Outlook took a turn for the worse. Outlook 2007 uses Word’s HTML rendering engine to display HTML emails, effectively taking several steps backward in regards to rendering support in modern email clients.

Due to the poor HTML support in Outlook on Windows, developing HTML email newsletters requires using HTML formatting that hasn’t seen the light of day since the heady days of the late 90’s, table based markup, very little support for CSS markup. If you want to read more about this then head over to the Email Standards Project for lots of good information, and in particular this post: “Microsoft to ignore web standards in Outlook 2010 – enough is enough”.

The Mac Office team have indicated they will make Outlook for Mac from the ground up as a true Mac application:

Outlook for Mac is being built from the ground up as a Mac OS X application using Cocoa. It will have a new database that delivers a reliable, high performance, and integrated experience with Mac OS X. Users will be able to back-up with Time Machine and search email, calendar and contacts with Spotlight.

So I’m reading from this that as it’s using Apple’s Cocoa frameworks that it will make use of the WebKit rendering that Cocoa provides to render HTML emails. As such it should have excellent HTML rendering capabilities, which incidentally the current Entourage application already has. So Mac users should have a good experience regardless of whether they use Apple’s Mail or Outlook email clients.

However, there’s a potential problem. The Windows Outlook team have so far stubbornly denied any need to fix the problem with HTML rendering in Outlook on Windows and indeed seem intent to release Outlook 2010 with the exact same rendering support. As the Outlook team seem to think that the Word HTML rendering engine is appropriate, will they mandate that Mac Outlook should render emails exactly the same way that the Outlook for Windows does? Will they make Word the rendering engine for HTML emails in Outlook for Mac?

If they don’t then basically they’ll have a potential lack of interoperability between Outlook on the different platforms, Outlook for Mac will offer good support for HTML email (as it already does with Entourage), and Outlook for Windows will suck. I’m not sure that Microsoft will be happy with that seeing as Office is one of their flagship products and will want to make the experience the same. The question is, if that is the case then which side will yield?

Email Standards are Web Standards

Regardless of your opinion on HTML emails* it’s a big issue, whether you like or dislike HTML format emails the reality is that they’re here to stay, support for web standards and good layout practices should be encouraged, regardless of whether that HTML is rendered in an email client or a web browser. The recent Fix Outlook campaign hopefully sent a strong message to Microsoft about how the development community feel about it. Let’s hope Outlook for Mac doesn’t come with the same support as it’s Windows counterpart and that the discrepancy between their rendering engines forces Microsoft to step up and make Outlook 2010 for Windows include improved support instead of dumbing down Outlook for Mac!

Update:
There’s a new site launched by a couple of employees from Microsoft, “Make Office Better”, it introduces it’s purpose stating:

Hi! We’re two Microsoft employees looking to collect customer ideas on how to improve Microsoft Office. If you’ve got a new feature idea or an idea on how to improve Microsoft Office, please share it here…and vote on other ideas you agree with. Through the magic of crowd-sourcing the best ideas should rise to the top.

What’s great about the ‘magic of crowd-sourcing’ in this case is that the number 1 Office issue that people want to see fixed is “Improve the HTML support in Outlook“. Well, they asked for feedback!

~

* And don’t say “HTML emails suck, everyone should just use plain text emails”, HTML emails will stop being used around the same time that everyone adopts XHTML 2. If you don’t like them then you can always use a mail client that can force the display in plain text!

Posted on

CSS Naked Day 2009

It’s that time of year again when many websites suddenly lose their inhibitions and let their inner-html run free!!!

Well, kind of, it’s CSS Naked Day 2009 so that’s why Suburbia is appearing the way it is for a 48 hour period (it’s an international ‘day’ so the site stays naked for 48 hours so that both east and west get to see the naked sites!).

What’s the point of it all?

The idea behind this event is to promote Web Standards. Plain and simple. This includes proper use of (x)html, semantic markup, a good hierarchy structure, and of course, a good ‘ol play on words. It’s time to show off your <body>.