Responsive Design Weekly #211

Welcome to edition #211

Hey everyone and welcome to a very special edition of responsive design weekly. There isn’t anything new and ground breaking with regards to the specific topic of responsive design or the web in general but instead it’s edition 211, which I will for ever look at as 2 + 1 + 1 = 4.

That’s right we now have a baby (Mum and baby doing great)! More about that at the end of the newsletter though, for now lets get to the links!

Headline

DevTools Device Mode

This short video (4:18) takes you through all of the new tooling capabilities that are available on Chrome Dev Tools. Responsive mode, throttling, media query view, rulers, add to home screen etc etc. They pack a lot into only a few minutes.


Our Sponsor

Make your own fonts in Illustrator

Make your own fonts in Illustrator

Now you can create your own fonts in a matter of seconds, right inside your favorite graphics editor! An easy-to-install Illustrator CC add-on, Fontself Maker lets you convert your own lettering into actual usable fonts! Simple drag and drop makes the process almost instantaneous. OpenType font file exportation finishes up the job nicely! See the video


Articles

A Crash Course in Technical Responsive Web Design

From the make up of media queries to the technical considerations of the implementation of your sites, this Treehouse post has got some worthwhile tips.

When Responsive Sites Are Just Not Enough

This is actually a good description of adaptive RWD from a RESS point of view.

Too often I have seen people calling for different content on pages because of screen size, but instead p this article explains that you might only want to link to the content in the first instance and pull it through onto the page in another.

The real responsive design challenge? RSS.

RSS is a design challenge in itself after all of you is and CSS has been stripped and replaced.

DRY: Do Repeat Yourself

its all about progressive enhancement.

Speed up page load with WOFF 2.0 fonts in Microsoft Edge

Microsoft have announced that they will be supporting WOFF 2.0 fonts, and now all eyes turn to Safari as we begin to tap our watches and see how long it will take them to do the same. WOFF 2.0 offers more than 30% saving in WOFF 1.0 file size so this is an important step in terms of performance.


Tutorials

Switching to HTTPS on Apache 2.4.7 on Ubuntu 14.04 on Digital Ocean

Not sure why this needs a comment, the title pretty much says everything. Moving across to HTTPS is important and recommended these days, plus search engines will begin to use them as a ranking algorithm so there’s LOTS more then just being secure to gain from the approach.

How to Create Responsive Guides in Adobe XD

If you’re getting started with the new Adobe XD here’s a quick tutorial on setting up some responsive guides.

CSS Grid Layout and positioned items 

Positioned grid items have some special features that will be explained on this blog post.


Tools & Resources

EQCSS • Element Query CSS

EQCSS is a JavaScript plugin that lets you write element queries inside CSS today. With performance in mind, this plugin is written in pure JavaScript, so it doesn’t require jQuery or any other libraries on your page in order to function – add EQCSS.js to you HTML and you’re ready to get started!

Release Version 6.2.2 – Europa

My favourite responsive framework was updated recently, Foundation, with lots of key bug fixes and the Sticky plugin had a make over. Check out the change log.

Browser Calories

This is only available in Chrome for now, but once you add the extension it puts a donut next to the address bar. Each time you hit the donut it calculates the current page performance. Neat.

Finally

See you next Friday!
Cheers,
Justin.

Responsive Design Ebook

A collection of interviews, tips, tricks and some responsive sketch pages in one easy to download file.

Learn from more than 26 leading responsive design experts across more than 80 pages for the price of an expensive coffee. Or, think of it like buying me a beer to say thanks for sending you a newsletter each week…. plus you’ll learn tons too.

Buy Now for just $6.99

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>