QREATE? “What happened to ‘Suburbia’?”
You may notice things have changed a wee bit on my website, nothing major really but I decided to switch to another domain name that I’ve had for quite a few years. Whilst ‘suburbia.org.uk’ has been my website url for about 13 years I felt it was time to mix it up a little bit.
I’ve been experimenting more recently with trying to post some short-form content such as interesting links, videos etc, onto my site first and foremost and having this content share out to social media channels. I’ve only got it automated out to Twitter and Micro.blog at the moment but I’ll look into Facebook, Instagram etc as well.
Generally I’m just experimenting with sharing content here initially and trying to get back to writing and blogging a bit more. So hopefully there should be a bit more activity going on here on the site at the new url of qreate.co.uk :)
I’ve still got all of the same content as before so take a look around my Projects page to see some of the things I’ve been working on. I’m also going to add a bit more about some of the freelance work I’ve been doing recently, in particular working with Ryan and Lyall at Agency of None on several things for Dundee Design Festival which was particularly fun and interesting to work on.
The Verge have an interview with Matt Mullenweg about the future of Tumblr now that Automattic has bought them. (Both a podcast and transcript of the interview).
This is pretty rad, make your own Game Boy games that can run in a browser or on your Game Boy!
A free and easy to use retro adventure game creator for your favourite handheld video game system
Great little mini-documentary film about a Japanese wasabi farmer.
I knew that most wasabi that we get is actually made from horseradish, I don’t think I’ve ever had real wasabi.
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.
(Follow and register using that link and you get an extra 100,000 credits!)
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.
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/
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.
A unique line-up of pro-skaters, community groups, NGOs, policy-makers and academics present a series of talks and Q&As exploring the social impact of skateboarding worldwide
There’s an amazing lineup of speakers for this event too so worth checking out if you’re in London or can make the trip there.
“But I loved the puzzle-like nature of working in sixteen-by-sixteen and thirty-two-by-thirty-twopixel icon grids, and the marriage of craft and metaphor.”