Embracing the browser as a true mediumWeb Design & Development
A huge movement has been rumbling in the web for a few years now known as "Mobile First."
Fun fact, this term was first coined by Luke Wroblewski (Nerd fact: This guy is like a must know/follow genius in the web world).
When new clients come to Papercut we educate them on the philosophy of Mobile First, which can also be coupled with another term called "Responsive Web Design."
Some Background and Definitions
Right now some folks reading this may be familiar with these terms, but more than a few others may not. For those of you inquisitive enough to want to know more, here are some quick definitions and background for each term:
Mobile first: Traditionally when developing work for the web companies start by wireframing/designing for the desktop view of a site. For many years people viewed sites from desktop computers - smartphones were definitely brewing and getting some buzz but not quite what we would see until the iPhone hit the scene.
Before this explosion, designers had all kinds of specific dimensions to design to (1024px x 768px is ingrained in every web designer's brain) and soon the battle of "Above the Fold" surfaced (pros and cons to this debate that we could discuss in another post).
Mobile first is the idea of wire framing and making decisions about hierarchy based on a mobile view first. Mobile view in essence is the size of a phone or other small device fitting in one's pocket that has a browser to view web content. So when we look at something on that tiny screen - the hierarchy or importance of information definitely begins to shift. A mobile view will be different from a tablet or a desktop and even a really widescreen monitor.
Ok, brain explosions started happening. How the heck will we create all of these views? Will we now have to build 4 different sites for one project? Who can afford this?
Check out this astounding fact: "As of September 2012, 45% of all American adults own a smartphone." - Source Pew Internet and American Life Project
Responsive Web Design
This is where Responsive Web Design comes in:
"...(often abbreviated to RWD) is an approach to web design in which a site is crafted to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones)." - Source Wikipedia
Fancy and exciting! So Responsive Web Design is making a web project fluid enough to be able to adjust to various screen sizes - pretty awesome idea seeing that many companies still think they have to develop Apps to have users find them on a smartphone! Responsive Web Design allows for us to optimize experiences across a vast amount of platforms by strategically showing and highlighting information while thinking about a Mobile First philosophy. Pretty cool, huh?
Whew, ok, so here is where the title of this article comes in. Pretty much since the first websites were being designed, every designer would open their trusty design program and create "pixel perfect" visions of websites. Years ago we could estimate the width and height of sites and "guarantee" to our clients that it will look exactly like those wonderful visions we crafted in our design software.
Ok - evil laughs, screams, hair being pulled out all comes to mind right now. We as humans are pretty intelligent beings but when it comes to having browsers follow the same rules as one another - that is an epic fail. Front end engineers and designers spend countless hours slicing rounded corners and PNG drop shadows to create replicas of these flat designs being shown to clients. That is a heck of a lot of time and resources wasted - but the catch is, we developers and designers are the ones to blame.
For years our industry has been showing flat, fixed designs to clients expecting them to understand that this beautiful, pixel perfect design is what we want — but it can't really be attained perfectly across all the myriad browsers their users will be viewing them on. Cricket, cricket - so are we really telling a client they are getting a faulty product…?
It's Time for a Hug
Let's go to the root of the issue. I am a designer, similar to an artist. If I were going to paint a watercolor painting, I wouldn't use thin paper that wouldn't be able to hold the color and depth of my paints, right? I would want to use a thick, sturdy paper that can perfectly hold the color. So, if I am a web designer, I most certainly wouldn't use a design program that creates static, flat designs to show what it will look like? I probably should use the exact medium it will be displayed on - for instance an internet browser!
Yes, this would be embracing the browser as a true medium for our designs and really what a user will experience across all browsers AND devices. We can now guarantee what a user will experience in all browsers from the beginning. Here are some keys items we can define right away:
Flexibility - This is probably the best reason to embrace the browser as a true medium. We can show clients what a fluid and flexible website looks like. We are no longer constrained to specific proportions or pixel perfect spacing - we embrace the beauty that comes with different platform sizes. We have the ability to tailor the experience for users.
Font rendering - Different browsers render fonts in different ways. Clients can now see real-time how their branded font may look fabulous on a Mac using Safari but oh man, it sure looks different on a Toshiba using Internet Explorer 8.
Embellishments - Gradients, drop shadows, rounded corners, animations, the list goes on. Some browsers have the capability of doing most of these embellishments natively, but some older browsers have issues. By indicating this from the beginning and allowing a client to see these discrepancies we are giving them the power to decide whether it is a necessity or not. In the end we are also increasing performance and educating clients about technology.
Teach Your Clients Well
And here is the key word and root to embracing the browser as a true medium - EDUCATION! It really is our job as web experts to educate our clients and help them understand why browsers are different. Often "seeing is believing."
Embrace the browser from the beginning of your development process. By doing so, you can educate clients about why certain features may not work in certain browsers and explain why it may be a bit pricier to design a site for a specific browser such as Internet Explorer 8. (Because in the end, someone in Internet Explorer 8 won't really miss the soft drop shadow and slight rounded corners on that submit button…) It is all about guaranteeing that a user will be able to read the content they need to and use the site in a superfriendly way.
One Last Thought
Man, I can get pretty intense on this stuff - but that is why I love this web world so much! No one in our industry has totally figured this out yet, and Papercut is ever adjusting our process to make it better. We try and embrace the movements of the digital world and provide our clients with the friendliest and best methods out there. Right now we are experimenting with designing in the browser and have seen some huge successes but also some definite bumps in the process.
From our perspective, for now embracing the browser as a medium is a very friendly thing to do. I'd love to hear about your triumphs and struggles with embracing the browser as your design medium!