Hello again and welcome to this week's responsive design weekly newsletter.
This week we take a look at a couple of different options for helping your images load faster using sizes and client hints, Una takes us on a logical styling exercise with CSS, and there's a number of CSS Grid helpful tips and tools.
Let's get linking.
Headline We spend so much time browsing the web that we hardly even think about the browser as an app. And while the web itself has undergone big changes in the last twenty years, browsers have remained largely the same. Refresh is a concept for a modern web browser based on iOS Safari.
Jeremy shares the experience that Clearleft have had while designing and deploying the Virgin Holidays app onto mobile. If you have read anything that Jeremy has shared in the past you will know that he'd be a huge proponent of the Progressive App approach, however the client decided to go with the Hybrid App in the end. Why? Well it seems it was two reasons. The first was that at the time iOS hadn't provided support for Progressive Web Apps so a large number of customers wouldn't be able to use the product. That has changed now.
The second reason is a harder mountain to climb. The client believes that their users expect them to be in the app store, so they need to be there. While stores like Windows are going to include Progressive Web Apps as a first class citizen (and rightly so) I'm not sure that Google Play and Apple are going to have the same open approach. I agree with Jeremy in this, I think by building it first you will get people visiting the site /first/ on mobile through the web, and then because of such a great experience they won't worry about going to find it on the app store itself. Now, the only thing that gets in the way of that is Apple opening up the ability for the Service Worker to work within browser apps that are not Safari (like Chrome and Firefox for example).
I had a bit more to say about this, so I wrote a post.
| | | Jamf Now is an on-demand mobile device management (MDM) solution for the iPad, iPhone and Mac devices at work. We make management tasks like deploying Wi-Fi passwords, securing company data and enforcing passcodes, simple and affordable, so businesses can support their users; no IT required. Create your free account! | | Articles Una has some great uses of CSS for logical styling. I've always used server-side techniques to allow the right CSS to be applied on the front end, but that involves creating multiple hooks for the styles and can also be limiting for any single page web app style sites.
Responsive images have been around for a while now, but I'm surprised how many sites I work on that don't take advantage of the Sizes attribute to ensure the right image is being downloaded at the right time. Chris goes through a great overview of how this works.
A really great article from Nick Heer about the garbage that seems to be polluting our sites these days.
A reply from Chen Huijing on Ben's article last week about CSS Exclusions.
Tutorials w_auto ensures that end-users receive image resources that are sized to fit the image's layout size. Usually, that means scaling down an image, which reduces image bytes and makes for a faster experience.... by up to 42%.
Annoyingly this is one of the Medium premium articles, so I apologise if you've already viewed your three for the month. This a very visual reference and explanation of the key concepts around CSS Grid and how you might apply them.
In this tutorial, Claudia Romano takes us through how to set up SCSS Mixins to deliver a 2 dimensional CSS Grid, as well as a 1 dimensional flexbox Grid and an overlapping CSS Grid. It gets right down to the details, however I feel as though the Mixins are going to be overkill for 90% of the work that I personally do. My favourite thing about Grid is how simple it has made creating layouts.
It's amazing what CSS Filters can do these days (well, they've been doing it for a while but not that many people have been working at it). In the days of Instagram making the pictures of our life look so much better this is something that you can use on your own sites.
Tools & Resources
A11Y Nutrition Cards is an attempt to digest and simplify the accessibility expectations when it comes to component authoring. Based on the WAI ARIA Authoring Practices Guide.
Welcome to our CSS Animation course curious CSS explorer! We will walk the evolution path of a civilization and conquer deep space.
Layoutit is a great tool that will allow you to set up a grid visually using this little tool. If you're still unsure, try this.
StyleURL is the easiest way for developers & designers to collaborate on CSS changes.
This little tool allows you to visualise the three different Axis of variable fonts through a 3D box. It lets you update the Weight (axis 1), Width (axis 2), and Optical Size (Axis 3).
Pushbar.js is a tiny javascript plugin for creating sliding drawers in web apps. It is fully customizable and dependency free.You can use it as sidebar menus or option drawers.
| |
Thanks to those that suggested some of the links for this week, if you have come across something that you found interesting, or have written yourself, hit reply and let me know.
Cheers,
Justin. | | | |
No comments:
Post a Comment