Better design tools for responsive design of Web applications
Author(s) and publish date
- By:
-
-
Dave Raggett
-
- Published:
Studies show that corporate websites are for the most part not designed for their usability on smart phones. Some companies provide native applications that users can install on the smart phones, but this is not a panacea. This situation is likely to get worse with an increasing range of devices and platforms. What's needed is more emphasis on the benefits of the Open Web Platform and responsive design techniques as a basis for applications that work effectively across desktop PCs, tablets, smart phones, connected TVs and so forth. Web technologies reduce the cost and increase the reach, avoiding the need to learn new programming languages and SDKs for each platform, and saving time and money by avoiding the overheads of native app stores. However, responsive design can be a little tricky to master and there is a need for improved awareness of best practices and for better design tools.
As part of my work for the EU FP7 Serenoa project, I have been studying ideas for a new breed of design tools based upon model-based techniques. The starting point is to agree on the business requirements, to map these into domain and task models, and to use these to automaticaly generate rough design proposals for each broad category of device. The designs can then be reviewed and adjusted as needed. For this to work, the scope for a given category of device needs to be matched to the context of use. For smart phones, the screen is smaller, and users tend to be highly task oriented, necessitating a design focusing on a specific task. On the desktop, there is greater freedom, so designs can address a broader range of purposes.
The architecture and technical means to address this are covered in a talk I am presenting in the Developer Track at the WWW2013 conference. The approach is essentially a collaborative expert system that searchs for designs that are consistent with the changes made by human designers through a direct manipulation interface. Some changes only effect a given category of devices, but other changes may have broader repercussions, effecting the domain and task models. This is very much a work in progress, and you are welcome to view the slides and follow up on the background. My hope is to inspire tool vendors to rise up to the challenge of responsive design and help realize the potential of the Open Web Platform to delivering apps and services to a broad range of devices.
Finally, I would like to thank my co-presenter Vivian Motti of the Université catholique de Louvain for her help.
Muy bien
I think most successful Responsive-Web-Design "experts" suggest that RWD is a content-focused approach. That is, rather than focusing on devices, you should look first at the things you want to display on the screen. For each of these things, determine how much space you need and how it should adapt should the available space be greater than or less than expected. Then you can put together your Media Queries, and then you can start testing your approach with several popular devices.
Many "5 steps to a responsive site" guides seem to start with device-focused Media Queries. This means:
- they are defeating the point of responsive design: what if a new device comes out tomorrow?
- they give guidance that is so general that it is no longer the best advice for anyone
- they pave over the content-first approach and under-represent the amount of thought and care that should be taken with RWD
It would seem that the best approach is to develop tooling, frameworks and expert systems that can teach and simplify the content-first strategy. This is also the most difficult approach, as its much easier to just spit out general advice for fixed Media Query breakpoints and be done with it. However, every man and his dog is developing tools for fixed breakpoints and hard-coded devices, I think the community at large would benefit a great deal if the authority on the web (you guys) took the road less travelled.
I would go further and focus on which purposes you want to support in each context of use. This is where the model-based approach can help with separating out different design concerns through layered abstractions. Better tools are needed to support this approach. Three important considerations are: a) to give the designers the flexibility they need to adjust designs and to make use of custom UI controls, b) the need to propagate changes across the layers so as to keep the models in sync, and c) to recognize that different team members play different roles, and for the tools to support this. The study I have been doing for the Serenoa project helps to show what this can mean in practice, but there is a lot of work still needed to realize the full potential.