Finding little techniques and tricks to help you get to results faster can immensely improve your productivity, so you don’t have to waste time on solutions that will never see the light of day. Vitaly Friedman loves finding those little useful front-end goodies that make our lives easier. Since technologies emerge and evolve permanently, keeping track on what’s going on is often difficult, especially since specifications change and so does the browser support.
Read more…
In this article, Ben Callahan will help you be more successful with your web projects by starting at the beginning; by working from day one to help set your client’s expectations about what’s going to happen, and by working throughout a project’s life cycle to do the same. By the end of this article, you’ll find yourself more inspired to invest in your own understanding of how the web works, and more willing to invest in your teammates’ understanding. Ben hopes you’ll feel excited to try a new approach, but he also that you’ll be empowered to tear these pages up if they don’t work for you. Only you, your team and your customer can figure out the best way to approach a project. The time is now — so, get to it!
Read more…
In this article, Tom Green will describe the methods he uses to get from content to responsive wireframe — and how you can, too. There is no big reveal or other excitement with the creation of content reference wireframes. You can practice content wireframing by deconstructing popular websites into their basic building blocks. Start with rough containers of information, add in the real content, and then start chiseling them into more finalized forms. In doing so, you’ll be better able to design around what users really care about: the content.
Read more…
In this article, Nadav Soferman introduces a new free open source web tool that will allow you to generate breakpoints for your images interactively: the Responsive Breakpoints Generator. Nadav hopes this tool will help you address some of the challenges related to responsive images. This complexity is the driving force for new solutions that keep arising, such as the HTML5 picture element and srcset image attribute, the Client-Hints specification, and plenty of other client-side and server-side solutions.
Read more…
Employing the functionality under the constraints of a large CMS like WordPress, can be very difficult to do, since the growing adoption of responsive images cannot be ignored. Thankfully, with the launch of WordPress 4.4, theme developers and maintainers will find it much easier to introduce responsive image functionality into their themes. In this article, Tim Evko will take a look at how the feature works, and how you can use it to get the best support for your WordPress site.
Read more…
So far, most of the responsive design thinking has revolved around covering the range of experiences from mobile to desktop. Yet little attention has been paid to the opportunities for expanding that range beyond the standard desktop screen, to create an experience optimized for modern large-scale displays. In this article, Christian Holst will explore how e-commerce designers could use responsive upscaling to craft a tailored experience for users with big screens. He’ll cover one core principle, along with 11 ideas for upscaling different parts of the e-commerce experience to deal with the various usability challenges observed during our e-commerce usability studies.
Read more…
Looking for a starting point for designing emails? Not sure which font size to use? In this article, Anna Yeaman explores how email designers handle responsive typography within various industries, so she amassed 50 emails across various industries that she thinks do a good job with typography to see if any patterns emerged. This study provides a decent starting point for designing emails. The proportional relationships, the guideline to build out a custom responsive type scale that adjusts across viewports and some basic guidelines such as fluid line heights have proven the most useful.
Read more…
Our priority as designers must be to solve problems; his is what we do. Responsive web design is a fantastic solution to the problem of creating virtual experiences that adapt to different devices. There are other problems out there that we’re called on to solve, though, not least of which is to make content of all kinds appear interesting and engaging. A page of plain text becomes a beautiful blog post, a mess of unconnected JPGs becomes a professional portfolio. Can we succeed at solving both of these problems?
Read more…
There are various ways to approach responsive typography and consistent vertical rhythm, and they are not limited to my suggestion. However, Jonathan Suh finds that this works for him more times than not. Managing consistent, typographic rhythm isn’t easy, but when the type is responsive, things get even more difficult. Fortunately, Sass maps make responsive typography much more manageable. This is where Sass maps and loops are powerful: They’ve helped him manage z-index values, colors and, as you’ll see in this article, font sizes.
Read more…
Have usability conventions and the web’s universality steered us away from proper art direction? Have we forgotten about art direction altogether? Marko Dugonjić believes so. As designers, we can achieve much more with type, and with just a little more thought and creativity, we can finally start to take full advantage of the type systems available. Let’s look at ways we can push typographic design on the web further, beyond the status quo of today.
Read more…
