Sep 10, 2014 0 Comments

Same Features. Here, There, Everywhere.

ResponsiveDesign

When designing a site for an increasingly mobile user base, it is important not to differentiate the site capabilities between screen sizes. This often leads to tricky design challenges that are often solved in completely different ways on desktops and laptops than tablets and phones. Responsive design (which is now a widely adopted method of building websites) makes it possible to keep the same code base and just restyle and maneuver the content to fit the screen, solving the design challenges for any device size. If you don’t know what responsive design is, visit your favorite website (nibl.com) on a computer with a large screen, and then go to the same site on your phone. The site morphs and changes to fit your screen. The most important principle that I personally hold in building a responsive site is to make sure every feature, every page, and every part of the website works well on any screen.

Responsive History

Responsive design started out with resistance and seen only as a passing trend, but quickly and rightly grew into a must-have feature for modern sites. It often sparked the debate of whether or not the broweser/platform should optimize the site or if it should be the designer of the website itself. Turns out that the web designers wanted the control and then responsive sites began to surface. The adoption of responsive sites was slow at first, where only a few different screens were supported (mostly popular Apple devices like iPad and iPhone), but this led to miniature, scaled-down, and unusable sites on all other phones and tablets. Then the idea began to spread that you should adjust the site based on your content, not what device it would appear on. And once that took hold, sites would start to look better no matter what size device you visit the site.

Mobile First

When designing a new feature or page for nibl, I always start at the mobile format. In my experience, it has been easier to grow a design from a small format into a larger format, so starting at mobile makes the process smoother. This also naturally ensures that even users on a smaller screen still get every bit of functionality that the desktop users get. At one time, an often used practice was to just completely hide content because it didn’t fit on a small screen. I deeply feel that it is wrong to just turn off information that some user might need. And as a user of nibl myself, I will often do the same types of tasks like uploading photos from my computer as well as my phone – as soon as the photo is ready, not whenever I’m at a computer.

Why go to all the trouble?

Sure some sites will look at their “current” user base and make the decision to only support desktops and laptops, but that is not future-proof. You never know when a new phone will allow people to be more creative and do just as much as a desktop. Also, an annoying trend I see is for a site to only be partially responsive, where at some minimum screen size the site stops adapting. These sites are often paired with a native app, so that makes it okay?

Here is my own primary use case that happens all the time: I create an account from my desktop computer on a new site. It starts sending me tons of emails and I only have my phone. I open my email to unsubscribe from some of the emails. The link in the email takes me to a tiny and unusable site with 2pt text, I zoom in, lose my place in the world of horizontal scrolling, then the site pops up a bunch of delayed desktop-sized modals with close buttons hidden outside the screen.

Now I’m very much annoyed that the site designer (who probably did a good job on the desktop version to get me to sign up in the first place) didn’t take the time to think about my other and equally valid experience on another device outside the native app. This is why I go to all the trouble for nibl. I have made sure that same features, same content, same experience are carried over from a giant 30″ monitor to the narrowest of phones. You can fully use nibl here, there, and everywhere.

Comments