Am I Responsive

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.

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.