Menu Search
Jump to the content X X
Smashing Conf New York

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 Barcelona, dedicated to smart front-end techniques and design patterns.

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...

Advertise with us!

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...

Creating A Living Style Guide: A Case Study

Living style guides are an important tool for web development today, especially in large, complex web applications. They help document styles and patterns, keep designers and developers in sync, and greatly help to organize and distill complex interfaces. Indeed, living style guides remain one of the best ways to communicate design standards to an organization.

Creating A Living Style Guide: A Case Study

Recently, our company went through the process of creating a living style guide. This is the story of how we developed our living style guide, the mistakes we made along the way, and why the current landscape of style guide generators did not suit our needs.

Read more...

Web Development Reading List #137: The New Let’s Encrypt Client And SSH Shortcuts

This week reminded me again of how refreshing attending a conference can be. As mentioned, I was at the beyond tellerrand conference and, apart from meeting new people, I mostly enjoyed the inspiration I got from listening to the great talks.

With Origin CA you no longer need to go to a third-party certificate authority to protect the connection between CloudFlare and your origin server.

I realized how I might be able to solve a few things that had led to me being unhappy with my work in the past. My trying-to-change-everything-at-once strategy always failed, and seeing that some people just change small things and succeed, I recognized that this is what I want to try over the next months. And I’m happy that I don’t need to do this alone but have some friends who spent nearly the entire Monday night talking with me about how to do more meaningful work.

Read more...

Freebie: Space Icon Set (40 Icons, AI, PNG, SVG)

We've featured a lot of different icon sets in the past, but we still haven't had one dedicated to rockets, satellites and solar systems (well, don't forget supernatural aliens as well). There's so much to explore in the world of astronomy, and it's about time we did. Today's icon set was created and designed by the team at Iconshock, and consists of 40 icons in AI, PNG as well as SVG formats. So, dear space troopers out there, what are you waiting for?

Freebie: Space Icon Set (40 Icons, AI, PNG, SVG)

Please note that this icon set is licensed under a Creative Commons Attribution 3.0 Unported. You may modify the size, color or shape of the icons. No attribution is required, however, reselling of bundles or individual pictograms is not cool. Please provide credits to the creators and link to the article in which this freebie was released if you would like to spread the word in blog posts or anywhere else.

Read more...

Easy Steps To Better Icon Design

Icon and vector marketplaces like Iconfinder (where I work) are making well-designed vector icons an inexpensive and readily available resource for web and print designers. Thousands of high-quality premium icon sets and hundreds of great free sets are available.

Easy Steps To Better Logo Design

Every icon set submitted to Iconfinder is reviewed and evaluated for potential appeal to our website users and for potential commercial value as premium icons. When reviewing icon sets submitted to the website, we have a responsibility to our designers and to our customers to make sure all premium icons on the website are of the highest possible quality.

Read more...

↑ Back to top