Open device labs (ODLs) are a response to the myriad of operating systems, browsers and devices that litter our technical landscape, and offer developers a free space to go to test their web systems. In this article Gemma Church will highlight some of the many open device labs out there — fantastic and helpful initiatives by the community that deserve support and attention.
Read more…
“The Smashing Book #5 has completely changed the potential for books around the web. It dives deep into a topic and continues to dive deeper until you feel as though your brain might explode from the knowledge. The bar has been raised significantly.” For this article, we asked Paul Scrivens if he wanted to review our latest book, Smashing Book #5. Thank you Paul!
Read more…
Four years ago, Jason Grigsby asked a surprisingly difficult question: How do you pick responsive image breakpoints? A year later, he had an answer: Ideally, we’d set responsive image performance budgets to achieve “sensible jumps in file size.”
Read more…
Through this case study on redesigning the Building Social website, Marko Dugonijć will share some simple yet often overlooked front-end techniques that defer the use of JavaScript as much as possible, while providing some neat JavaScript enhancements, too. By being creative and using the basic tools at your disposal, you can improve performance and accessibility, as well as simplify code maintenance. By getting content on the screen as soon as possible, you will improve the user experience, and in doing so, you will earn a few extra karma points along the way. Everybody wins!
Read more…
Improving every tiny thing by 1% dramatically improves performance. This applies to what Marko Dugonjić did in the SGS project and its intricate navigation. By focusing on the finer details, improving each detail by a tiny bit, he significantly reduced the complexity of the navigation and improved loading times, while keeping the navigation appealing and engaging for users. No web project is ever truly complete; there are always a few more things on the to-do list. That’s perfectly fine, as long as you keep on testing, refining and providing the best experience for users.
Read more…
With a few additions, WordPress websites can accommodate a responsive image use case known as art direction. Art direction gives us the ability to design with images whose crop or composition changes at certain breakpoints. In this article, Laurie Laforest will show you how to set up a WordPress theme to support art direction in a simple manner. This method relies on WordPress’ standard administration interface as much as possible, and it requires only a single image to be uploaded.
Read more…
In 2011, the traditional comp-to-HTML workflow was only beginning to be critiqued, and since then, we’ve seen a myriad of alternatives. Style Tiles, Style Prototypes, Visual Inventories, Element Collages, style guides, and even designing in the browser have all been suitable approaches to multi-device design. Also, applications like Webflow and Macaw have made breakpoint visualization digestible for the code-averse. Many designers have moved on from Photoshop as their workhorse to Sketch, Affinity Designer, or similar. Others have adopted apps like Keynote for prototyping.
Read more…
When we design responsive websites, we tend to see responsive design merely as a collection of slightly differently sized rectangles, with a slightly different layout, sometimes with slightly different content poured into them. In this article, Vitaly Friedman features some of the slightly more obscure design patterns, such as responsive car-builder interfaces, mega dropdown navigation, content grids, maps and charts, as well as responsive art direction.
Read more…
Fluid typography resizes smoothly to match any device width. It is an intuitive option for a web in which you have a practically infinite number of screen sizes to support. Yet, for some reason, it is still used far less than responsive techniques In this article, Michael Riethmuller will teach you how to apply the techniques you know in a slightly different way. Careful attention to detail will ensure you still have a perfectly crafted experience at all screen sizes.
Read more…
In his article on Selling Design Systems, Dan Mall suggests to illustrate how fractured an organization is by printing out its different presences online and putting them on a large board as an example of all the wasted money and effort that goes into making sites from scratch, one-by-one, needlessly reinventing the wheel every time. What Vitaly Friedman learned from his experience is that trying to focus on the workflow or the process is never as helpful as focusing on tangible benefits that the client will get as a result.
Read more…
