Responsive Webdesign - Tipps

[dobra]

Hallo,

für dieses relativ neue Thema gibts noch kein eigenes Board
Ich schreibs mal hier und der Admin kanns ja event. mal in ein "Bootstrap" Board verschieben ...

DIVs je nach Displayauflösung ein/ausblenden:

• hidden-sm hidden-md = visible-lg
• hidden-sm hidden-lg = visible-md
• hidden-md hidden-lg = visible-sm
• hidden-md hidden-lg hidden-sm = visible-xs

Beispiel:

Code: [Auswählen]

<footer id="footer"  class="hidden-xs col-sm-12">
...
</footer>

oder kann auch so geschrieben werden

<div class="footer_mobile hidden-md hidden-lg hidden-sm = visible-xs">
...
</div>Bei kleinen Displays wird nur "footer_mobile" angezeigt, bie großen "footer"

.visible-xs   Extra small (less than 768px) visible
.visible-sm   Small (up to 768 px) visible
.visible-md   Medium (768 px to 991 px) visible
.visible-lg   Larger (992 px and above) visible
.hidden-xs   Extra small (less than 768px) hidden
.hidden-sm   Small (up to 768 px) hidden
.hidden-md   Medium (768 px to 991 px) hidden
.hidden-lg   Larger (992 px and above) hidden

   Das kleinste Teil - xs - ist kleiner 768px
   Braucht man kleinere Einheiten z.B. um Smartphon Hochformat (320x480) <> Querformat (480x320) zu unterscheiden, kann man das so machen:
   

Code: [Auswählen]

@media screen and (max-width: 480px) {
    .hiddentest {display:none;}
}


Linkback: https://www.shoppilot.net/pf/index.php?topic=1717.0

[dobra]

noch ein Tipp

zum testen der unterschiedlichen Displays stellt Firefox ein nützliches Add-on zur Verfügung -> Web Developer
Falls noch nicht installiert - gibts hier
(das Tool kann aber noch viiiiiiiel mehr als nur das !!!)

mit "Größe ändern" -> "angepasste Layouts anzeigen" werden die gängigsten mobile-Formate angezeigt - keine Screenshots sondern voll funktionsfähige Browserfenster.
Mobiles Hochformat (320x480), Mobiles Querformat (480x320), Hochformat für kleine Tablets (600x800), Querformat für kleine Tablets (800x600), Tablethochformat (768x1024) und Tabletquerformat (1024x768)

Beispiel:

[dobra]

Tipp 3

Formulare - Darstellung der Inputfelder
Sobald <label> und <input> umbrochen wird, soll nur noch das Inputfeld mit placeholder dargestellt werden.



Lösung:
HTML:

Code: [Auswählen]

<label for="vname" class="col-sm-2">Vorname: </label>
<div class="col-sm-10">
<input name="vname" class="form-control" ... required="required">
</div>
css:

Code: [Auswählen]

@media screen and (max-width: 799px) {
form.<formularname> label {display:none;}
}
@media screen and (min-width: 800px) {
.form-control::-webkit-input-placeholder { color: white; }
.form-control:-moz-placeholder { color: white; }
.form-control::-moz-placeholder { color: white; }
.form-control:-ms-input-placeholder { color: white; }
}

[dobra]

Tipp 3

Formulare - Darstellung der Inputfelder
Sobald <label> und <input> umbrochen wird, soll nur noch das Inputfeld mit placeholder dargestellt werden.



Lösung:
HTML:

Code: [Auswählen]

<form class="test"...>
<label for="vname" class="col-sm-2">Vorname: </label>
<div class="col-sm-10">
<input name="vname" class="form-control" ... required="required">
</div>
css:

Code: [Auswählen]

@media screen and (max-width: 799px) {
form.test label {display:none;}
}
@media screen and (min-width: 800px) {
form.test .form-control::-webkit-input-placeholder { color: white; }
form.test .form-control:-moz-placeholder { color: white; }
form.test .form-control::-moz-placeholder { color: white; }
form.test .form-control:-ms-input-placeholder { color: white; }
}

[dobra]

Die on board "Standardmeldungen" (alert) mit Texten aus der Sprachdatei werden ja in jsfunct.js definiert.
Hier kann man zwar Änderungen vornehmen, aber beim nächsten Shop veröffentlichen (egal ob lokal oder online) werden die sofort wieder überschrieben.

Lösung:
Man kopiert die Datei und speichert sie unter z.B. myjsfunct.js
Diese Datei muss dann manuell eingebunden und bei "Dateien hinzufügen" eingetragen werden.

Jetzt kann man beliebige Änderungen machen nachdem diese neue js-Datei ja NACH dem automatisch eingebundenen
<script type="text/javascript" src="../jsfunct.js"></script>
aufgerufen wird und somit relevant ist.

Beispiel:
Alert Meldung bei inwk bei nicht ausgewählter Listbox (hier im FF - jeder Browser stell die alert-Boxen ja anders dar)



Änderung:
in myjsfunct,js

Code: [Auswählen]

if (li1) {
li1i = eval('document.A' + xarticle + '1.liste1.selectedIndex');
if (!li1i && 1) {alert (lang124); return;}
if (0) {--li1i;}
}
li2 = eval('document.A' + xarticle + '2');
if (li2) {
li2i = eval('document.A' + xarticle + '2.liste2.selectedIndex');
if (!li2i && 1) {alert (lang124); return;}
if (0) {--li2i;}
}
mit

Code: [Auswählen]

if (li1) {
li1i = eval('document.A' + xarticle + '1.liste1.selectedIndex');
if (!li1i && 1) {bootbox.alert ({title: "Meldung", message: "Wählen Sie bitte eine Farbe aus"}).find("div.modal-dialog").addClass("bootbox-width"); return;}
if (0) {--li1i;}
}
li2 = eval('document.A' + xarticle + '2');
if (li2) {
li2i = eval('document.A' + xarticle + '2.liste2.selectedIndex');
if (!li2i && 1) {bootbox.alert ({title: "Meldung", message: "Wählen Sie bitte eine Größe aus"}).find("div.modal-dialog").addClass("bootbox-width"); return;}
if (0) {--li2i;}
}
ersetzen.

css:

Code: [Auswählen]

.bootbox-width {
   margin: 0 auto;
   max-width: 300px !important;
   margin-top: 10% !important;
}
.modal-header {
height: 50px;
}

.modal-body {
padding: 15px 0 10px 65px;
background-image: url("../images/other/achtung.jpg");
  background-repeat: no-repeat;
    background-position:15px 10px;
}
.modal-footer {
padding: 0 20px 10px 20px;
background: #F2F2F2;
border-top: 1px solid #BDBDBD;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
.modal-footer .btn{
margin-top: 10px;
padding: 2px 25px;
}
Ergebnis: (wird in allen Browsern gleich dargestellt)


Das sind nur Beispiele - Texte und css-Formatierung kann natürlich beliebig angepasst werden !

[dobra]

Die Zoom-Funktion die ja am PC sehr nützlich ist wenn man dem Kunden Details eines Artikels zeigen will, ist am Handy manchmal störend weil man dann u.U. nicht mehr scrollen kann.

Eine Möglichkeit de Zommfunktion für kleine Displays auszuschalten:
(am Beispiel elevatezoom - für andere Anwendungen entsprechend anpassen)

in jquery.elevatezoom.js dem kompletten Scriptblock eine Bedingung verpassen:

(function( $, window, document, undefined ) {
 if ($(window).width() >= 600) {   
   var ElevateZoom = {
       ....
       ....   
   };
}   

})( jQuery, window, document );