Quite the Contrary: Non Responsive Websites Usually Work

The wikipedia describes responsive design as:

Responsive web design (RWD) is a web design approach aimed at crafting sites 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 mobile phones to desktop computer monitors).

You’ve all heard the big buzzwords, media queries, flat design and modular websites, our industry is thriving on these terms and everyone is chatting about them. A quick primer and touching base on some issues of repsonsive web design which we have all heard time and time again.

  1. Web Browser Performance
    1. Graphics
    2. Speed
    3. SEO
    4. Compatibility
  1. Complexity / UI & Other Limitations
    1. Building more than one site
    2. Time
    3. Money
    4. Mouse vs. Touch

I have another take on websites that aren’t responsive and I’ve based my facts on real word situations.

Medium - A responsive website
Today while at work I was speaking with my colleagues who were complaining that one of our standalone websites wasn’t being rendered well on an iPhone device. After showing me the responsive site, they proceeded to show me an example of a non-responsive site that they claimed responded very well on their device.

I listened intently, as I’m obsessed with what the user feels is a good experience from them. As a side note, many people out there try and confuse you for no apparent reason, and it’s up to us devs to make some sense out of. After all technology can be challenging to some, the fact still remains that people want to understand they just dont know how or cannot explain themselves thoroughly.

Responsiveness is great for image based websites, but for text it really doesn’t make any difference. Don’t get me wrong, I like using responsive techniques in my web designs and applications. To make a long story short modern mobile devices are developed to display non-responsive website designs effectively, and they actually do an excellent job. There will of course be exceptions that prove the rule, but those sites will look horrendous on a PC too.

So more often than not, a well designed desktop website will be perfectly readable on a mobile device, without you have to lift a finger to accommodate it. There are countless debates on responsiveness and if it’s just a fad or a UI pattern that will be over-ridden by another robotic like pattern, used, re-used and abused.

As a matter of fact some folks even think that media queries are a hack, while others are finding different ways to make websites respond.

Thoughts On Simple Interfaces

Ny Times - Simple

“Simplicity is the ultimate sophistication.” – Leonardo Da Vinci

I spend my time obsessing over simplicity in web design and everything else for that matter, it surround us everywhere if we choose to observe – it interest me to create interfaces that can truly be innovative, immerse the user into an experience, especially one that draws consumers back to the business they love and admire. I often wonder what it is about simplicity that attracts me. Is it the precise pixel coding and rendering in the browser, the stark typeface staring at me inticing me to read, the intuitive navigation system, or the white space that surrounds and snugs the elements ever so perfectly that catches our eyes.

I’ve come to the conclusion that building simple interfaces isn’t all that easy, though it looks quite the opposite. Why should it be, that would take all the fun and learning out of it.

Simple Interfaces Come With Practice, Patience and Research

The only way to learn how to create these interfaces is to build something. When I say build, I don’t mean just a blog, or a normal website. Build a product (this is the best way to learn), plan the design thoroughly, read about how neuroscience can radically change the way we look at UX, understand what attracts user to a digital page, try and retain your users with unique content that draws them back – time and time and time again.

As with almost everything else in the world there is a science behind it and you have to perfect that. There is no limit to innovation, especially in modern front end web development.  How many different ways are there to create a responsive website? I can already name you 3 off the top of my head. Why not create your own?? Dive into the theory of things and master the tools you need to get the job done.

The most important rule is to understand the minds of users, it’s the user that is the sum and end all of everything.

Fail & Fail Often, Yet Remain Consistent

Most people give up after they see a failure looming. Fail and fail often is my mantra; that will eventually teach you to learn from your mistakes and succeed the last time you try-the most vital of them all. If you see something you like, try and take inspiration from it and re-create it.

Sounds like alot of work? It is, however when you get into the groove there are no limits to what you can achieve. Just think, no more cookie cutter designs! There are a plethora of tools out there to help you out: Twitter Bootstrap, Grids, Boiler Plate, Pure IO, Modernizr, and more that can help you in your visualization process. Seek clarity in your thoughts and designs, the more confusion you have in your mind the more confusion you will create in pixels.

Often, it helps taking a break from things, retaining the information you have in your mind and then diving right back in. The passionate ones will never give up..

Read, Read and Read More

I’ve seen people using the same patterns to create the same clunky interfaces and mimicking modern front end development by faking techniques. You can easily spot a design which hasn’t been thought through or one that hasn’t been researched properly. Online reading from credibale sources will help you understand modern principles which you can practice to improve your UI techniques. Interested in understanding how a website loads asynchronously? Sure, we all are. You can start with some of these blogs: NN Nielson, Cooper, Usability Post.

We all embark on new journeys in our lives. I wish you well on your way to hand crafted designs, away from the cookie cutter look and to stuff that you can really be proud of for a lifetime – designs which feel authentic decades to come….

Web Flow — Visually Build Responsive Websites

Adobe has been trying to abstract the complexity of web design for a number of years now. WebFlow, founded by two brothers Vlad and Sergie Magdalin based in Mountain View California is a fantastic tool to help would be web / mobile designers create visually appealing websites without writing a single line of code.

Web Flow

The UI is especially gorgeous and Adobe-esque:

Webflow UI

A quote from an article on Venture Beat Magdalin says:

There are lots of recent startups (and Adobe, of course) that are trying to abstract away some of the the complexity behind web design,” said Magdalin.

As far as I know, we are the first (and only?) visual tool to focus very strongly on abstracting away some of the core concepts behind CSS, namely selectors and cascading. These are pretty hard concepts to pick up at first, and are not as easy as just dragging-and-dropping something, but are insanely powerful because they mimic the process of people who are fluent in CSS.

This is a fantastic web tool, the first of it’s kind and boasts tons of features including:

  • Create responsive layouts and pixel-perfect designs directly in your browser, without writing a single line of code.
  • Webflow aims to make the full power of CSS3 available in a straightfoward visual interface. This means no compromises as you craft your unique designs.
  • Tweak your design for all screen sizes.
  • Style whatever, however you’d like.

For those who have hit the design chasm the best feature is that you can create clean code without writing a single line with the export feature. I have never seen anything like it on the web before, it truly is a unique web application and well worth a blog post.

With each passing day we see more and more web applications appear and the browser is becoming the OS for them. Very exciting stuff!


A Darn Fine Site..

Yup, Grupow is built in Flash…


Out of the 20 odd sites I surfed through yesterday on The FWA this caught my eye. One can only imagine the code behind this beast, darn fine concept and execution. Interaction designers have all the fun eh?

The Shape Shifting Future Of The Mobile Phone

This is a wonderful video and well worth sharing, I loved the concept and the way it was presented with the robotic prototype. For technology dreamers and innovators such as Fabien Hemmert (a PhD student at the Design Research Lab, in cooperation with Deutsche Telekom Laboratories) it all starts there. He shares a fascinating talk on TED about the future of Mobile phones and technology behaving more human-like and although the video is brief and this might be quite far into the future the results are mind boggling.

Fabien talks about making digital content graspable, and how to get the digital to the physical. I’ll let him explain as he does a far better job, but I really wanted to share this quote as it made alot of sense to me as we progress into the future of mobile touch and technology.

Humans should get more technical in the future, rather technology get a bit more human.

I found this video whilst browsing to one of my favorite sites, TAT. If you’re not aware of TAT The Astonishing Tribe AB, you should be. They are an extremely innovative growing group of engineers, visual artists and interaction designers who eat, sleep, and breathe user interfaces. The do lots of cool things and to describe a couple of them I wouldn’t miss (a) Astonishing and free Android wallpapers (b) The future of screen technology