Responsive/Mobile web solutions with DNN - #1 Overview

Many people believe they can create a responsive website simply by downloading a responsive skin. This is like creating a great present simply by buying the right gift-wrapping - it barely scratches the surface. 

This is part 1 of (tbd) of my special responsive/mobile series for creating professional, good looking, mobile-ready responsive web sites, which are also Retina optimized. In this series we'll look at the process, concepts, planning, implementation, common standards, DNN tools and technologies. I always work holistically, so well look at the process from the perspective of the owner, the visual designer, the web designer, future content editors and the end user :)

I'm writing from personal, real-life experience. These methods and best-practices have been put to use many times in our own projects and result in extremely high customer satisfaction.

Teaser: We (2sic) will do 2 workshops around these issues at DNN-Connect in Italy May 2014 - be there!

First: Correctly Defining the Goal

So let's do it right: Before trying to solve the problem, it's important to define what we're trying to achieve - and then dissect the parts. We want to...

1. Create a great looking website (or web solution, application, ...)
2. ...optimally presenting the content (a company, catalog, tool) in a beneficial way (usually to boost sales...)
3. ...which optimally adapts the way it looks and behaves based on the abilities of the device and person accessing it
4. ...and adapts in real time based on real-life changes (like device rotation)
5. ...should look great on modern devices (like retina-displays) and function on old devices (like an ancient IE)
6. ...content / data must be easy to update for the owner of the website (not the web designer)

Based on these goals it is clear that changing the packaging won't work. At best, you're just creating a responsive wrapper - but in reality you should focus on the content.

What's the Scope of these Series?

1. Mobile-first and content-first (our paradigm for all professional sites nowadays)
2. Usability planning, mockups, best practices for responsive designs
3. Screen design - and planning for the 1000+ most likely variations of screens and rotations
4. The perfect solution for Retina-Displays (very easy = cheap)
5. Content resizing and wrapping strategies (requires very special HTML inside content)
6. Extreme focus on content-design: our contributors can't write HTML
7. Galleries, information lists and touch-interactions
8. Responsive tables and don't fit a micro-screen
9. Site navigation strategies in the Micro-UI

The Real Issues

For the initial overview - these are most core issues in a responsive design

1. General Visuals & device sizes (that change on-the fly because the device rotates)        
2. Resolutions (like Retina-displays)
3. Layout
   1. Arrangements based on different devices
   2. Which sizes should show/hide what elements
   3. Layout which is still ideal for the disabled (and SEO, since a spider is like a disabled person)
   4. Layouts which still work on huge screens (nobody like rotating their head to read...)
4. Navigation
   1. Navigation that works in minimal screen mode...
   2. ...and disabled mode
   3. ...and iPad / PC
   4. ...and still looks great
   5. user orientation (where am I?) - especially difficult on tiny devices
5. Content Responsiveness
   1. Re-arrange content-elements based on screen sizes and pointer-type (mouse, finger)
   2. Show/hide content parts...
   3. Change interactions (like introducing folding content on mobiles)
6. Multi-column content-layouts
7. Interactive Content
   1. Change interactions from mouse to finger (galleries, ...)
   2. Change tool-dialogs to handle fat-finger handling
   3. Completely change behavior based on device capabilities (has GPS...)
8. Special Image-Handling Mechanisms
   1. Dynamic resize
   2. Switch from large to thumbnail-with-lightbox on the fly
   3. Uncomplicated Retina-Handling
9. Tables: Very difficult issue because tables don't shrink well
10. Videos and highly interactive Visuals

So in general, most of these things have to do with content - not skinning. It's cute to start with the skin, but that only works for very simple sites - like the typical Wordpress-site. Everything else simply misses the point - you're applying the paint to the house that wasn't planned.

With Love from Switzerland,
Daniel