Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Improve Your Designs With The Principles Of Continuation And Common Fate (Part Three)

Creating an effective web design is like putting a puzzle together, with the various parts coming together to tame the chaos and form a whole, well-organized design. At the foundation of this organization are the gestalt grouping principles.

Improve Your Designs With The Principles Of Continuation And Common Fate (Part Three)

In the first two parts of this series, we looked at the principles of similarity and proximity to understand how elements can be organized by their relatedness to other elements, and we looked at the principles of closure and figure-ground to understand how relationships are formed through the use of positive and negative space. In the final part of this series, we’ll focus on the principles of continuation and common fate, which involve movement, both implied and animated, to create relationships.

Read more...

Understanding The CSS Property Value Syntax

The World Wide Web Consortium uses a particular syntax to define the possible values that can be used for all CSS properties. You may have seen this syntax in action if you have ever looked at a CSS specification.

Understanding The CSS Property Value Syntax

Let's take a look: <'border-­image-­slice'> = [<number> | <percentage>]{1,4} && fill? This syntax can be hard to understand if you don’t know the various symbols and how they work. However, it is worth taking the time to learn. If you understand how the W3C defines property values, you will be able to understand any of the W3C’s CSS specifications.

Read more...

Advertise with us!

Web Development Reading List #138: Accessible Web Components And CSS And Sass Precision

From time to time you need to recalibrate your brain by experimenting with new technologies, by tracing down the performance of a certain feature or by reconsidering the environment of your project. While I’m generally not a proponent of inlined CSS, we now will use it for a third-party script we are providing to avoid style leakages. The point here is that this decision won’t harm performance as it’s an asynchronously loaded script.

Accessibility is vital, also when it comes to web components

The other thing I always assumed but never got confirmed was that CSS filters slow down the rendering of a page massively. But as it turns out, when you research this properly, there’s only a barely noticeable difference to unfiltered images. Don’t hesitate to try out new things, only make sure that it’s the best solution when you put it to production.

Read more...

Web Image Effects Performance Showdown

As browsers constantly improve their graphical rendering abilities, the ability to truly design within them is becoming more of a reality. A few lines of code can now have quick and dramatic visual impact, and allow for consistency without a lot of effort. And as with most things in web development, there are often many ways to achieve the same effect.

Web Image Effects Performance Showdown

In this post, we'll take a look at one of the most popular image effects, grayscale, and assess both the ease of implementation and performance implications of HTML canvas, SVG, CSS filters, and CSS blend modes. Which one will win?

Read more...

Sponsored Post Looking Back: One Year Of Microsoft Edge (Videos)

Change is difficult in large corporations. But sometimes it is possible. In fact, we published Inside Microsoft’s New Rendering Engine For The “Project Spartan” when the new browser was just announced. A year has passed since then. We kindly thank Microsoft for keeping Smashing Magazine alive and supporting the community with technical articles on practical JavaScript techniques, open source projects and interoperability best practices. Our editors are working with Microsoft engineers to deliver useful insights to you. — Ed.

microsoft-edge-browser-usage-share-preview

In 2015, Microsoft launched its first new browser in 20 years: Microsoft Edge. After eight months, it's on a great trajectory for web standards support, but there are many exciting features to come. This article is part of the web development series from our tech evangelists and engineers on JavaScript skills, community projects and best practices including Microsoft Edge browser and the new EdgeHTML rendering engine.

Read more...

The Safari Problem With SVG Sprites (Now Fixed)

Update (19.05.2016): The bug was just fixed by Antti Koivisto and has landed in the current update of iOS (9.3.2) and Safari for OS X 9.1.1 (11601.6.17). When a user visits a site using a SVG sprite in a browser with an empty cache, the sprite is cached and will not be loaded multiple times any longer. You'll find more details here (in German), and Sven Wolfermann's results before and after the iOS update.

Using external SVG sprite maps to deliver lossless scalable vector images is widely used in responsive web design today and well-supported by tools like svg4everybody.

The Problem With Using SVG-Sprites

At German newspaper Zeit Online, we embraced this technique quite a lot. However, we recently changed this workflow back to completely inlining the SVG into the HTML owing to a bug in Apple's Safari browsers (mobile since iOS 9.3, in Mac OS X since Safari 9.1) – the same way GitHub is doing with its octicons.

Read more...

Sponsored Post Five Simple Steps To Test Your Varnish Cache Deployment Using Varnishtest

Varnish Cache is an open source HTTP accelerator that is used for speeding up the content delivery of the world’s top content-heavy dynamic websites. However, the performance or speed a newcomer to Varnish Cache can expect from its deployment can be quite nebulous.

Five Simple Steps To Test Your Varnish Cache Deployment Using Varnishtest

This is true for users at both extremes of the spectrum: from those who play with its source code to create more complex features to those who set up Varnish Cache using the default settings.

Read more...

Why Great Products Need Great Collaboration

Development and design working together makes better products for our users. Design and usability decisions have a big impact on the developers who implement them, and, ultimately, on the experience of users. For these decisions to be successful and provide users with the best experience, communication between designers and developers is vital.

Collaboration Between Development And Design Makes Better Products

When developers are expected to work in a corner until needed, that isolation from the design process prevents them from crafting the end product just as much as the designers themselves. The person who ultimately pays is the user.

Read more...

Designing A Dementia-Friendly Website

Some well-established web design basics: minimize the number of choices that someone has to make; create self-explanatory navigation tools; help people get to what they're looking for as quickly as possible. Sounds simple enough? Now consider this…

Designing A Dementia-Friendly Website

An ever growing number of web users around the world are living with dementia. They have very varied levels of computer literacy and may be experiencing some of the following issues: memory loss, confusion, issues with vision and perception, difficulties sequencing and processing information, reduced problem-solving abilities, or problems with language.

Read more...

↑ Back to top