Typesetting
and Publishing Tools:
Beyond WYSIWYG

Julie Blanc and Clémence Imbert,
HEAD - Genève, HES-SO

SNSF funded 3-year research project

WYSIWYG

An investigation in the uptake of graphic design software in Switzerland and France, 1980 - today

Team Julie Blanc
Sandra Bischler-Hartmann
Léonore Conte
Caroll Maréchal

Advisory Board Joost Grootens
Thomas Huot-Marchand
Anthony Masure
Nolwenn Maudet
Sarah Owens
Michael Renner
Alice Savoie

Cover of Print magazine, vol. 45, no. 6,
September-October 1991
© Art direction and design: Howard Schiller.
Illustration: Leslie Swain.

Advertising for Publish.
The How-to Magazine of Desktop Publishing,
in MacWorld, sept. 1987

Advertising for Varityper’s
Comp/Set TM 500, U&lc, 1975.

Xerox Star (1982)

Advertising for Ready, Set, Go!,
Manhattan Graphics, MacWorld,
November 1986

Visuality

Print-based concepts

World Wide Web (1992)

Tim Berners-Lee

Relatives units, animations, and so on

Cascading Style Sheet

Behavioral oriented design
Relative units, flexbox properties, float positioning, ...

chronologie.delure.org

Cascade → propagation of values and specificity

CSS Grid


							display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-auto-rows: minmax(100px, auto);
grid-auto-flow: dense;

https://radicalweb.design/exemples/space/
(Julien Bidoret)

How does the WYSIWYG paradigm
manifest in contemporary web practices?

UI/UX design software for prototyping

Figma (2016)

Auto layout in Figma

Some web principles

Web semantics (structured documents)
Accessibility
Resources consideration
Cascade → propagation of values and specificity

“The majority of these tools aren’t web-centric. Their output is not websites, but clickable simulations of websites.”

A.J. Kandy, "A DevTools for Designers", uxdesign.cc, 2018.

No-code website builders

Elementor

Templates and the risk of homogenization

Emma Ramstein et Nolwenn Maudet,
« Fast publication : l’homogénéisation visuelle des templates web comme conséquence du prêt-à-publier »,
Design Arts Medias [en ligne], 2024

Templates proposed by Wix

Emphasis on animation

Readymag

Verbose code from a web page build with Readymag

AI-assisted design

Wix

Code-Based Design Practices

How code-based design practices
incorporate aspects of WYSIWYG functionality?

DevTools

Firefox devtool
labs.jensimmons.com

Single-purpose visual web tools

Code is visual

Letf image: HTML; right image: SCSS

Fonts for coding

Designing WYSIWYG tools
for specific uses

Custom tool create by Cheval Vert for AG2R

Automatic layout
with code

Responsive web publications
CSS print / web to print

Composing with web technologies
phd.julie-blanc.fr

Layout in CSS print for swiss law journal

Single source publishing

Responsive print?

Louise Drulhe,
Critial atlas of Internet

wysiwyg.ch

(Soon)

Typesetting and Publishing Tools: Beyond WYSIWYG