I recently had a lengthy discussion with a tech director here at work who was convinced that responsive design is a fad. They do care when interactions are awkward and broken. They do give a shit when your site takes 20 seconds to load. They do give a shit if they can’t get done what they need to get done. They don’t care if it’s just a plain ol’ desktop site. They don’t care if it’s a separate mobile site. Your visitors don’t give a shit if your site is responsive. Creating contextually-aware experiences is good business. Sure, my client’s desktop site rendered just fine on smartphones, but creating a focused experience made all the difference. Better experiences mean more conversions, more engagement and a better chance the user will walk away with a positive feeling about your brand, service or product. The same goes with tablets, tvs, and other emerging contexts. Since then, they’ve invested even more resources in their mobile web presence and things are going quite well.Ĭreating mobile-optimized sites, whether responsive, device experience, RESS, or other, is a good idea. Shortly after they launch, they saw a huge jump in their conversion rates. I got to help create a large brand’s mobile e-commerce site. Does creating a better mobile experience really matter? And yes, addressing this involves adapting layouts, but it also involves addressing a ton of other stuff. We need to actively take matters into our own hands and do all we can to create more contextually-aware, flexible experiences. In order to deal with all this diversity, we can no longer just cross our fingers and hope that these devices’ browsers are capable enough to properly render desktop designs. It’s not so you can impress your boss by resizing a browser window. It’s not because it’s “the right thing to do”. The point of creating adaptive sites is to create functional (and hopefully optimal) user experiences for a growing number of web-enabled devices and contexts. Whenever I talk or present on this subject, I usually lead off with these three images: So that brings us back to Alex’s point: why the fuss with responsive web design? Why bother? Here’s the Point The fact is that many of these modern mobile browsers actually do a pretty good job at rendering “full” websites. If you could only do one thing to prepare your desktop site for mobile and had to choose between employing media queries to make it look good on a mobile device or optimizing the site for performance, you would be better served by making the desktop site blazingly fast.Īlso, Kristofer Layon’s book, Mobilizing Web Sites: Develop & Design, beautifully articulates lots of techniques to make your desktop site more mobile-friendly without necessarily having to go through the responsive process. Like Jason Grigsby recently wrote, other tasks like optimizing performance can lead to a much better mobile experience than adapting the layout:
In his post, Why Is Responsive Design Such a Big Deal? Seriously…You Tell Me, he asks:ĭo you really need to serve your “mobile” visitors a different layout based on your current content? This is optimal for a desktop viewport, but if it's very difficult to maneuver on a mobile device (especially in portrait mode).Alex Mangini touched on something I think is extremely important. For example, data tables are great for viewing and editing a large amount of information at once. This may be necessary for a specific type of presentation and interaction. There are some specialty cases where a completely different layout applies to a different viewport size. This clean separation is more accessible for screen readers and allows for style and brand updates more smoothly. It is also recommended CSS grid instead of an HTML grid, which follows a general rule to use HTML for content and structure and CSS for styling.
#WAHT DOES RESPONSIVE LAYOUT MEAN HOW TO#
Responsive grids and how to actually use them.Here are helpful articles for building and using responsive grids: This usually means 12 columns for desktop sizes, 8 columns for tablet sizes, and 4 columns for mobile sizes. Typically, responsive grid column widths don't change significantly, but the number of columns does change per viewport size. The desktop has 12 blue columns, the tablet has 8, and the mobile device has 4. Image description: a desktop computer, tablet device, and mobile device (aka smart phone) laid out in a line.
0 kommentar(er)
