Hello again and welcome to this week's responsive design weekly newsletter.
This week I've spent a bit of time commenting on each of the links, so let's bypass this introduction and get into it!
Let's get linking.
Headline Tim replies to the post last week from Eric around HTTPS and the negative impact it can have on users who are accessing content through a proxy thanks to their situation (expensive data, high packet loss, low caps). This is a problem that we need to discuss more and find a solution to, and as Troy Hunt pointed out in another response the first step is for everyone to reduce the size of your webpages. That act in itself helps reduce the requirement for the proxy for data saving in the first place.
"But aren't we already used to stretching such guidelines, building responsive interfaces that work across viewports? Shouldn't we let go, because we cannot control a user's browser?"
This comes back to the questions "Does the site need to look the same in every browser?" (the answer is no by the way). We already change the site look and feel between breakpoints using responsive design, what's the difference in allowing the same thing to happen when Grid isn't supported? As long as we PLAN for and DESIGN around the issue, what are we worrying about? It's about getting your boss/client to understand this.
| | | 450+ pre-designed flexible blocks are ready to use for your web projects. Pages created with Tilda look great across all devices. So you can focus on content, not code. | | Articles This is featured in the tools section this week because I think it's a pretty damn fine and helpful tool (which I now use instead of the other tool I mentioned). In this article, however, Andy goes through the process of how he put it together progressively and explains why he thinks it has made this such a great success early on.
It's great to watch two top talent people in their own fields riffing back and forth to create something amazing. Brad Frost and Dan Mall show how they work collaboratively together to produce amazing results for clients.
This is a mantra that I've heard Jeremy Keith say, and it's something that I encourage every single person I speak to who asks me how they can learn/improve the work they do. Most often people say "But someone else has already written about it" to which I reply "Yes, but no one has ever had your experience and take on the subject before". Sara is write (pun intended), you should write as often as you can.
After switching to AMP pages there were some issues with the conversions. A coincidence? Potentially, but there are a few issues that are pointed out around implementing AMP that I wasn't aware of in the past.
A high level guide for designers and developers who write CSS, but want to be more strategic about building moderate to large scale CSS systems
Progressive web apps have come a long way over the past three years. I remember listening to Jake bang on about the service worker in a Shop Talk podcast and feeling overly excited about the possibilities. Now it's in more than one browser, and so much more can be done. In this article Paul Kinlan looks at where it should continue to grow.
There's a new spec in town and it's all about units! Exciting! There are new unites including vi (1% of the viewports size in the root elements inline axis), vb (not the rubbish australian beer, but 1% of the viewports size in the root elements block axis), ic (average character fullwidth glyph), cap (nominal height of capital letters in the elements font), lh (line height of the element), lhr (same, but for the root element). There's a bunch more too, go check it OUT.
Can you ace a frontend interview? Make sure you can. Pramp, a peer-2-peer mock interviews platform allows you to practice for free on demand. Pramp's matching algorithm will make sure you'll get to practice with other awesome coders like yourself.
Only Responsive Design Weekly subscribers are enjoying unlimited interview credits - just use the link
// Sponsor
Tutorials
Michelle Barker goes through a bunch of different creative approaches for using CSS Shapes to make the presentation of text a little more interesting. It's not supported in some browsers, and unfortunately the fallback isn't the best to look at. Remember, if you're using techniques like this to try and also incorporate @supports and build solid fallbacks (or better yet, start well and enhance)
CSS scroll snapping allows you to lock the viewport to certain elements or locations after a user has finished scrolling.
Four different menu animations for menu button toggle between dots, cross and back icon.
While I didn't find this interesting to create JSON-LD Tags for blog posts, with the recent rollout of Google for Jobs across the UK and the INability for Application Tracking Systems to be easily updated it was a win win to provide Google with the data it needs. I'm sure you'll find other interesting ways to use this technique.
Tools & Resources
Load 2 or more pages side-by-side to visually see the difference in page load. Optional desktop viewport and throttling settings.
When you land on the site, some tests are run on your browser. The tests are against data that any website can gather, but it displays the data in a format that's easy to read. The hope is that the data will give developers some useful information about a user's browser if they are struggling to track a bug down.
Similar to the tool above, but it also includes the IP address, Java Version and if websockets are supported. It also gives the User Agent String.
Learn all about the properties available in CSS Grid Layout through simple visual examples
About to go live with a site? Are you sure you've covered off EVERYTHING you need to? Try going through this check list and see.
Inspect Element on steroids: study how things are made on the web in real-time and copy computed styles with no hassle
| |
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