Find a post...

DNN-Connect Blogs

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 Mettler learned programming with the bible translation computer of his parents, deep in the jungles of Indonesia. Since he was only 12 years old at that time and the BIOS only had a version of BASICA, that's what got him started. With 16 he went back to Switzerland and learned German and basic city-survival skills. Equipped with this know-how he founded 2sic internet solutions in 1999 which was focused on web solutions on the Microsoft platform. After a few self-developed CMSs 2sic switched to DNN in 2003 and has been one of the largest partners (17 employees, 700+ projects) in Europe. Daniel is also the chief architect behind the open source 2sxc, a strong promoter of standardization (boostrap, patterns, AngularJS, checklists, etc.) and loves to eat anything - dead or alive. His motto: if the natives eat it, it game.

Hosting liberally provided by

Geoff Barlow 559 4
DNN-Connect 433 6
Peter Donker 5315 31
Christopher Hammond 713 2
Olivier Jooris 427 1
Daniel Mettler 12160 88
Clint Patterson 1 1
Jos Richters 65 1
James Rosewell 338 2
Will Strohl 1558 27
Ernst Peter Tamminga 445 4
Barry Waluszko 3046 2
Declan Ward 575 1
Gifford Watkins 728 9
Torsten Weggen 3053 3