While the concept of mobile-first began as a philosophy to help prioritize content and ensure positive, device-agnostic experiences, budgetary and scheduling constraints often result in mobile-first meaning mobile-only. According to the analytics data of Marli and Jasons’s healthcare clients, the majority of their users are still on desktop. They want to provide a positive experience for those users and for users on mobile and tablet apps and for those using mobile browsers — and even for users having an in-person experience! It is not accurate to assume that mobile is the primary experience.
Read more…
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…
