Responsive Webdesign: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
 
(8 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
 
== Siehe auch ==
 
== Siehe auch ==
 
[[TYPO3 - Responsive Design]]
 
[[TYPO3 - Responsive Design]]
 +
 
[[Webdesign - Verschiedenes]]
 
[[Webdesign - Verschiedenes]]
 +
== Links ==
 +
 +
http://typo3blogger.de/responsive-design-mit-typo3/
  
 
== Media Queries ==
 
== Media Queries ==
 
Verschiedene Geräte unterscheiden mit [[Media Queries]]
 
Verschiedene Geräte unterscheiden mit [[Media Queries]]
 +
=== Breakpoints ===
 +
<pre>
 +
// Breakpoints
 +
// ========================================================================
 +
 +
// Phone Portrait:  Galaxy (360x640), iPhone 6 (375x667), iPhone 6+ (414x736)
 +
// Phone Landscape:  Galaxy (640x360), iPhone 6 (667x375), iPhone 6+ (736x414)
 +
// Tablet Portrait:  iPad (768x1024), Galaxy Tab (800x1280),
 +
// Tablet Landscape: iPad (1024x768), iPad Pro (1024x1366),
 +
// Desktop:          Galaxy Tab (1280x800), iPad Pro (1366x1024)
 +
</pre>
 +
== Responsive Bilder - Responsive Images ==
 +
[[Responsive Web Design - Images]]
  
 
== Adaptive Images ==
 
== Adaptive Images ==
 +
Quellen:
 +
 +
http://t3n.de/news/responsive-webdesign-typo3-nutzt-446306/ (2013-12)
 +
=== 1. Ansatz - Relative Breitenangabe ===
 +
img {
 +
max-width: 100%;
 +
height: auto;
 +
}
 +
 +
Nachteil: Es wird für alle Screens die gleiche Datenmenge geladen.
 +
 +
=== 2. Ansatz - noscript ===
 +
Bilder werden im noscript Teil referenziert. Der JavaScript fähige Browser lädt diesen Teil nicht. Danach kann man mit JavaScript zugreifen (hier mit jQuery)
 +
 +
HTML
 +
<pre>
 +
<noscript data-large="Koala.jpg"
 +
data-small="Koala-small.jpg" data-alt="Koala">
 +
<img src="Koala-small.jpg" alt="Koala" />
 +
</noscript>
 +
</pre>
 +
JavaScript
 +
<pre>
 +
$('noscript[data-large][data-small]').each(function(){
 +
    var $this = $(this);
 +
    var src = screen.width >= 480 ? $this.data('large') : $this.data('small');
 +
    $('<img src="' + src + '" alt="' + $(this).data('alt') + '" />').insertAfter($this);
 +
});
 +
</pre>
 +
 +
=== 3. Ansatz - adaptive-images.com Script ===
 +
==== Funktionsweise ====
 +
* Über Cookie beim 1. Aufruf max Bildschirmgröße (also nicht der Viewport sondern real mögliche Pixel) abrufen und speichern.
 +
* Alle Bildanfragen werden über htaccess an ein PHP-Skript geschickt
 +
* PHP Skript entscheidet anhand Cookie welche Größe benötigt wird. Das Bild wird über GDlib erzeugt und im Ordner ai-cache/Bildgröße gespeichert
 +
* Bei weiteren Aufrufen wird das Bild direkt aus dem Cache geholt.
 +
==== Cookie ====
 +
<pre>
 +
<script>
 +
document.cookie='resolution='+Math.max(screen.width,screen.height)+';
 +
path=/';
 +
</script>
 +
</pre>
 +
 +
Bzw. für TYPO3 TS
 +
<pre>
 +
#TypoScript setup
 +
page.headTag (
 +
<head>
 +
<script>
 +
document.cookie='resolution='+Math.max(screen.width,screen.height)+';
 +
path=/';
 +
</script>
 +
)
 +
</pre>
 +
 +
==== adaptive-images.php Skript ====
 +
Breakpoints anpassen
 +
$resolutions = array(1382, 992, 768, 480, 320);
 +
==== htaccess ====
 +
 +
Hier die Anpassung für TYPO3, das Original findet man auf adaptive-images.com
 +
<pre>
 +
<IfModule mod_rewrite.c>
 +
# Enable URL rewriting
 +
RewriteEngine On
 +
Options +FollowSymlinks
 +
# Adaptive Images
 +
# don't apply the AI behaviour to images inside AI's cache folder:
 +
RewriteCond %{REQUEST_URI} !ai-cache
 +
# further directories that shouldn't use AI
 +
RewriteCond %{REQUEST_URI} !fileadmin/images
 +
# Send any GIF, JPG, or PNG request that IS NOT stored inside
 +
# one of the above directories
 +
RewriteRule ^.*\.(jpg|jpeg|png|gif)$ adaptive-images.php [L]
 +
 +
. . .
  
−
== Links ==
+
</IfModule>
 +
</pre>
  
−
http://typo3blogger.de/responsive-design-mit-typo3/
+
=== 4. Ansatz ===
 +
<picture> HTML 5 Element soll alles besser machen ;-)

Aktuelle Version vom 18. Dezember 2020, 08:27 Uhr

Siehe auch[Bearbeiten]

TYPO3 - Responsive Design

Webdesign - Verschiedenes

Links[Bearbeiten]

http://typo3blogger.de/responsive-design-mit-typo3/

Media Queries[Bearbeiten]

Verschiedene Geräte unterscheiden mit Media Queries

Breakpoints[Bearbeiten]

// Breakpoints
// ========================================================================

// Phone Portrait:   Galaxy (360x640), iPhone 6 (375x667), iPhone 6+ (414x736)
// Phone Landscape:  Galaxy (640x360), iPhone 6 (667x375), iPhone 6+ (736x414)
// Tablet Portrait:  iPad (768x1024), Galaxy Tab (800x1280),
// Tablet Landscape: iPad (1024x768), iPad Pro (1024x1366),
// Desktop:          Galaxy Tab (1280x800), iPad Pro (1366x1024)

Responsive Bilder - Responsive Images[Bearbeiten]

Responsive Web Design - Images

Adaptive Images[Bearbeiten]

Quellen:

http://t3n.de/news/responsive-webdesign-typo3-nutzt-446306/ (2013-12)

1. Ansatz - Relative Breitenangabe[Bearbeiten]

img { max-width: 100%; height: auto; }

Nachteil: Es wird für alle Screens die gleiche Datenmenge geladen.

2. Ansatz - noscript[Bearbeiten]

Bilder werden im noscript Teil referenziert. Der JavaScript fähige Browser lädt diesen Teil nicht. Danach kann man mit JavaScript zugreifen (hier mit jQuery)

HTML 

<noscript data-large="Koala.jpg"
data-small="Koala-small.jpg" data-alt="Koala">
<img src="Koala-small.jpg" alt="Koala" />
</noscript>

JavaScript 

$('noscript[data-large][data-small]').each(function(){
    var $this = $(this);
    var src = screen.width >= 480 ? $this.data('large') : $this.data('small');
    $('<img src="' + src + '" alt="' + $(this).data('alt') + '" />').insertAfter($this);
});

3. Ansatz - adaptive-images.com Script[Bearbeiten]

Funktionsweise[Bearbeiten]

  • Über Cookie beim 1. Aufruf max Bildschirmgröße (also nicht der Viewport sondern real mögliche Pixel) abrufen und speichern.
  • Alle Bildanfragen werden über htaccess an ein PHP-Skript geschickt
  • PHP Skript entscheidet anhand Cookie welche Größe benötigt wird. Das Bild wird über GDlib erzeugt und im Ordner ai-cache/Bildgröße gespeichert
  • Bei weiteren Aufrufen wird das Bild direkt aus dem Cache geholt.

Cookie[Bearbeiten]

<script>
document.cookie='resolution='+Math.max(screen.width,screen.height)+';
path=/';
</script>

Bzw. für TYPO3 TS 

#TypoScript setup
page.headTag (
<head>
<script>
document.cookie='resolution='+Math.max(screen.width,screen.height)+';
path=/';
</script>
)

adaptive-images.php Skript[Bearbeiten]

Breakpoints anpassen 

$resolutions = array(1382, 992, 768, 480, 320);

htaccess[Bearbeiten]

Hier die Anpassung für TYPO3, das Original findet man auf adaptive-images.com 

<IfModule mod_rewrite.c>
# Enable URL rewriting
RewriteEngine On
Options +FollowSymlinks
# Adaptive Images
# don't apply the AI behaviour to images inside AI's cache folder:
RewriteCond %{REQUEST_URI} !ai-cache
# further directories that shouldn't use AI
RewriteCond %{REQUEST_URI} !fileadmin/images
# Send any GIF, JPG, or PNG request that IS NOT stored inside
# one of the above directories
RewriteRule ^.*\.(jpg|jpeg|png|gif)$ adaptive-images.php [L]

. . .

</IfModule>

4. Ansatz[Bearbeiten]

<picture> HTML 5 Element soll alles besser machen ;-)

Abgerufen von „https://wiki.stephanschlegel.de/index.php?title=Responsive_Webdesign&oldid=24946“