Last week I spoke at a Digital Roundtable event sponsored by the Philadelphia chapter of the American Marketing Association. The topics I touched upon included Responsive Design as well as ‘Mobile Trends for 2016.’ I’m including my presentation deck above, along with some notes, below.”
The first part of the presentation was really born out of a primal urge to give an epic rant about the misunderstandings some of our clients have brought to the table about responsive design. One major manifestation of this is the lack of understanding about the additional costs responsive brings. I guess because of the presence of so many frameworks (Bootstrap and Foundation, for instance) and pre-built responsive themes, a lot of folks out there have no idea that a fully responsive site requires 3 – 5 times the number of initial layouts and can balloon overall project budget considerably. Somehow or another I managed to channel my carnal anger, though, into a presentation whose intent ultimately was educational.
Since the advent of responsive, we’ve noticed an overall sense of confusion about what it really is, from both a technical and a practical perspective. Since we know that it isn’t our clients’ job to understand stuff from the level of the code we write, I gave two definitions, the ‘technical but useless’ one and the ‘practical’ one. Slide 2 from the presentation illustrates these.
In a nutshell, Definition 1 notes that media queries and responsive images are really the tools that most responsive sites are built around but notes that these tools, while empowering the trend, don’t simplify the design process, but rather almost ensure that the design phase for their next website will necessarily entail even more design from us that was previously necessary. Definition 2, the more practical and meaningful one to clients, acknowledges that there have been tools that we developers possess which have sped up the process of responsive design but, in the presentation, I noted that, in order to save money, a client needs to be content to accept a lot of default behaviors in mobile environments.
Slide three shows this site of ours from two different typical resolutions, one desktop and one mobile. It demonstrates ‘default’ Bootstrap behavior, illustrating the framework’s natural inclination to stack columns of content underneath one another, at mobile resolutions.
Slides four, five and six all illustrated desktop and mobile trends for 2016. These were divided into design and UX innovations and technology-based or business-based changes. These are (as determined by moí, relying on lots of research):