The power of SVGs lies in their flexibility to adapt to any size while remaining crisp and sharp. This makes them perfect for responsive web design and, since users can zoom in without sacrificing quality, meaningful from an accessibility-centered point of view.
To help you make best use of this potential and tackle SVGs the right way, this article will provide you with tools and resources to simplify editing, converting, optimizing, and delivering SVGs. We’ll take a look at what you can do to make your SVG code lean and performant, dive deeper into dealing with browser bugs, and provide tips for designing an icon system.
This upcoming September, SmashingConf Freiburg will be taking place on Smashing Magazine's 10th birthday and, well, we definitely wouldn't want to celebrate it all alone.
Freiburg is the smallest of all our conferences; this means a super-friendly atmosphere right at the foothills of the magical Black Forest, but also not that many seats! So, are you ready to celebrate with us?
For a great project, we need a well-functioning team, solid style guides, smooth workflows and well-organized kick-off meetings. Last week, I found a couple of resources that help you achieve just that.
And, a bit further down the road, the developers shouldn’t miss out on anything either, of course, — having a proper workflow is essential to be productive, and that’s why it might be a good idea to start playing with Docker. Have a productive week ahead!
In the last decade, plugins such as Flash and Silverlight have enabled a rich consumption of video in browsers, powering popular services such as YouTube and Netflix. However, this approach has shifted towards HTML5 over the last few years.
Almost two years ago, the W3C published the final recommendation of the HTML5 spec, which came with a new set of HTML elements and APIs, especially for video. Some of them aim for more semantics in web pages but don’t introduce new features. Others extend the possibilities of the web and enhance the possibilities for developers without the need for plugins such as Adobe Flash, Microsoft Silverlight or Java.
Years ago, a kid was trying to fashion a bow by cutting a twig with a knife. Upon seeing this struggle, his grandfather handed him a saw, saying, “Always use the right tool for the job!” As the kid in the story, I learned a valuable lesson in craftsmanship: When you’re picking a tool to solve a problem, there are many good tools, but some are better suited to the task than others!
In recent years, new prototyping tools have emerged, many for mobile design. The landscape is constantly changing, with some tools losing favor with UX designers (or UXers) and others taking their place. While this article will not serve as a complete paint-by-numbers manual for selecting a prototyping tool, we will discuss important factors that influence the selection process.
My first experience in the design world came through an internship at a small motion graphics studio called Motion Theory. I was fresh out of school and had never worked with so many talented people before. It was intense, difficult and nerve-wracking.
And I loved it. It made me a better designer. And the lessons I learned there have served me well throughout my years as a freelancer. Because my experience was so rewarding, I’ve developed the habit of scrutinizing internship programs at every new studio I visit. I'll share my insights below, as well as insights from some of the world's best design firms so you can think about the application process from both sides.
More and more of our experience online is personalized. Search engines, news outlets and social media sites have become quite smart at giving us what we want. Perhaps Ali, one of the hundreds of people I've interviewed about our emotional attachment to technology, put it best: "Netflix's recommendations have become so right for me that even though I know it's an algorithm, it feels like a friend."
Personalization algorithms can shape what you discover, where you focus attention, and even who you interact with online. When these algorithms work well, they can feel like a friend. At the same time, personalization doesn't feel all that personal. There can be an uncomfortable disconnect when we see an ad that doesn't match our expectations.
Have you heard of Docker but thought that it’s only for system administrators and other Linux geeks? Or have you looked into it and felt a bit intimidated by the jargon? Or are you silently suffering with a messy development environment that seems to break all of the time in various mysterious ways? Then read on. By the end of this article, you should have a basic understanding of Docker and have it working on your computer!
The first part of this article gives a bit of background to help you understand the concepts behind Docker through some metaphors. But if you just want to get started with the tutorial, skip to the “Time to Play!” section.
In part 1 of this tutorial we started building our iOS app from scratch. We started out by setting up a blank React Native project. Then we pulled data from the Unsplash.it API. Because downloading data takes time, we built a loading screen.
In the process we went over positioning UI elements with flexbox and styling them using CSS-like properties. Towards the end of part 1 we downloaded and included a third-party Swiper component from GitHub, which allowed us to display wallpaper data in a swipeable container.