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.

Updown.io

Just checking out this website uptime monitoring service, looks pretty good:

updown.io

(Follow and register using that link and you get an extra 100,000 credits!)

Also on:

GDPR, Privacy and WordPress

Over the last few weeks and months if you’ve been on any kind of email subscription list you have undoubtedly had at least one email (likely with a pleading tone!) asking you to re-confirm your permission to receive emails. These emails have all been prompted by the new General Data Protection Regulations, or more commonly by the acronym GDPR which is in force under EU Law as of May 25th 2018.

These impending regulations coupled with the fallout from the high profile Facebook / Cambridge Analytica data mis-use has brought the whole issue of data protection, privacy and handling of user data to the forefront of people’s minds. The consequences of mis-use of personal data provided to websites have been shown to be potentially far reaching.

Personal Data and Privacy

In the light of both GDPR and Facebook’s privacy issues the development community around WordPress has been quick to respond with enhancements to increase its compliance with the requirements of GDPR. WordPress 4.9.6 was released 17th May was a minor update in version numbering but added a few new settings and controls in the WordPress backend to help with compliance, the following is quick overview of what has been added and what the intentions are behind them.

After updating to 4.9.6 you will see a popup highlighting the new “Personal Data Export and Erasure” features that have been added to the Tools menu, along with a new Privacy feature in the Settings menu.

Privacy Policy

Accessing the new Privacy feature in the Settings menu will show a general overview of why you may need to add a Privacy Policy page to your website. Whilst GDPR is currently the most prominent regulation which may affect the legal need for a privacy policy page there are also other regulations in place around the world.

You can then select an existing Privacy Policy page if you have one or you can click the “Create New Page” option which will add a new page to your site with suggested privacy policy content, which you can then edit. Some of this content is more broad generic privacy information but some such as the “Comments” section details information that may be held when users comment on your WordPress site. So even if you do not have users logging in to your website it is important to note that the process of simply leaving a comment on your website involves the person doing so to provide some personal information in this process and the saving of cookies in the user’s browser. Subsequently there is a new permission checkbox on comment forms to allow users to explicitly consent to this.

Export Personal Data

In the Tools menu there are two new features added to provide a way to manage the personal data of specific users’ data on your website. Regulations like GDPR require that users are able to request to see all of the data that your website may hold about that user, the new “Export Personal Data” function allows you to enter the email address of a user which will then email a link to a zip file of all of the data held relating to that email address.

Erase Personal Data

The second new addition to the Tools menu is the “Erase Personal Data” function. This provides a way for any identifying information related to a user to be erased from the site. It’s worth noting that this doesn’t delete actual comments from the site but it does remove any way for these to be identified either on the front-end or back-end of the website.

You enter the email address of the user requesting erasure of their personal data into the field and then this will send out an email to the user asking them to confirm the erasure of their data, so it puts the ultimate control of this data in the user’s hands.

Are you a plugin developer?

If you are a WordPress plugin developer then hopefully you haven’t been oblivious to these changes that have been happening in WordPress core, but if not then it’s worth taking a look at the update guide for WordPress 4.9.6 as there is some impact on plugin developers. Particularly if your plugin handles any personal user data then this may be extremely important for you to get up to speed on: https://make.wordpress.org/core/2018/05/17/4-9-6-update-guide/

You should also have a good read through the Privacy section of the Plugin handbook: https://developer.wordpress.org/plugins/privacy/

What next?

These tools in WordPress core are just the start of an increased focus on user privacy and data security within WordPress and the many plugins in the WordPress ecosystem. You can expect some further additions in future releases and in particular new features added to third-party plugins in the interest of data protection and privacy.

Also on:

Dreamweaver CC Public Beta

Adobe have just opened up a public beta of a revamped version of Dreamweaver offering a lot of improvements and useful features for modern web development.

Dreamweaver’s had it’s share of flack over the years and not all unwarranted, but this new beta looks to shed some of the baggage of its 19 year history with a refreshed user interface and a new code editor based on the Brackets codebase. For someone like me who spends most of the time in code view (and who has split their time between Brackets and Dreamweaver for the last year or so) there’s some nice new features in there that make it a more compelling environment for code-first users.

Continue readingDreamweaver CC Public Beta

Cross-platform, cross-browser website testing with BrowserStack

Like many web design / developers I’ve made use of virtualisation applications like VirtualBox, Parallels Desktop and VMWare Fusion for Mac in order to test websites in the various versions of Internet Explorer. Using these apps requires buying the relevant Windows licences for the various virtual machines and also the overhead of keeping these current with the latest OS updates and browser / plugin updates too.

However, I recently did a fresh install of OSX on my Mac and decided just to remove all of the virtual machines due to the amount of space they used and had every intention of installing them all fresh and continuing to work that way. But due to project demands at work I had no time to do it and decided to look around for alternative ways to do some testing as I needed to do it for a project. I had previously used Adobe’s BrowserLab tool for quick static testing for layout issues in browsers but I needed something that let me browse sites and actually interact with the pages, and that’s where BrowserStack fits the bill perfectly.

How does BrowserStack work?

BrowserStack lets you connect to browsers running in virtual machines but directly through your browser, a bit like connecting to a machine via remote desktop. There are basically three steps to testing a site:

1.) Select the OS version you want:

BrowserStack's Operating System choices menu

2.) Choose from the available web browsers from that platform:

BrowserStack's Browser choices menu

3.) Enter the url of the site you want to test and hit the "Start testing" button:

BrowserStack's URL entry fields screen

The connection is then made to the virtual machine and rendered via the Flash plugin in your browser allowing you to interact with the site remotely, you can then easily choose from different OS and / or browser versions and then hit the "Update" button in the left hand menu and it will automatically grab the current url you are browsing and open that using your desired selection.

This how the site is viewed within BrowserStack:

Preview of site within BrowserStack

Overall it’s just a really easy to use system and lets you switch between different OS / browser variations much more quickly and with much less system overhead than using locally installed virtual machines.

It’s worth weighing up and pointing out some of the pros and cons of BrowserStack, there are few issues that might still cause you to choose running local virtual machines instead:

Pros:

  • You can run any OS you want on there including Win XP, Win 7, Win 8, OSX 10.6 Snow Leopard, OSX 10.7 Lion, OSX 10.8 Mountain Lion as well as mobile tablet OS / Browsers iOS, Android and Opera.
  • Quick to load up OS / Browser options.
  • Low overhead on your computer compared to running one or more VMs natively.
  • Developer tools such as FireBug installed on all browsers.
  • No new OS licences to purchase.
  • No OS updates or browser update hassles.
  • Low cost (from $19 per month for single user)

Cons

  • No Linux OS / Browser options.
  • You only get one browser option at a time, so if you’re using Win 7 with IE9 and want to test Firefox you need to select Firefox from the browser list and hit "Update" to initialise a fresh connection with only that browser.
  • Slow refresh rate for moving / animated content so it’s not great if you want to preview how well videos or animations run on your desired test platform. This is probably the biggest reason you may wish to test on local VMs instead.

So, that’s a basic overview of BrowserStack, but the best thing to do of course is try it yourself using the free trial which gives you 30 minutes (non-consecutive) to try out the full system.

Review: Adobe Dreamweaver CS5

Dreamweaver CS5 iconAdobe have just announced the new version of their Creative Suite software, CS5 adds a whole range of new features across the whole range of their applications.

As a web designer / developer it’s the updates to Dreamweaver CS5 that I’m most interested in. I’ve used Dreamweaver as my main development environment for years even though I’ve used it in a very code oriented way and haven’t relied much on the Design view mode in the application.;

Part of the reason I haven’t relied on the Design view aspect is that historically it was pretty poor at rendering more up to date HTML / CSS techniques. It was also unable to render the custom PHP code used in my own PHP applications or in any other PHP based CMS apps like WordPress, Drupal etc.;

Dreamweaver CS4 did bring some improvements with the addition of the WebKit framework as the rendering engine for Design view and Live view which solved a lot of the HTML / CSS rendering issues and added support for many of the CSS features that WebKit supports.

Improved PHP Code Hinting and Introspection, Live View

Dreamweaver CS5 takes those steps a good deal further and now adds greatly improved PHP Code Hinting which can discover your own PHP functions and classes as well as those in CMS frameworks WordPress, Drupal and Joomla. The major benefit of this for the Design view and Live view is that instead of a jumbled mess of un-renderable PHP and HTML code you get the actual site running right inside Dreamweaver.

Dreamweaver CS5 custom code introspection

When you combine this with the new Inspect mode you get the ability to inspect elements on your page and see the CSS properties used, it’s very similar to some of the features offered by the Firebug add-on for Firefox or Web Inspector inside Safari.

The combination of these features together make it a huge leap forward for code-based designer / developers like myself. If you’ve previously been put off by the rendering aspect of Dreamweaver before then it’s definitely worth checking out again.

What about HTML5, CSS3, Web font support?

There’s been a lot of noise about HTML5, CSS3 and Web Fonts (@font-face) in recent months, not least because of the prominent debate over Flash support on iPhone OS devices. A lot of people might expect Dreamweaver to add support for HTML5 and CSS3, however, at first glance you might be a bit disappointed.

David Powers over on the FoundationPHP blog wrote a great writeup of Dreamweaver CS5 in which he makes a valid point about the lack of prominent support for HTML5 and CSS3. The HTML5 and CSS3 standards are still evolving so it’s difficult for any IDE to add support for them without the risk of something changing or breaking, especially with the HTML5 standard.

Dreamweaver CS5 does however offer support for using the HTML5 doctype for your documents, also the WebKit framework used in Design view and Live view will also render many of the CSS3 features that the WebKit framework supports, so if you’re writing code by hand then you can still use and preview many of these CSS properties.

Dreamweaver's Live View rendering of Suburbia.org.uk

(The screenshot above shows https://suburbia.org.uk viewed right inside Dreamweaver’s Live View, note the TypeKit fonts rendering happily inside Dreamweaver’s WebKit based Live view).

Web Fonts are still a hot potato in many ways so as yet there is no direct support for adding those within Dreamweaver, but again WebKit will render them so adding the @font-face code by hand will get you there.

CSS3 Code hintsThe good news for CSS3 and Font-face etc is that Dreamweaver can be extended very easily to add support for, even better news is that I have already written a couple of Extensions for Dreamweaver which can be downloaded for free from the Dreamweaver Exchange, you can also read a bit more about them on the Projects page of this site.

I’m hoping to write on to add support for HTML5 tags too, with these extensions you’ll get code hinting support for adding these into your code. Please try them out and give me feedback as to how they can be improved and I’ll see what I can do to make them better. David Powers has also written an extension for adding / converting RGBa colour values too which is another handy tool, you can download it and other useful DW extensions from his Extensions and Tools page.

Improved Subversion support

Subversion version control support was added with Dreamweaver CS4, however I wasn’t very keen on how it was implemented and it lacked many features so I’ve continued to use alternative standalone apps for managing version control on OSX. Subversion support has been improved in CS5 though so it looks to be a more viable option now, I will try and give it a fresh comparison to see how it compares to the standalone alternatives now. One major difference in CS5’s support I believe is that Subversion can be upgraded without Dreamweaver itself having to be updated so this will help keep it more up to date.

BrowserLab integration

Adobe BrowserLab logoI’ve written about BrowserLab before, BrowserLab is a great way to test web pages in different browsers and Adobe has continued to improve it by adding more target browsers to the list as well as the ability to save local copies of the rendered previews as jpeg images.

The integration of BrowserLab in CS5 along with all of the improved Live view rendering improvements makes for a great development environment. BrowserLab has been a free service so far as part of Adobe’s Labs beta program, it will however ultimately be a paid service but purchasers of CS5 software will get included access for a year. Standalone pricing has yet to be announced.

Recommended upgrade

All in all Dreamweaver CS5 is a great step forward, it’s definitely got some genuinely useful improvements to offer my own code-centric workflow especially that I’m now using WordPress for many projects. I’d definitely recommend giving it another look if you haven’t been using Dreamweaver for any of the reasons I’d previously mentioned.

The A List Apart web design survey 2009

It’s that time of year again when A List Apart run their annual web design survey. Read the little explanatory blurb below that I’ve quoted from the website:

Whether you call yourself a user experience consultant, web developer, or content strategist; whether you design customer flows, buttons, or brands; no matter what title you hold as a full- or part-time web professional, your work shapes our future and ought to command the world’s respect. But we won’t win that respect without understanding, and we can’t hope for understanding without data and the knowledge it reluctantly yields to the patient hand and steady eye.

Now go and take the survey yourself!