|
Sponsor RWD Weekly and reach more than 24,653 responsive champions
Articles
This goes on a little further from what smashing talked about with their hierarchical visual design. It's a matter of getting most of the way there in a the design tool which is the path of least resistance and then finishing it off and "deciding in the browser ".
This isn't about RWD but it is about visual hierarchy in your design and this can relate very strongly to rwd. It doesn't matter if you decide to design in the browser or in Photoshop, going mobile first of desktop first; what matters is that you consider how the visual hierarchy will scale across multiple view ports to ensure the purpose of the page/site can still be achieved.
I've been doing a bit of reading of thhe same book. If you haven't already got a copy make sure it's something you do now.
Test with real devices, beware of the content focus, watch overlapping content and watch your viewport size. Derek goes into a little more detail, worth checking out.
With the arrival or responsive images another use case has appeared... if we Art Direct an image and crop it's appearance should we also update the caption along with the image?
Cheaper smart phones making a bigger splash, meaning RWD outside of predefined iOS breakpoints are well and truely a thing of the past — via @RWD
A practical guide to the logistics around style guides and creating pattern libraries.
If you think everyone is already supporting mobile then think again. A little more than a third of the top 100 brand sites still only have a desktop site... imagine the numbers in the top 1000, or 10,000!
Whether you agree with approach to off-canvas navigation or not is irrelevant in most cases. The point is that you should be testing how users are managing on the site and helping them achieve their tasks. This article does a great job of sharing the results, but most importantly taking you through the journey of how to get your own findings.
Taking the Zeebox example above a little further, this article looks at two other A/B tests on Booking.com and Exisweb to see how they faired.
Mr Tim Berners-Lee on RWD from this interview "It's really exciting. It's about getting the Web to lots more people. It's because of mobile that the Web is increasing so dramatically."
Tutorials
Aaron Gustafson runs through a tutorial on how to get responsive images working using Expression Engine, both using the <picture> and srcset approaches.
A great way to include a image gallery on small viewports and provide a smaller preview and full screen view at larger screens
It doesn't have a huge range of support across all browsers, but it is growing. You won't be penalised for using it, it'll only load/download where it can be used.
If you haven't checked out Chromes responsive testing options in web developer tools nows the time. We'll be putting a screencast of something similar together shortly.
CSS object-fit works on <img> the same way as background-size: cover works on background images. Unfortunately you need to specify the height and width of the container for it to work meaning it's not a solution for RWD sites.
Frameworks & Tools
The first responsive front-end framework based on AngularJS & Google Material Design specifications.
The IBM Design Language is a set of living guidelines that communicates a brand promise through our products’ experiences. The goal is to design for experiences that work together, work the same and work for the users.
Get Skeleton has upgraded to version 2. If you need a base responsive framework then check it out.
Lazy load your images even when using a responsive image solution like <picture> or srcset. There's even a working Codepen Example
This little JS plugin has a new home and some new features thanks to the hard work of @viljamis.
Podcasts
More than five million DJs discover new music using Beatport Pro. Robert Petro and Nikki Lee explain talk to Ethan and Karen about why a responsive solution that works across platforms was a no-brainer for their relaunch.
That's all for this week. Next week you'll be receiving the newsletter on Christmas day and it will be the first of our holiday season series. They will be focussed on
- Inspiration
- Performance
- Frameworks
- Tools/Plugins
I'll see you next week!
Cheers,
Justin
|
|
