Designer Elliot Jay Stocks talks about typographic rules on the web:
To summarize: we can hyphenate pretty well, but justification still has a way to go, so I’m afraid to say that we’re not going to be using them together the way we do in print any time soon.
Designer and speaker Stephen Hay:
Emulation is a part of the evolution of design. And the web, for that matter. But design sameness tends to fade when one forgets all of the existing patterns, all of the Bootstraps, all of the preconceived design solutions. Design sameness fades when designers stop focusing on which solutions for their problem are out there and start focusing on the problem at hand.
Solve that problem, and maybe the solution is exactly what your peer implemented, in the exact same way. But maybe not.
Designer and speaker Elliot Jay Stocks:
If you’ve identified the website described here, I’m afraid there are no prizes, because there’s no correct answer. It is, in fact, a number of websites. A very large number. And if a new product website launches tomorrow, chances are it will fit that description, too.
The web right now is a beautiful place. Web design has matured as an industry and the technology now enables us to create whatever we might dream of in HTML, CSS and JavaScript. But it’s clear that laziness amongst designers has never been more rife.
If there’s one thing that’s extremely common in web-based grid frameworks, it’s their consistency of design. Generally you see twelve to twenty four columns all with exactly the same proportional width. Designer Nathan Ford takes a different approach: start with your site’s content and design a grid system based on visually pleasing, historical ratios. It leads to often irregular, columns for your content, far from the norm as far as traditional web design boilerplate is concerned.
Trent Walton:
A responsive site may have flexible grids, fluid images, and media queries, but if it also scroll-hijacks desktop monitors while stutter-scrolling on touch devices, auto-loads heavy videos that break data plans, or asks users to rotate their screens 90° for the full immersive experience, I’d argue it’s not device-agnostic. Many sites, responsive or not, are built only with ideal scenarios and a small set of devices in mind.
I’ve done many web-based ajax request forms in my career. Regardless of the project, I generally see the same processing design aesthetic: the submit button flips to a disabled state and a loading animation, usually a circular spinner, pops up. So designer and developer Mary Lou asks, why not try something different with the button itself? The results are pretty cool. Some ideas are admittedly a bit too clever, but it’s fun to see such creativity in action.
The 1910 design team posted some advice for optimal web typography on their blog. Some of it I’ve seen before, but rarely in such a concise yet helpful format. Here’s one of those “why didn’t I think of this myself” moments, regarding picking an optimal body text size:
If in doubt, just grab a camera and take a picture of the text from the desired viewing distance and compare this to a picture of a page from a regular textbook taken from 30 to 40 cm away. Alternatively hold the book somewhere between yourself and the screen while keeping one of your eyes closed. If the digital text is smaller than the printed one you’ll want to go bigger.
Jeremy Keith:
If your client or boss expects that a website will look and behave the same in every browser on every device, then where did they get those expectations from? And rather than spending your time trying to meet those impossible expectations, I think your time would be better spent explaining why those expectations don’t match the reality of the web.
It’s like Mike Monteiro says about clients: if they just don’t get something about your design, that’s not their fault; it’s yours. Explaining your design work is part of your design work. It’s the same with web development.
Exactly. And I love how Keith concludes his post at the end: the web isn’t just another platform where if you have the right device, you get all of the content, otherwise you get zero. It’s instead a continuum; different browsers can have different experiences.
It’s a year old, but Jason Grigsby’s post on recommended guidelines still (remarkably) holds up very well with regard to best practices and responsive imagery. The most important takeaway:
The one thing we can be certain about is that we’re going to need to replace what we implement now when standards catch up with responsive images.
So whatever you build, make sure it is flexible and can be changed easily when the ultimate solution for responsive images becomes apparent.
There’s been countless articles on adapting a responsive design to make web sites mobile friendly. But what about in the opposite direction? What happens when you need to take a traditionally fixed width web site at 960px and make it look great on a 27 inch monitor. Designer Mike Pick goes through a few examples at A List Apart, both good and bad, to see what what works best.