Francesco Vitale
Bachelor’s Degree, Computer Science
University of Milan-Bicocca, July 2013
Supervisor: Prof. Roberto Polillo
Assistant supervisor: Prof. Flavio De Paoli
Responsive Web Design for non-profit organizations
Summary of the thesis
(internship: 13 CFU, final report: 6 CFU, total: 19 CFU)
The thesis is about the use of responsive web design in non-profit
websites: the analysis of relevant case studies is followed by the creation of
an HTML prototype. The goal is to study the state of the art of responsive
web design in order to identify common problems and critical pitfalls, pat-
terns, best practices.
Responsive websites adapt to the characteristics of the device being
used, and are developed with tools such as fluid grids and layouts, flexible
media and images, media queries (logical expressions included in the CSS3
specification). In spite of some difficulties and unresolved problems—re-
sponsive images being the most important among them—responsive web
design offers a lot of advantages in comparison to alternative techniques
(e.g. mobile websites or native applications): a consistent and unified user
experience—based on the idea of the One Web; improved readability and
accessibility; future-friendly code.
Many non-profit organizations operate in countries where most of
the users are mobile-only—that is, they mainly use mobile devices to access
the Internet (e.g. Egypt, India, South Africa). Therefore, their websites need
to be mobile-friendly. Relevant examples of non-profit websites (e.g. WWF,
Organizing for Action, JDRF, Malaria No More, Boot Campaign, Unicef Swe-
den) offer insights on patterns and best practices for responsive develop-
ment. The results of the analysis include observations on responsive naviga-
tion, fluid layouts, performance and code optimization, that are later ap-
plied during the creation of the HTML prototype.
The HTML prototype is powered by WordPress, an open-source CMS,
and the Foundation framework. The development follows an experimental
design workflow using HTML wireframes. New HTML5 features are used
throughout the development: input types, the geolocation API, semantic
code. Great attention is devoted to the problem of responsive images, with a
comprehensive comparison of possible solutions.
In conclusion, it is possible to assert that responsive web design can
effectively be used to improve the web presence of non-profit organizations,
enhancing and streamlining the user experience. New possibilities offered
by CSS3 and HTML5 make it easier to create semantic and adaptive content,
ready to become responsive. A flexible design workflow is the best way to
create a responsive website that is robust and ready for the future.
Keywords: CSS3, HTML5, media queries, user experience, WordPress