<?xml version="1.0" encoding="UTF-8"?><?xml-stylesheet type="text/xsl" href="https://katharineum.de/wp-content/plugins/xslt/public/template.xsl"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	xmlns:rssFeedStyles="http://www.wordpress.org/ns/xslt#"
>

<channel>
	<title>Redesign Archive &#8211; Katharineum zu Lübeck</title>
	<atom:link href="https://katharineum.de/tag/redesign/feed/" rel="self" type="application/rss+xml" />
	<link>https://katharineum.de/tag/redesign/</link>
	<description>Städtisches Gymnasium mit altsprachlichem Zweig &#124; seit 1531</description>
	<lastBuildDate>Tue, 07 Mar 2023 16:09:05 +0000</lastBuildDate>
	<language>de</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.1</generator>

<image>
	<url>https://katharineum.de/wp-content/uploads/2019/09/cropped-logo_with_rect-1-32x32.png</url>
	<title>Redesign Archive &#8211; Katharineum zu Lübeck</title>
	<link>https://katharineum.de/tag/redesign/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Redesign: Die Website erstrahlt im neuen Glanz</title>
		<link>https://katharineum.de/redesign/</link>
		
		<dc:creator><![CDATA[Jonathan Weth (netcup)]]></dc:creator>
		<pubDate>Fri, 16 Apr 2021 14:19:17 +0000</pubDate>
				<category><![CDATA[Allgemein]]></category>
		<category><![CDATA[Artikel-2021]]></category>
		<category><![CDATA[Redesign]]></category>
		<category><![CDATA[Website-Team]]></category>
		<guid isPermaLink="false">https://katharineum.de/?p=329071</guid>

					<description><![CDATA[<p>Am gestrigen Donnerstag trafen sich die Techniker des Website-Teams (natürlich virtuell), um die Auffrischung der Website, die bereits mit den ersten Änderungen zur diesjährigen Schulvorstellung begonnen hatte, zu Ende zu bringen. Wesentliches Ziel war es, das Design aus dem Jahr 2017 moderner, heller und intuitiver zu gestalten, denn im Laufe des letzten Jahres sind immer wieder Probleme aufgetreten, die mit&#160;<a href="https://katharineum.de/redesign/">&#8230;</a></p>
<p>Der Beitrag <a href="https://katharineum.de/redesign/">Redesign: Die Website erstrahlt im neuen Glanz</a> erschien zuerst auf <a href="https://katharineum.de">Katharineum zu Lübeck</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>Am gestrigen Donnerstag trafen sich die Techniker des Website-Teams (natürlich virtuell), um die Auffrischung der Website, die bereits mit den ersten Änderungen zur diesjährigen Schulvorstellung begonnen hatte, zu Ende zu bringen. Wesentliches Ziel war es, das Design aus dem Jahr 2017 moderner, heller und intuitiver zu gestalten, denn im Laufe des letzten Jahres sind immer wieder Probleme aufgetreten, die mit dem alten Design nicht mehr lösbar waren. Das ist dabei herausgekommen:</p>
<div id="justified_gallery_0OVthb" class="sgg-style-8 "><a class="sgg-lightbox-item" href="https://katharineum.de/wp-content/uploads/2021/04/kath-ipad.jpeg" data-size="1300x861" data-caption="Darstellung auf dem Tablet"><img decoding="async" src="https://katharineum.de/wp-content/uploads/2021/04/kath-ipad-540x358.jpeg" data-caption="Darstellung auf dem Tablet" alt="Darstellung auf dem Tablet"/></a><a class="sgg-lightbox-item" href="https://katharineum.de/wp-content/uploads/2021/04/kath-iphone.jpeg" data-size="1300x861" data-caption="Darstellung auf dem Handy"><img decoding="async" src="https://katharineum.de/wp-content/uploads/2021/04/kath-iphone-540x358.jpeg" data-caption="Darstellung auf dem Handy" alt="Darstellung auf dem Handy"/></a><a class="sgg-lightbox-item" href="https://katharineum.de/wp-content/uploads/2021/04/kath-mac.jpeg" data-size="1600x1060" data-caption="Darstellung auf dem Desktop"><img decoding="async" src="https://katharineum.de/wp-content/uploads/2021/04/kath-mac-540x358.jpeg" data-caption="Darstellung auf dem Desktop" alt="Darstellung auf dem Desktop"/></a></div>
<div id="load_more_holder_0OVthb" style="display:none"></div>
			<script type="text/javascript">
				(function($){
					$("#justified_gallery_0OVthb").justifiedGallery({
						sizeRangeSuffixes : {'lt100': '', 'lt240': '', 'lt320': '', 'lt500': '', 'lt640': '', 'lt1024': ''},rowHeight: 275,
mobileRowHeight: 170,
margins: 14,
lastRow: "nojustify",
fixedHeight: false,
captions: true,
captionsColor: "#000000",
captionsOpacity: 0.7,
randomize: false,
maxRowHeight: 0,
rel: "0OVthb",
target: null,
refreshTime: 250,
cssAnimation: true,
captionsAnimationDuration: 500,
imagesAnimationDuration: 300,
captionsVisibleOpacity: 0.7,
class: "",
					})
					.on('jg.complete', function(){
						$(document).ready(function(){
							var pswp_0OVthb = SGGinitPhotoSwipeFromDOM('#justified_gallery_0OVthb',{title: true,
share: true,
print: false,
history: false,
 uid: '0OVthb' })})					});
					var nodes = document.querySelectorAll('#justified_gallery_0OVthb > *'),
_nodes = [].slice.call(nodes, 0);
var getDirection = function (ev, obj) {
    // the width and height of the current div
	var w = $(obj).width(),
		h = $(obj).height(),
		// calculate the x and y to get an angle to the center of the div from that x and y.
		// gets the x value relative to the center of the DIV and "normalize" it
		x = ( ev.pageX - $(obj).offset().left - ( w/2 )) * ( w > h ? ( h/w ) : 1 ),
		y = ( ev.pageY - $(obj).offset().top  - ( h/2 )) * ( h > w ? ( w/h ) : 1 ),
		// the angle and the direction from where the mouse came in/went out clockwise (TRBL=0123);
		// first calculate the angle of the point,
		// add 180 deg to get rid of the negative values
		// divide by 90 to get the quadrant
		// add 3 and do a modulo by 4  to shift the quadrants to a proper clockwise TRBL (top/right/bottom/left) **/
		direction = Math.round( ( ( ( Math.atan2(y, x) * (180 / Math.PI) ) + 180 ) / 90 ) + 3 ) % 4;
	return direction;
};
var addClass = function ( ev, obj, state ) {
    var direction = getDirection( ev, obj ),
        class_suffix = "",
        iframe = obj.classList.contains("mfp-iframe");
    obj.className = "";
    if (iframe) {
        obj.classList.add("mfp-iframe");
    }
    obj.classList.add("sgg-lightbox-item");
    switch ( direction ) {
        case 0 : class_suffix = '-top';    break;
        case 1 : class_suffix = '-right';  break;
        case 2 : class_suffix = '-bottom'; break;
        case 3 : class_suffix = '-left';   break;
    }
    obj.classList.add( state + class_suffix );
};
// bind events
_nodes.forEach(function (el) {
    el.addEventListener('mouseenter', function (ev) {
        addClass( ev, this, 'in' );
    }, false);
    el.addEventListener('mouseleave', function (ev) {
        addClass( ev, this, 'out' );
    }, false);
});														var galleries = [];
				var gallery = $("#justified_gallery_0OVthb");
				$(window).scroll(function() {
					if ( galleries.length >= 1  ) {
						var scroll_top = $(window).scrollTop();
						var scroll_bottom = scroll_top + $(window).height();
						var gallery_top = $(gallery).offset().top;
						var gallery_height = $(gallery).innerHeight();
						var gallery_bottom = gallery_top + gallery_height;
						if( scroll_bottom >= gallery_bottom ) {
							var images = galleries.splice(0,1);
							var image_html = $("#load_more_holder_0OVthb").html(images).text();
							$(gallery).append(image_html);
							$(gallery).justifiedGallery('norewind');
						}
					}
				});				})(jQuery);
			</script>
						<style>
	            #justified_gallery_0OVthb .sgg-caption {
					background: rgb(0,0,0);
					background: rgba(0,0,0,0.7);
					color: #ffffff;
					font-size: 1em;
					font-weight: 400;
					font-family: Helvetica, Arial, sans-serif;
				}
				#load_more_0OVthb {
				    background: #444444;
				    color: #ffffff;
				}
			</style>
        	
<p>So hat die Einführung der neuen Plattform NIMBUS das Website-Team vor unlösbare Herausforderungen gestellt: Gerne wollten wir den neuen Dienst auch im Schnellzugriff rechts oben auf der Seite verlinken, doch egal wie man es auch versuchte, es war nur Platz für fünf Elemente. Dieses Problem ist nun gelöst, indem der Schnellzugriff unter den TU-ES-Slider gewandert ist. Somit kann die Schnellzugriffleiste nun sechs oder ggf. mehr Elemente aufnehmen.</p>
<p>Das Menü haben wir ebenfalls neu gestaltet.  Das Hauptmenü ist nun an der Stelle des alten Schnellzugriffs zu finden und der dunkle Hintergrund ist für einen weißen Hintergrund gewichen. Mit der schwarzer Schriftfarbe und roten Akzenten ist das Menü nun deutlich heller gestaltet. Insgesamt nimmt der Bereich über dem TU-ES-Slider jetzt deutlich weniger Platz ein, was auf allen Seiten vor Vorteil ist.</p>
<p>Bei allen Änderungen fällt auf: Auch eine neue Schriftart spielt eine wichtige Rolle. „Oswald“ dient uns nun als Standardschrift für alle Überschriften und ähnliche Textelemente. Insgesamt sollen die Schriftarten auf zwei reduziert werden, um die Seite ebenfalls ruhiger zu machen.</p>
<p>Einigen ist vielleicht auch aufgefallen, dass der dunkle Balken im Slider ebenfalls weichen musste und zugunsten einer dezenteren Gestaltung durch einen kaum merkbaren Schatten ersetzt wurde.</p>
<p>Auch die Seite mit allen Lehrerinnen und Lehrern wurde geringfügig angepasst, um dem aktuellen Stand der Technik zu entsprechen.</p>
<p>Wir hoffen, dass Ihnen und euch die Änderungen gefallen und freuen uns immer über konstruktives Feedback!</p>
<p style="text-align: right;"><em>Technik-Abteilung des Website-Teams</em></p>
<p>Der Beitrag <a href="https://katharineum.de/redesign/">Redesign: Die Website erstrahlt im neuen Glanz</a> erschien zuerst auf <a href="https://katharineum.de">Katharineum zu Lübeck</a>.</p>
]]></content:encoded>
					
		
		
		<enclosure url="https://katharineum.de/wp-content/uploads/2021/04/kath-ipad.jpeg" length="214384" type="image/jpg" />
<media:content xmlns:media="http://search.yahoo.com/mrss/" url="https://katharineum.de/wp-content/uploads/2021/04/kath-ipad.jpeg" width="1300" height="861" medium="image" type="image/jpeg">
	<media:copyright>Katharineum zu Lübeck</media:copyright>
	<media:title>Darstellung auf dem Tablet</media:title>
	<media:description type="html"><![CDATA[Grafik: Jonathan Weth]]></media:description>
</media:content>
<media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://katharineum.de/wp-content/uploads/2021/04/kath-ipad.jpeg" width="1300" height="861" />
	</item>
	</channel>
</rss>
