Designing and developing web apps that are consistently beautiful across devices can be difficult. People access the web through a myriad of devices with varying aspect ratios, resolutions, and pixel densities. Users expect the same experience across their devices. And rightfully so! There is nothing wrong with this expectation. It is what I expect of the sites and services I use. However, achieving this seamless experience is a complicated process.
Content and elements need to rearrange and resize. Which brings up questions: Should you use media queries? Browser sniffing (gross)? Some other solution? How do we best use the available space to deliver our product? This is a question that I’m not going to attempt to answer. I want to talk about user interfaces and the stuff they are made of. More specifically, what is the best way to handle interfaces across a wide range of ever changing screens?
Infinite scalability is the answer. Draw your UI with code and you’ll never have to worry about resizing or blurry interface elements again. I don’t mean SVG because SVG sucks. Yeah, you can do amazing things with SVG, but it ignores one of the key architecture principles of the web. Design your interface with HTML and CSS3. Style the hell out of those semantic tags. CSS3 is slowly adopting nearly all the necessary tools to design beautiful UIs. It already supports things like gradients, shadows, and rounded corners, however, designers know these are not enough.
The way things are now, CSS3 is hardly as powerful of a design tool as Adobe Photoshop or Illustrator, making images still necessary in many situations. In fact, I admit that I think images will be necessary for a long time to come in order to achieve the maximum level of artistic detail, but we are rapidly approaching a point where CSS alone is good enough to produce beautiful interfaces without sacrificing user experience. And in the end, that’s all that matters, right?
That being said, I am excited for the future. The Adobe Web Team and Canon have already drafted and submitted a proposal to introduce blend modes into browser rendering models. Photoshop plugins that convert layer styles to CSS already exist. This is not just a trend but the start of a new era of web/interface design, where the browser is your canvas and CSS your brush.
