RWD Weekly #262 | Responsive Web Design

RWD Weekly #262

Welcome to RWD Weekly edition #262.

This week I took a closer look at CSS EU Conference website and added the site to the examples section along with the review on how some of it was put together.

Now then, let’s get started.

Snippet Show

There’s a cool implemenation method that has been thought of when declaring CSS Grids.. Let’s take a look:

.container {
display: grid;
/* Display as a Grid */
grid-template-columns: 1fr [article-start] minmax(0, 50em) [article-end] 1fr;
/* Sets a three column grid of 1 fraction wide column, minimum 0 maximum 50em wide column, and a 1 fraction wide column. It also names the line between column one and two 'article-start' and the line between the second and third column 'article-end */
}

When you declare a column line the same name but end it with -start and -end it will use that name to describe the area between those points, which can then be used to place items on the grid. For example

.article {
grid-column: article;
/* This places the .article element starting on column line 2 and ending on column line 3 (i.e. occupying the center column), the same result as if you had of written grid-column: 2 / 3 */
}

There is more to this story which Rachel Andrew explains in a tutorial below.

Sponsor


Mirror Conf - a conference designed to empower...

Mirror Conf 2017

Mirror Conf is a conference designed to empower designers and front-end developers who have a thirst for knowledge and want to broaden their horizons. It aims to create the perfect set to blur the differences between these two worlds and point towards a more collaborative future. Use code ResWebDes for a 10% discount.

Register using code ResWebDes

Articles

Welcome to MACH and BETTER

NBC are on the road to a redesign and it’s looking awesome. They seem to be heading very much down a similar path to Bloomberg but I like that path. Check out the way the peacock has been incorporated into the new style logos. Awesome.

First impressions of my HoloLens

I’ve been dabbling a little bit into WebVR since seeing a presentation from Ada Rose from Samsung Internet, and I’ve been pushing our clients recently to bring the HTC Vive and the content created on TiltBrush in particular into their web experiences. Now Microsoft are bringing HoloLens to the market and there’ll be something new that you’ll need to start looking at. Check out Christian’s first impressions.

Namespaces

A story from Dave about job titles. Whenever someone asks me what I do I just say “I build websites for people”…. seems to wrap up a fair bit.

4 Things I Know About Pattern Libraries

Dave has got back into his writing and included some very valuable lessons for anyone working on, or thinking about working on, pattern libraries or design systems. My favourite part of the article is “Plainly, people who sign checks don’t give a sh** about your components until they see the full pages.”

Left to our own devices.

Ethan points out while it’s great to test on our own computers and phones it is important to test on the devices, and network conditions, that our end users are most likely to be using.

Intelligent Tracking Prevention

Although Safari has been slated recently as “the new IE6” WebKit seem to be moving forward with certain things that are of wider benefit to the web. This new feature will ensure that Cross Site Tracking is limited. This may have a knock-on effect for positive elements like managing single sign-on. There’s a call for testing and a link to the bug tracker along with details for a developer evangelist.

Google not, learn not: why searching can sometimes be better than knowing

A great example of why you shouldn’t be embarrassed to have to look up how to do a for loop in WordPress.

Fun with Viewport Units

The final example on this tutorial around viewport units is GREAT! A scroll indicator that is based on on background image and viewport height.


Free eBook: How to start a WordPress maintenance business 
//Sponsor

Our 50+ page eBooks covers everything you need to know to start your WordPress maintenance business.


Tutorials

Best Practices For Hero Images

10 elements to look for when you’re designing a large hero image for your site. I’m impressed that 2 of the items pulled out are around performance both from a responsive images point of view and on how to track the load time of the image itself. One thing that isn’t covered here are some techniques to ensure the image remains visible and impactful across a variety of different viewports (maybe one for me to write).

✨Locally Scoped CSS Variables: What, How, and Why

One of the example sites I put up this week was the CSS Conference Event site who used CSS Variables throughout. I included a brief description about when they might be helpful, but Una nails it with this post all about the times when you could and should be using CSS Variables.

Breaking out with CSS Grid explained

Another terrific CSS Grid tutorial explained by Rachel Andrew. This follows on in a lot more detail from our Snippet Show this week to explain the whole way the naming of lines and areas work with CSS Grid.

Building a Directory with the Twitter API

A step by step walkthrough from a tweet to an amazing site that pulled in 15k views on the first day and is getting better. I’m particularly impressed by this because it’s helped me approach a little web app I’m putting together (the wrong way apparently)

Creating an interactive SVG metro map with JointJS

A nice little tutorial and plugin to create tube/metro like maps with nodes of information (or train stops as it were).

How the minmax() Function Works

Last week we featured the min-max sizing for CSS Grid but only a version that would create a responsive grid. In this tutorial, Ire goes through each of the different options you have to set the min max values and how that will allow you to deal with element sizes and how the content will respond.


Tools/Resources

imgix Page Weight Tool

Slow-loading images drive users away from your website—find out how to fix them with this free report.

Amazon Alexa Voice Design Guide

Voice is an input that has been around for a while and with the mainstream arrival of Alexa and Google Home we should be looking at ways in which our websites can be incorporated into this new medium. This set of guidelines from Amazon help you map out the best way to get started

A service worker module for Processwire

If anyone uses Processwire CMS then this little module has been developed for you by Johannes Daschsel to create service workers from within the CMS. The code is up on GitHub, so technically if anyone wanted to port it across to other CMS the framework is there at least.

3,600 Icons With Personality

These look like some amazing icons, and you can get started with 100 for free.

svgi, the SVG inspection tool

svgi is a CLI tool to inspect the content of SVG files. It provides you information about the file, the elements in the SVG and the hierarchy. It also count the number of elements and in the future, it will provide tips to improve the SVG

Best websites a web developer should visit

Programming, Web Development, and DevOps news, tutorials and tools for beginners to experts

A BIG list of Progressive Web App tips & tricks

Pretty much says what it does on the tin.  It’s a big list. It’s a list of tips and tricks, which all have to do with Progressive Web Apps.


Jobs

Join the Web Performance Team at the Wikimedia Foundation!


Finally

Finally, if you have written or read anything recently that you think others might be interested in then please send me an email back to let me know.

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.