Die Internet-Seiten der Universität Bielefeld werden vermehrt mit mobilen Endgeräten wie iPhone, iPad oder so genannten Smartphones aufgerufen. Allerdings ließen sich die Seiten auf den kleinen Bildschirmen nur schlecht erkennen. Allzu mühevoll war das Verkleinern und Vergrößern der Seitenelemente.
Über so genannte "Media Queries" hat das Informationsmanagement nun das Angebot in der Weise optimiert, dass vorab die Größe des Gerätes ermittelt und die Darstellung an die kleinen Displays angepasst wird. Dadurch lassen sich Texte auch mobil besser lesen und Seitenelemente passen sich in Höhe und Breite an die jeweiligen Auflösungen an. Die Internet-Seiten müssen dafür inhaltlich nicht verändert werden, die Steuerung erfolgt über modifizierte css-Stylesheet-Dateien.
Zunächst wurden die Hauptseiten unter www.uni-bielefeld.de umgestellt, das Informationsmanagement wird aber auch die Fakultäten und Einrichtungen beim Einsatz dieser Technologie unterstützen und weitere Seiten anpassen.
Im Prinzip spricht man verschiedene Stylesheets je nach Auflösung an. Smartphone und iPhone bis zu einer Größe von 399px, das iPad und andere Tablets mit einer Größe zwischen 400px und 769px, alle Monitordarstellungen ab 770px. Eine Verkleinerung auf dem PC oder Mac-Monitor bringt keinen Effekt und ist nicht gewünscht. Dazu nutzt man folgende "Weichen":
<meta name="viewport" content="user-scalable=yes, width=device-width" />
<link rel="stylesheet" type="text/css" href="/css/media_queries/smartphone.css" media="only screen and (max-device-width: 399px)" />
<link rel="stylesheet" type="text/css" href="/css/media_queries/ipad_uni.css" media="only screen and (min-width: 400px) and (max-device-width: 769px)" />
<link rel="stylesheet" type="text/css" href="/css/unistandard_2009.css" media="screen and (min-device-width: 770px)" />
Eine sehr empfehlenswerte Anleitung zu den so genannten "responsiven Webseiten" bzw. Media Queries findet sich hier: http://m.onblog.at/responsives-webdesign-1
Passen Sie die Pfade zu den css-Dateien an, sofern Sie ein eigenes CSS nutzen. Laden Sie sich dazu folgende Dateien herunter und modifizieren Sie die Farbangaben entsprechend Ihres css:
smartphone.css
ipad_uni.css
<xsl:template mode="unibi:head" match="dummy">
<xsl:apply-imports/>
<!-- hier einfuegen in das eigene Template -->
<meta name="viewport" content="user-scalable=yes, width=device-width" />
<link rel="stylesheet" type="text/css" href="/css/media_queries/smartphone.css" media="only screen and (max-device-width: 399px)" />
<link rel="stylesheet" type="text/css" href="/css/media_queries/ipad_uni.css" media="only screen and (min-width: 400px) and (max-device-width: 769px)" />
<link rel="stylesheet" type="text/css" href="/css/unistandard_2009.css" media="screen and (min-device-width: 770px)" />
<script type="text/javascript" src="/javascript/jquery.js"></script>
<script type="text/javascript" src="/javascript/iphone.js"></script>
<!-- Ende Media Queries -->
</xsl:template>
<!-- Ende Media Queries -->
Im Content-Bereich folgendes einstellen:
<!-- Content -->
<!-- <div id="tiler_green"></div> -->
<div id="contentwide">
<div id="contenthauptspalte">
<!-- das obere Menue bei MediaQuerie-Seiten -->
<div id="container_media">
<div id="header">
<if exists='sub.menu'>
<div class="leftButton" onclick="toggleMenu()">Navigation</div><span class="footer">Button drücken zum Ein- und Ausklappen<!--Push button to fold and unfold--></span>
</if>
<else>
</else>
<div id="utility">
<xsl:call-template name="unibi:navmenu_media"/>
<xsl:call-template name="pus:menu-left">
<xsl:with-param name="menu-left-file" select="$left-menu-file"/></xsl:call-template><br/>
<if exists='left2.menu'>
<!-- <h1 style="border-bottom-width: 4px; border-bottom-style: solid; border-bottom-color: #b3c834; padding-top:0px; padding-bottom:4px; margin-top:-3px;">
<gtext font="Fagopro" fontsize="15" fgcolor="#000000" split='split'><insert file="left2_titel.txt"/> </gtext></h1> -->
<xsl:call-template name="pus:menu-left2">
<xsl:with-param name="menu-left-file2" select="$left-menu-file2"/></xsl:call-template><br/>
</if>
<else>
</else>
<if exists='left3.menu'>
<!-- <h1 style="border-bottom-width: 4px; border-bottom-style: solid; border-bottom-color: #b3c834; padding-top:0px; padding-bottom:4px; margin-top:-3px;">
<gtext font="Fagopro" fontsize="15" fgcolor="#000000" split='split'><insert file="left3_titel.txt"/> </gtext></h1> -->
<xsl:call-template name="pus:menu-left3">
<xsl:with-param name="menu-left-file3" select="$left-menu-file3"/></xsl:call-template><br/>
</if>
<else>
</else>
<if exists='left4.menu'>
<!-- <h1 style="border-bottom-width: 4px; border-bottom-style: solid; border-bottom-color: #b3c834; padding-top:0px; padding-bottom:4px; margin-top:-3px;">
<gtext font="Fagopro" fontsize="15" fgcolor="#000000" split='split'><insert file="left4_titel.txt"/> </gtext></h1> -->
<xsl:call-template name="pus:menu-left4">
<xsl:with-param name="menu-left-file4" select="$left-menu-file4"/></xsl:call-template><br/>
</if>
<else>
</else>
</div>
</div></div>
<!--- Ende Media Queries -->
<xsl:apply-templates/></div><br/><br/>
<div id="fussstrich"> </div>
<div id="fussmenu"><xsl:call-template name="fwg:footer"/><br/><br/></div>
</div>
...
wenn das Haupttemplate 'unistandard_2009.xsl' im eigenen Template zitiert wird, braucht es diese Angabe nicht, ansonsten einfügen:
<!-- oberer Menuepunkt für Smartphone und iPad Media -->
<xsl:template name="unibi:navmenu_media">
<xsl:variable select="substring-before(rxml:metadata()/path,
rxml:metadata()/filename)"
name="parent-dir"/>
<xsl:variable name="submenu">
<xsl:if test="not($no-navbar-menu)">
<xsl:call-template name="unibi:get-menu"/>
</xsl:if>
</xsl:variable>
<xsl:variable select="rxml:metadata()/filename" name="filename"/>
<xsl:variable name="toptitle">
<xsl:choose>
<xsl:when test="$submenu//url[starts-with(., 'index.')]">
<xsl:value-of select="$submenu//mi[starts-with(url, 'index.')]/title"/>
</xsl:when>
<xsl:otherwise>
<xsl:call-template name="unibi:get-title"/>
</xsl:otherwise>
</xsl:choose>
</xsl:variable>
<xsl:variable name="useTitle">
<xsl:call-template name="unibi:make-wrappable">
<xsl:with-param select="$toptitle" name="str"/>
</xsl:call-template>
</xsl:variable>
<xsl:choose>
<xsl:when test="not(starts-with($filename, 'index'))">
<!-- <img alt="->" border="0" hspace="0" src="/images/template_2009/menuponits_gray.gif"/> -->
<a href="{concat($parent-dir,$query)}" style="font-weight:normal; background-color: #f0f0f0;color: #333333; display: block; font-size: 16px; margin-bottom: -1px; margin-left: -10px; padding-top: 6px; padding-right: 10px; padding-bottom: 6px; padding-left: 10px; margin-left:1px; margin-right:11px; text-decoration: none;"><xsl:value-of select="$useTitle"/>
</a>
</xsl:when>
<xsl:otherwise><a href="{concat($parent-dir,$query)}" style="font-weight:bold; background-color: #f0f0f0;color: #333333; display: block; font-size: 16px; margin-bottom: -1px; margin-left: -10px; padding-top: 6px; padding-right: 10px; padding-bottom: 6px; padding-left: 10px; margin-left:1px; margin-right:11px; text-decoration: none;">
<!-- <img alt="->" border="0" hspace="0" src="/images/template_2009/pfeil_orange_12p.gif"/> -->
<xsl:value-of select="$useTitle"/>
</a>
<xsl:if test="count($toc-entries) > 1">
<br/><xsl:apply-templates select="$toc-entries" mode="unibi:tocneu"/>
</xsl:if>
</xsl:otherwise>
</xsl:choose>
</xsl:template>
