RWD Weekly #297
There’s no feature site this week because I’ve finally got around to fixing something I’ve been meaning to on the Am I responsive site.
There have been a number of tweets/emails over the past couple years t say that the Am I Responsive tool wasn’t working. 100% of these occasions have been due to one thing — XFrame Options. If your site is set so that Xframe Options are either ‘Same Origin’ or ‘Deny’ then you are not able to iframe that site on another domain. This causes a blank white space on the tool and no reference for the user… unitl now.
If certain xframe option headers are detected then the little message will show up on top of the screen to let you know. I hope that helps you understand why sometimes it doesn’t work.
Let’s get linking!
If you missed the podcast last week then check it out today. New edition coming up tomorrow.
Headlines
The Aggregator Paradox
Which one of these options sounds better?
- Fast loading web pages with responsive designs that look great on mobile, and ads that are respectful of the user experience
- The elimination of pop-up ads, ad overlays, and autoplaying videos with sounds
New Bootstrap themes
After the release of Bootstrap 4 a couple of weeks ago there are now a number of new (10) bootstrap free themes available. In addition, they’ve already created a marketplace for you to upload and sell your own themes from as well
Sponsor
Get Your Free .design Domain Name. Comes With Free Email, SSL Security, & More!
Grab a free .design domain name that reflects what you do as a designer. Unlike .com or .net, a .design domain name is more relevant and it helps with your branding. A .design domain name looks great on business cards, resumes, and as a custom email address. Your .design domain name comes with free email hosting, SSL Security & a free site builder.
Articles
Transparency and the AMP Project
Questions and answers about the AMP. I’m not sure the questions were suitably answered but it seems as though this is beginning to become more and more of a thing.
Everything you need to know about CSS Variables
This is an excerpt first chapter of a new book from Ohans on CSS Variables. Although just the first chapter and an introduction, this article does well to cover off 3 project examples with code pens as well.
The (Mostly) Complete History of Layout on the Web Part 1: Responsive Design
The history of the web told in weekly instalments. This week they’ve reached 25th May 2010 for Ethan’s article on RWD on A List Apart.
Automated Browser Testing With The WebDriver API
Spearheaded by the Selenium project, automated web testing is a suite of tools to author, manage and run test against browsers across platforms. It takes a lot longer to set up initially, but once done can save you countless hours and certainly a bit of sanity.
Empathy Mapping: The First Step in Design Thinking
An empathy map is a collaborative visualization used to articulate what we know about a particular type of user. It externalizes knowledge about users in order to 1) create a shared understanding of user needs, and 2) aid in decision making.
Tutorials
Designing A Perfect Responsive Configurator
Here’s a little challenge for you. How would you design a responsive interface for a custom car configurator?
My Talk Writing Process
Val Head takes you through her process of preparing a talk. Val has a lot of experience and I’ve always loved her talks so you’d do well to check this out.
Barrier Grid Animation: Illusions on the Web Part 2
This is the second in an article series discussing different optical illusions & mechanical toys and how we can recreate them on the web (and improve them).
Revisiting Margin Collapse
Margin collapsing is that when two or more margin value – vertically, top or bottom – adjoining into one. These margins have to relate – or connect – to each other in some way.
Learn CSS Variables in 5 minutes
CSS Custom Properties (also known as Variables) is a big win for front-end developers. It brings the power of variables to CSS, which results in less repetition, better readability and more flexibility.
Tools & Resources
Data Color Picker
Use the palette chooser to create a series of colors that are visually equidistant. This is useful for many data visualizations, like pie charts, grouped bar charts, and maps.
Create VR on the Web using Unity3D
This tool allows creators to publish and share VR experiences they created in Unity on the open web, with a simple URL or link.
Free Intro to Web Development slides (with demos)
Lea Verou is teaching UI Design and Implementation at MIT this semester and is providing her outline of the course and slides for you to enjoy.
Catalog
With Catalog you combine design documentation with real, live components in one single place, making collaboration between designers and developers seamless.
Command Line Productivity
Get the productivity system that eliminates too many tabs and endless Slack chats, putting you back to work. Buy and check this out, screen cast.
Video & Podcast
Whitespace on The Web! — with CSS Grid
CSS Grid makes it possible to have real white space on the web for the first time since we started using CSS for layouts. Having rows changes everything.
IBM Carbon — Responsive Web Design
How does a massive organization manage to unify countless responsive products? Mari Johannessen and Bethany Schwanke tell Ethan and Karen how IBM created its Carbon design system.
RWD Pocket Notebooks
The three tenets of Responsive Web Design can now sit comfortably in your back pocket. These notebooks are the perfect solution for quickly conveying design ideas to you colleagues and potential clients.
// sponsored
Jobs
Digital Designer (UI/UX) (Contractor/Consultant)
Wonderbly are looking for an experienced digital designer to join them for several short projects. In this role you’ll work with their Story Producers and Product Managers to create new user interfaces and creation experiences for customers making their amazing books.
Finally
If you have a position you’re looking to fill and want people just like you then get in touch so we can help you find someone through the newsletter.
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.
