Hey everyone and welcome to another responsive week full of helpful articles, tutorials, tools tips and tricks that will help you in your day to day work as well as any side projects that you might have on the boil.
I felt a little silly this week while I was out to dinner on Tuesday night speaking with Jay from the Adobe XD team and Ian, a lead designer from an App Development agency in London. We were talking about various programs that we use for our day to day work and Ian mentioned that he'd like to be using xD but the client he was working with was locked into a Sketch and Zeplin workflow.
A few seconds passed and, being someone who never shy's away from a stupid question, I piped up to ask what Zeplin was.
If you're like the other Million customers they've already got you'll know exactly how awesome Zeplin is as a product, but for those of you that are in the same dark room I was in here's the low down.
You know that part of the project where you hand off the designs from Photoshop or Sketch over to the developers to build the Website? Wel, Zeplin takes that Photoshop or Sketch file and provides the developers with the technical details they need. This includes all the assets at various densities (1x, 2x, 4x etc), as well as the font-family, font-size (in pixels), line-height, margin, padding, widths, heights and all the other measurements and you might need to plug into your CSS.
It probably goes without saying, but this is now being worked into our own agency workflow although it does mean our designers are going to have to start producing the PSDs withing Art Boards and layer up things in a more particular way. A small trade-off to keep everyone on the same page and a headstart for the developers, I'm sure you'll agree. | | Headlines This is fundamentally why it is taking so long to get to container queries. Aside from the recursion issue, it's actually really expensive for the browser (from a performance/rendering point of view) to incorporate it at this point.
| |
Are you working with Responsive HTML & (S)CSS, Bootstrap, Foundation or WordPress themes? See why features like Visual tools for HTML and styling, Live SASS editing, Multiple page views and CMS support make Pinegrow Web Editor a great addition to your web development toolbelt. And, get 25% off with the coupon RWD108. | | Articles Brad Frost explains why Day 1 is the best time to launch your style guide website and begin your design system. A lot of great resources and advice in this one.
Along with the announcement that Safari is going to be supporting Service Workers, the webkit team has also provided the ability to add .mp4 silent videos to <img>. There is a word of warning from Bruce in this article though, very important to know if you're using <picture> I think this is a really interesting point from Jeremy. The whole point of GDPR is to get a users consent to track any information about them, and with Google Analytics setting tracking cookies for all visitors cross site will we need to gain consent for that as well? If so, who's responsible... is it the Product owner (Google) or the Site owner (you)?
Brads article talked about getting your style guide ready for the design system and this article from SEEK show's how they do it internally and keep the designers and developers working in the same mediums (or at least linking those two together).
Talk about pushing the boundaries, I love this! The team built a shared web-based augmented reality experience.
I've been using Delicious Brains plugins for Wordpress for an age so I was excited to see their new design. An amazing effort and a great write up on the whole process.
Colour contrast and WCAG guidelines can put the most beautifully designed site into disarray. Thankfully, Ida Aalen has written this post on a tool that allows you get the colours right BEFORE you start the design.
This isn't just about designing the best table, but instead how you should approach design problems and follow a plan to get the best possible results at the end of the project.
Tutorials Using augmented reality to show which appliances/devices were using the most energy.
A journey into the world of ARCore, A-Frame and more! Let Uri take you on a walk (as well as his generated AR animals) through the process of building out your very own AR experiences on the web.
If you're adding 360 videos to your site using the <video> tag then you should also drop in the 'dimension' attribute as well.
If you're looking at including Service Works on your site, or one of your client sites, you should certainly make sure you understand the issues you could accidentally cause during implementation.
There's not a lot more I can include in addition to the article title.... but IntersectionObserver is definitely going to be a big thing this year as the support picks up.
Marker-based Augmented Reality on Web for learning Alphabets words for kids using AR.js and A-frame.
If you're just getting started in design and you find the task of picking a Font for the new web design project a difficult task then Google have the answer for you. Follow these basic tips and you'll be choosing and pairing fonts like a pro in no time.
A lot of us are probably very familiar with different image optimisation techniques to help lower our page load times, but video is something that we tend to just take what we have and put it up there. This tutorial walks you through the approach you should take with your own MP4s.
Tools & Resources Get inspired by real and live sites collected from bloggers, designers and developers that are using CSS Grid Layout. You can add your own through their contact form as well.
An open-source analog interface for digital music
System / Components to build WebXR experiences with A-frame
Jobs The Digital Concert Hall is the leading classical music video streaming service, available worldwide on nearly all media platforms. We're looking for passionate developers who like to deep dive into specific client-side areas and love to collaborate.
Add to your creative toolbox. You can push pixels, but can you build a responsive web design? Start your path to becoming a front-end web developer, or brush up on your skills with our CSS course.
Claim your free trial
// sponsored
That's all from me this week. If you've read something interesting, or even better yet if you've written about something you've done please hit reply and share the love/knowledge/link.
See you next week.
Cheers,
Justin. | | | |
No comments:
Post a Comment