DH
David Hellmann
2010/12/19

Make Better Shirts, wieso schon wieder was neues???

Gute Frage wenn ich ehrlich bin. Es kam eher Zufällig zu der Entscheidung Make Better Shirts ins Leben zu rufen. Aber mittlerweile muss ich sagen, dass es eine gute Entscheidung war. Warum? Darum! Nein im Ernst, ich bin ein T-Shirt Fan und habe gerne viele davon in meinem Regal. Warum also nicht eine Seite machen, die sich mit T-Shirts beschäftigt. Natürlich erhoffe ich mir auch was davon. Was genau das ist kann sich jeder denken... Die Weltherrschaft!!! Nein, ehrlich gesagt erhoffe ich mir davon den ein oder anderen Geheimtip für super tolle schicke T-Shirts zu bekommen.

Warum also nicht eine Seite machen, die sich mit T-Shirts beschäftigt.

Ein paar Sätze möchte ich auch mal zum Design los werden. Mir war schnell klar wie sich das ganze letztendlich anfühlen soll und auch wird. Die Idee war, eine Website zu entwickeln, die man auf allen Geräten nutzen kann, ohne auf irgendetwas verzichten zu müssen. Sowohl der Benutzer am iPhone als auch der am 27" Monitorsoll gleichermaßen Freude beim Besuch der Website haben. Ob das so ist kann jeder selber testen. Ich bin der Meinung, das es ganz gut geklappt hat.

Gelb ist doch einfach mal nur geil!

Gelb! Genau, das war auch etwas das sofort fest stand. Das verlangen danach eine Website zu machen wo Gelb zur primären Farbe gehört musste endlich gestillt werden. Oft angefangen aber nie zu Ende gebracht. Das hat nun ein Ende! Gelb ist doch einfach mal nur geil! Dazu noch etwas weiß und grau/schwarz und man bekommt ganz sicher ein tolles Ergebnis mit dem alle zufrieden sind.

Das Design ist im großen und ganzen sehr einfach gehalten. Das ganze wurde in einGrid gepresst und ist somit recht skalierbar. Genau diese Skalierbarkeit macht den Reiz der Website aus. Highlight ist für mich eine Art Device-Detection. Unterm Logo befindet sich ein Icon welches das Gerät anzeigt mit dem man surft bzw. besser gesagt zeigt es das Gerät an, zu welchem die aktuell genutzte Auflösung passt. Das wird schlicht und einfach mit CSS Media Queries umgesetzt. Damit kann man wunderbar Auflösungen und viele andere Dinge abfragen und in Abhängigkeit darauf reagieren.

Makebettershirts 01 Img01

Mit diesen CSS Media Queries wurden auch die verschiedenen Ansichten der Website umgesetzt. Ein sehr mächtiges Feature womit man viele nette Sachen machen kann.

Device Detection Code Beispiel

      
        #sidebar h1 .widescreen,
#sidebar h1 .screen,
#sidebar h1 .laptop,
#sidebar h1 .ipad,
#sidebar h1 .iphone {
	width: 46px;
	height: 40px;
	text-indent: -99999px;
	background:url(images/screenIcons.png) 0 -160px no-repeat;
	position: absolute;
	left:50%;
	bottom:20px;
	margin: 0 0 0 -23px;
}
 
#sidebar h1 .screen {
	display: none;
	background:url(images/screenIcons.png) 0 -120px no-repeat;
}
 
#sidebar h1 .laptop {
	display: none;
	background:url(images/screenIcons.png) 0 -80px no-repeat;
}
 
#sidebar h1 .ipad {
	display: none;
	background:url(images/screenIcons.png) 0 -40px no-repeat;
}
 
#sidebar h1 .iphone {
	display: none;
	background:url(images/screenIcons.png) 0 0 no-repeat;
}
/* < 1880 */
@media screen and (max-width:1879px) {
	#sidebar h1 .screen,
	#sidebar h1 .laptop,
	#sidebar h1 .ipad,
	#sidebar h1 .iphone {
		display: none;
	}
 
	#sidebar h1 .widescreen {
		display: block;
	}
}
 
/* < 1600 */
@media screen and (max-width:1599px) {
	#sidebar h1 .widescreen,
	#sidebar h1 .laptop,
	#sidebar h1 .ipad,
	#sidebar h1 .iphone {
		display: none;
	}
 
	#sidebar h1 .screen {
		display: block;
	}
}
 
/* < 1320 */
@media screen and (max-width:1319px) {
	#sidebar h1 .widescreen,
	#sidebar h1 .screen,
	#sidebar h1 .ipad,
	#sidebar h1 .iphone {
		display: none;
	}
 
	#sidebar h1 .laptop {
		display: block;
	}
}
 
/* < 1039 */
@media screen and (max-width:1039px) and (min-device-width: 1025px) {
	#sidebar h1 .widescreen,
	#sidebar h1 .screen,
	#sidebar h1 .laptop,
	#sidebar h1 .iphone {
		display: none;
	}
 
	#sidebar h1 .ipad {
		display: block;
	}
}
 
/* < 759 */
@media screen and (max-width:759px) and (min-device-width: 1025px) {
	#sidebar h1 .widescreen,
	#sidebar h1 .screen,
	#sidebar h1 .laptop,
	#sidebar h1 .ipad {
		display: none;
	}
 
	#sidebar h1 .iphone {
		display: block;
	}
}
 
 
/* < 1039 */
@media only screen and (max-device-width: 1024px) and (orientation:landscape) {
	#sidebar h1 .widescreen,
	#sidebar h1 .screen,
	#sidebar h1 .laptop,
	#sidebar h1 .iphone {
		display: none;
	}
 
	#sidebar h1 .ipad {
		display: block;
	}
}
 
/* < 1039 */
@media only screen and (max-device-width: 768px) and (orientation:portrait) {
	#sidebar h1 .widescreen,
	#sidebar h1 .screen,
	#sidebar h1 .laptop,
	#sidebar h1 .iphone {
		display: none;
	}
 
	#sidebar h1 .ipad {
		display: block;
	}
}
 
/* < 759 */
@media only screen and (max-device-width: 480px) and (orientation:landscape), only screen and (max-device-width: 320px) and (orientation:portrait) {
	#sidebar h1 .widescreen,
	#sidebar h1 .screen,
	#sidebar h1 .laptop,
	#sidebar h1 .ipad {
		display: none;
	}
 
	#sidebar h1 .iphone {
		display: block;
	}
}

Man kann sofort sehen das es etwas mehr Denkarbeit ist als normales CSS schreiben und natürlich ist es auch mehr Aufwand beim tippen. Im Grunde wird hier nur dieBildschirmauflösung bzw. die maximale Geräteauflösung abgefragt. Bei deniPad und iPhone dann noch ob es sich im horizontalen oder vertikalen Zustand befindet. Dem entsprechend werden dann die Icons aus bzw. eingeblendet. Diese kleine Beispiel soll nur mal einen kleinen Einblick geben was man mit den CSS Media Queries anfangen kann. Es gibt weitaus mehr Möglichkeiten.

Genug von der Technik hin zu dem menschlichen Aspekt von Make Better Shirts. Endlich kann ich mal mit Jan zusammen ein Projekt betreuen wo wir beide gleichermaßen Freude daran haben. Ist das nicht schön?!! So, Schluss jetzt. Viel Spaß beim besuchen der Website(s).

Tutorials
Tags css makebettershirts media queries responsive
comments powered by Disqus

Maybe interesting…

UP