|
|
<!doctype html>
|
|
|
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="utf-8">
|
|
|
|
|
|
<title>Make Inclusive Websites</title>
|
|
|
<meta name="description" content="XPUB">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<link rel="stylesheet" href="pages.css">
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
<style>
|
|
|
figcaption {
|
|
|
font-size: 18px;
|
|
|
display: inline-block;
|
|
|
padding: 12px 0 0 1.2px;
|
|
|
height: 3em;
|
|
|
}
|
|
|
figure {
|
|
|
max-width: 47%;
|
|
|
float: left;
|
|
|
padding: 0;
|
|
|
margin: 14px;
|
|
|
position: relative;
|
|
|
}
|
|
|
img {
|
|
|
max-width: 100% !important;
|
|
|
outline: 1.5px solid lightgray;
|
|
|
box-shadow: grey 2.5px 2.5px 10px -0.5px;
|
|
|
}
|
|
|
|
|
|
#publication {
|
|
|
clear:both;
|
|
|
}
|
|
|
|
|
|
#myGallery {
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
flex-wrap: wrap;
|
|
|
align-content: center;
|
|
|
justify-content: center;
|
|
|
align-items: flex-start;
|
|
|
}
|
|
|
|
|
|
img.still {
|
|
|
position: absolute;
|
|
|
max-width: 100% !important;
|
|
|
padding: 0.5% 0.5% 0.5% 0 !important;
|
|
|
}
|
|
|
|
|
|
img.workimg {
|
|
|
position: relative !important;
|
|
|
outline: 1.5px solid lightgray;
|
|
|
padding: 0 !important;
|
|
|
}
|
|
|
|
|
|
figure:hover > img.still, figure:focus-within > img.still, figure:active > img.still, figure:hover > .fade-in, figure:focus-within > .fade-in, figure:active > .fade-in{
|
|
|
visibility: hidden;
|
|
|
}
|
|
|
p.fade-in {
|
|
|
font-size: 2.3em!important;
|
|
|
display: inline-block;
|
|
|
position: absolute;
|
|
|
z-index: 1000;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
pointer-events: none;
|
|
|
text-align: center;
|
|
|
text-shadow: -2px -1px 23px white;
|
|
|
color: rgba(71, 124, 230, 0.7)!important;
|
|
|
padding-top: 20%;
|
|
|
margin: 0;
|
|
|
background: radial-gradient(white, transparent)!important;
|
|
|
animation: fadeIn ease 10s;
|
|
|
animation-iteration-count:infinite;
|
|
|
-webkit-animation: fadeIn ease 10s;
|
|
|
-moz-animation: fadeIn ease 10s;
|
|
|
-o-animation: fadeIn ease 10s;
|
|
|
-ms-animation: fadeIn ease 10s;
|
|
|
opacity: 0;
|
|
|
}
|
|
|
@keyframes fadeIn {
|
|
|
0% {
|
|
|
opacity:0;
|
|
|
}
|
|
|
35% {
|
|
|
opacity:0;
|
|
|
}
|
|
|
50% {
|
|
|
opacity:1;
|
|
|
}
|
|
|
65% {
|
|
|
opacity:0;
|
|
|
}
|
|
|
100% {
|
|
|
opacity:0;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@-moz-keyframes fadeIn {
|
|
|
0% {
|
|
|
opacity:0;
|
|
|
}
|
|
|
35% {
|
|
|
opacity:0;
|
|
|
}
|
|
|
50% {
|
|
|
opacity:1;
|
|
|
}
|
|
|
65% {
|
|
|
opacity:0;
|
|
|
}
|
|
|
100% {
|
|
|
opacity:0;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@-webkit-keyframes fadeIn {
|
|
|
0% {
|
|
|
opacity:0;
|
|
|
}
|
|
|
35% {
|
|
|
opacity:0;
|
|
|
}
|
|
|
50% {
|
|
|
opacity:1;
|
|
|
}
|
|
|
65% {
|
|
|
opacity:0;
|
|
|
}
|
|
|
100% {
|
|
|
opacity:0;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@-o-keyframes fadeIn {
|
|
|
0% {
|
|
|
opacity:0;
|
|
|
}
|
|
|
35% {
|
|
|
opacity:0;
|
|
|
}
|
|
|
50% {
|
|
|
opacity:1;
|
|
|
}
|
|
|
65% {
|
|
|
opacity:0;
|
|
|
}
|
|
|
100% {
|
|
|
opacity:0;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@-ms-keyframes fadeIn {
|
|
|
0% {
|
|
|
opacity:0;
|
|
|
}
|
|
|
35% {
|
|
|
opacity:0;
|
|
|
}
|
|
|
50% {
|
|
|
opacity:1;
|
|
|
}
|
|
|
65% {
|
|
|
opacity:0;
|
|
|
}
|
|
|
100% {
|
|
|
opacity:0;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
<div id='wrapper'></div>
|
|
|
<a href='../' id='homebttn' class='ext'> << home</a>
|
|
|
<header>
|
|
|
<h1 id='project-title'>Make Inclusive Websites <a href='#hleft-text' class='show'> ⓘ</a></h1>
|
|
|
<h2 id='student-name'>Max Lehmann</h2>
|
|
|
<div id='hleft-text'>
|
|
|
<a href=# id='back'>
|
|
|
<div id='inner-hleft-text'>
|
|
|
<div id='ihtp'>
|
|
|
<object>
|
|
|
<div id='about-project'>
|
|
|
<p>Make Inclusive Websites is a web index that helps to create websites, that work well for a variety of people with diverse abilities. It provides many references to helpful websites, such as texts, tutorials or tools. These are integrated into an environment that provides an easy entry into this complex topic.
|
|
|
<br><br>Make Inclusive Websites is also a speculative proposal for a different way of making web content accessible and an invitation to discuss about it. The idea is to move away from a one-size-fits-all mentality, yet not put users in the responsibility of going through complex adaptation processes that may be barriers to some. Make Inclusive Websites proposes the collaborative creation of a variety of different interfaces that allow the same web content to be accessed in different ways. It aims to work for a variety of users without the need for much further adaptation. </p>
|
|
|
</div>
|
|
|
<hr align='left'>
|
|
|
<div id='about-student'>
|
|
|
<p>Max Lehmann is a designer with a strong focus on making information accessible by inclusive means. This applies to both print and web projects. His practice is based on simplification of contents and processes, clear functional design and illustration. </p>
|
|
|
</div>
|
|
|
<a id='getback' class='int'> go back </a>
|
|
|
</object>
|
|
|
</div>
|
|
|
</div>
|
|
|
</a>
|
|
|
</div>
|
|
|
</header>
|
|
|
<section id='main'>
|
|
|
<div id="galleries">
|
|
|
<div id='work'>
|
|
|
<h3 class='gal-title'>Work</h3>
|
|
|
<ul id='publist'>
|
|
|
<li>Go to <a href='https://lehmannmax.de/home/index.html' target="_blank" class='ext'>Make Inclusive Websites</a></li>
|
|
|
<li>Go to the <a href="https://pzwiki.wdka.nl/mediadesign/MA_documentation"target="_blank" >full documentation</a></li>
|
|
|
</ul>
|
|
|
<div id="myGallery">
|
|
|
<figure tabindex="0">
|
|
|
<p class="fade-in">hover me</p>
|
|
|
<img src="img/Home.jpg" title="Home (selection) screen of Make Inclusive Websites" alt="" class='still'/>
|
|
|
<img src="img/Home.gif" title="Home (selection) screen of Make Inclusive Websites" alt="" class='workimg'/><figcaption>Home (selection) screen of Make Inclusive Websites</figcaption>
|
|
|
</figure>
|
|
|
<figure tabindex="0">
|
|
|
<p class="fade-in">hover me</p>
|
|
|
<img src="img/Wiki.jpg" title="Wiki of Make Inclusive Websites" alt="" class='still' tabindex="0"/>
|
|
|
<img src="img/Wiki.gif" title="Wiki of Make Inclusive Websites" alt="" class='workimg'/><figcaption>Wiki of Make Inclusive Websites</figcaption>
|
|
|
</figure>
|
|
|
<figure tabindex="0">
|
|
|
<p class="fade-in">hover me</p>
|
|
|
<img src="img/Globe.jpg" title="Globe interface of Make Inclusive Websites" alt="" class='still'/>
|
|
|
<img src="img/Globe.gif" title="Globe interface of Make Inclusive Websites" alt="" class='workimg'/><figcaption>Globe interface of Make Inclusive Websites</figcaption>
|
|
|
</figure>
|
|
|
<figure tabindex="0">
|
|
|
<p class="fade-in">hover me</p>
|
|
|
<img src="img/Foldout.jpg" title="Fold Out interface of Make Inclusive Websites" alt="" class='still'/>
|
|
|
<img src="img/Foldout.gif" title="Fold Out interface of Make Inclusive Websites" alt="" class='workimg'/><figcaption>Fold Out interface of Make Inclusive Websites</figcaption>
|
|
|
</figure>
|
|
|
<figure tabindex="0">
|
|
|
<p class="fade-in">hover me</p>
|
|
|
<img src="img/UIOptions.jpg" title="UI Options interface of Make Inclusive Websites" alt="" class='still'/>
|
|
|
<img src="img/UIOptions.gif" title="UI Options interface of Make Inclusive Websites" alt="" class='workimg'/><figcaption>UI Options interface of Make Inclusive Websites</figcaption>
|
|
|
</figure>
|
|
|
<figure tabindex="0">
|
|
|
<p class="fade-in">hover me</p>
|
|
|
<img src="img/Print.jpg" title="Print interface of Make Inclusive Websites" alt="" class='still'/>
|
|
|
<img src="img/Print.gif" title="Print interface of Make Inclusive Websites" alt="" class='workimg'/><figcaption>Print interface of Make Inclusive Websites</figcaption>
|
|
|
</figure>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!--br style="float:none"-->
|
|
|
<div id='publication'>
|
|
|
<h3 class='gal-title'>Publication</h3>
|
|
|
<ul id='publist'>
|
|
|
<li><a href='pdf/MaxLehmann_Thesis_compressed.pdf' target="_blank" class='ext'>Publication PDF - Make Inclusive Websites</a></li>
|
|
|
<li><a href="https://lehmannmax.de/Thesis/Thesis.html" target="_blank">Publication Online - Make Inclusive Websites</a></li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
</div>
|
|
|
</body>
|
|
|
</html> |