Designing for the Unexpected

Although I’m not sure when I first heard this statement, it has stuck with me over the centuries. How do you develop service for circumstances that you can’t possibly imagine? Or create items that are functional on products that have not yet been created?

Flash, Photoshop, and flexible style

When I first started designing sites, my go-to technology was Photoshop. I started by making a design for a 960px canvas that I would later add glad to. The growth phase was about attaining pixel-perfect precision using set widths, fixed levels, and absolute placement.

Ethan Marcotte’s speak at An Event Off and subsequent content” Responsive Web Design” in A List Off in 2010 changed all this. As soon as I learned about reactive style, I was convinced, but I also was terrified. My previous pride in producing pixel-perfect, magical amounts was no longer sufficient.

My first encounter with reactive style didn’t help my fear. My second project was to get an active fixed-width website and make it reactive. You can’t really put responsiveness at the end of a job, which I learned the hard way. To make smooth design, you need to prepare throughout the style phase.

A new way to style

Making information accessible to all devices a priority when designing responsive or smooth websites has always been the goal. It relies on the use of percentage-based design, which I immediately achieved with local CSS and power groups:

.column-span-6 { width: 49%; float: left; margin-right: 0.5%; margin-left: 0.5%;}.column-span-4 { width: 32%; float: left; margin-right: 0.5%; margin-left: 0.5%;}.column-span-3 { width: 24%; float: left; margin-right: 0.5%; margin-left: 0.5%;}

Therefore using Sass to re-use repeated slabs of code and transition to more semantic premium:

.logo { @include colSpan(6);}.search { @include colSpan(3);}.social-share { @include colSpan(3);}

Media concerns

Media queries are the second component of reactive design. Without them, regardless of whether the information was still readable, would shrink. ( The exact same issue developed with the introduction of a mobile-first app.