30.10.2017

Dirty Little Tricks From The Dark Corners … – tricks on responsive web design

In this presentation Vitaly Friedman from Smashing Magazine will teach you some of his tricks. Fortunately, to make things a little bit easier he made his slides in the form of a game. It’s called “Responsive Adventures” and there’s a few levels.

30.10.2017, added by infoShare

Vitaly Friedman is an expert in responsive web design and a guy with a very high level of visual esthetics. He likes top-notch, quality pages and knows plenty of ways how to get around media queries.

In this presentation, he’ll teach you some of his tricks. Fortunately, to make things a little bit easier he made his slides in the form of a game. It’s called “Responsive Adventures” and there are a few levels.

Level 1 is about fluid type.

That’s where you learn how to have all site components beautifully scale up and down whereas focus is on typography. It’s not that difficult. You can combine the calc() function in CSS with viewport units, add a little mathematics, use rem units properly and thus avoid visual breakpoints.

Level 2 is about hover and handling hover in mobiles.

Luckily you don’t need to rely on JavaScript to detect if hover is available as that can be solved now with CSS Level 4 Media Queries. And if you don’t want interaction on some of your elements just set pointer-events to none (pointer-events: none).

Level 3 is about selectors.

In this section, you learn how to make grids display fluidly in a variety of conditions. Using CSS quantity selectors you can build queries based on the number of siblings and CSS mod query selectors will help you make things even better, whatever the initial grid is like. As always there’s plenty of options – if you want to style items differently dependent on their grid position – use range selectors and – voila! you’re done in just a few lines of CSS.

And for those that are still with us (yes, it’s pretty advanced), there’s the last level.

It is about outbreak.

If you want some content to extend beyond the boundaries of a container there’s, of course, the CSS flexbox, but again there are alternatives. Using calc() in setting margins is one of the solutions, but you’ll also see how to use a CSS grid layout (display: grid) and get a great scale up and down effect. Just remember to use different techniques for browsers not supporting this solution.

But most of all, and that goes for every case he presents – it’s about efficient working, avoiding media queries as much as possible and making your website beautiful whatever the scale or device.

For more know-how on responsive layouts watch the full presentation:

Vitaly Friedman is the co-founder and editor-in-chief of Smashing Magazine, a quality publication for professional web designers and developers. He likes beautiful content, quality pages and effortless web design.

Tags: responsive, advanced responsive web design, CSS selectors, media query, avoid media query, hover, detect hover, CSS Level 4 Media Queries, pointer events, selectors, CSS quantity selectors, CSS mod query selectors, CSS flexbox, CSS grid layout, scale up, fluid scale up and down, fluid typography, avoid breakpoint