#1

Merlin2504

Vielfrager  (1075 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden

Ich will nun mal auch meine Webseite in Ordnung bringen und überlege immer noch welches Responsive Design ich nun kaufe?

Sind das alle derzeit verfügbaren responsive Designs ?

  1. Bootstrap 3 von Thomas
  2. Kick Horizontal von Jürgen
  3. Aurora Responsive von Conny
  4. Beta Responsive von Conny
  5. Mesa  von Conny  NEU

 Stellt doch bitte eure Projekt hier vor. Ich benötige ein Design für meinen Webshop und dann auch für die Fotografenseite.


Gruß Klaus

PS: Wer mit mir Kontakt aufnehmen möchte, kann mich jederzeit per Mail anschreiben.


Dieser Beitrag wurde bereits 5 mal bearbeitet, zuletzt von »Merlin2504« (28.09.2015, 20:59)
#2
Avatar

Unbekannt

Gelöscht

"Responsives Webdesign"


Der Trick ist relativ simpel: Mit etwas CSS3 fragt man nach der Breite des Bildschirms (bzw. des Fensters) und überschreibt vorher gemachte Angaben, wenn dies nötig ist.

In etwa so überarbeitet man sein Design:

.wrapper {
width:70%; /*hier eine %-Angabe !!!*/
max-width:960px; /*hier eine Pixel-Angabe*/
}

@media screen and (max-width: 480px) {
.wrapper {width:100%;} /*volle Breite auf kleinen Schirmen*/
}

body {font-size: 100%:} /* 16px */
h1 {font-size: 2.25 em;} /* 36px, 36/16=2.25 */
h2 {font-size: 1.5 em;} /* 24px, 24/16=1.5 */
h3 {font-size: 1.3125 em;} /* 18px, 18/16=1.3125 */
p {font-size: 1 em;} /* 16px */

<style>
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,cite,code,del,dfn,em,img,q,s,samp,small,strike,strong,sub,sup,tt,var,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,button,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-weight:normal;font-style:normal;font-size:100%;line-height:1;font-family:inherit;}
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block;}
audio[controls],canvas,video{display:inline-block;*display:inline;*zoom:1;}

html{overflow-y:scroll;background:#fff;font-size:62.5%;}
body { padding : 22px; font-size:16px;font-size:1.6rem;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:#282828;background-color:transparent; }
h2 { margin-bottom : .75em; font-weight : bold; font-size : 36px; }
div { margin-bottom : 1.5em; padding-bottom : 1.5em; border-bottom : 1px solid #ccc;
}
p { margin-bottom : 22px; line-height : 1.5; }
h3 { margin-bottom : 22px; font-weight : bold; }
p.caption { display : inline-block; padding : 6px; font-size : 12px; text-transform : uppercase; background-color : #ccc; }
</style>

 

-----------------------------------------------------------------------


<style type="text/css">
#container {
margin: 0 auto;
width: 100%;
}

header {
width: 100%;
height: 100px;
margin: 0 0 20px 0;
float: left;
background: #666;
}

#content {
width: 75%;
height: 500px;
margin: 0 2% 0 0;
float: left;
background: #CCC;
}

#sidebar {
width: 23%;
height: 500px;
float: left;
background: #666;
}
</style>


----------------------------------------------------------------------

 

Dieses Spiel mit Prozentangaben und (wenn nötig) max-width zieht man auf der gesamten website komplett durch.

Auf ältere Browser muss man dabei nicht allzuviel Rücksicht genommen werden: Für diese gilt stets die Desktop-Version, weil man sinnvollerweise die Ausnahmen für Handys macht - und nicht umgekehrt.
Eine besondere Stellung nehmen Bilder ein:

style="float:left; width:25%; margin-right: 1%;"
bewirkt, dass das Bild auf einem Handy viel kleiner als auf dem Desktop ist - eben 25% der Spaltenbreite.
Auf eine Höhenangabe kann man dabei verzichten, sonst wird das Bild eh verzerrt.

Es gibt Ansätze, die Auflösung der Bilder schon beim Ausliefern vom Server anzupassen. Das ist ein komplexes Thema und nicht unbedingt vernünftig.
Durch das Umrechnen der Bilder verlängert sich die Antwortzeit und Serverlast deutlich. Die Bilder müssen neu komprimiert werden, was die Dateigröße aber nicht immer kleiner macht, trotzdem aber die Qualität stark verringert.
Und nicht zuletzt haben Smartphones eine hohe Pixeldichte und die Möglichkeit zu Zoomen. Etwas Overhead ist daher nicht so schlecht.
Die Ladezeit? Mobile Geräte haben nicht unbedingt eine langsame, aber eine instabile Leitung. Die Dateigröße selbst spielt nicht _so sehr_ eine Rolle.
Wie sag ichs dem Handy?

Smartphones gehen zunächst davon aus, dass eine Website für den Desktop gemacht wurde und tun daher so, als ob sie eine Auflösung von 980 Pixel Breite hätten.
Um das zu ändern, müssen Meta-Tags gesetzt werden:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />

Das sagt dem Smartphone, dass es die Breite so annehmen soll, wie es am besten zum kleinen Bildschirm passt (Das kann 320 Pixel sein, aber auch größer)

Hilfreich beim Umrechnen ist folgendes Tool unter: http://pxtoem.com/

#3

Merlin2504

Vielfrager  (1075 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden

Hallo Alois,

danke für den Tipp.

Das ist aber nicht die Antwort, die ich suche. Ich möchte mir hier ein ein neues Design kaufen und habe die Wahl der Qual.

Daher möchte ich mir vorher paar Seiten anschauen und dann entscheiden. smile_winking_16.png


Gruß Klaus

PS: Wer mit mir Kontakt aufnehmen möchte, kann mich jederzeit per Mail anschreiben.


Dieser Beitrag wurde bereits 1 mal bearbeitet, zuletzt von »Merlin2504« (04.03.2015, 14:57)
#4

harlekin8

Experte  (308 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden
 http://jrr.harlekin8.de

#5

harlekin8

Experte  (308 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden
 http://jrr.harlekin8.de

@Alois Preis

"Der Trick ist relativ simpel:" 

... so schlicht ist es nun auch wieder nicht. Zum einen sollten perspektivisch gesehen die Designs für die Zukunft gerüstet sein. Heißt die Designs auch - soweit es geht - auf HTML5 zu trimmen, dann müßen Polyfills und Scripte noch eingebaut werden. EIN weiterer wichtiger Faktor ist die Performance für die diversen Endgeräte zu optimieren ... usw usf 

Bye,

Ingo


Dieser Beitrag wurde bereits 1 mal bearbeitet, zuletzt von »harlekin8« (04.03.2015, 14:46)
#6

Merlin2504

Vielfrager  (1075 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden

Zitat von: harlekin8

... dann gäbe es neuerdings auch von conny:

mesa

Bye,

Ingo

Habe es oben ergänzt. smile_winking_16.png Aber trotzdem getraut sich bisher niemand seine Seiten zu zeigen.smile_waiting_16.png

 

@Alois Preis "Der Trick ist relativ simpel:"  - Hmmm.... kann ich nicht nachvollziehen.


Gruß Klaus

PS: Wer mit mir Kontakt aufnehmen möchte, kann mich jederzeit per Mail anschreiben.


Dieser Beitrag wurde bereits 2 mal bearbeitet, zuletzt von »Merlin2504« (04.03.2015, 16:19)
#7

Lega14776

Forum-Sponsor  (119 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden
 http://www.sozialtrainer.de

#8

Sven aus Berlin

Forum-Sponsor  (435 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden

Also es gibt doch genügend Beispiele. Connys Designs kannst du doch bei ihr als Demo anschauen.
Aber für dich:
1. Ludo Responsive: http://designs.it-passform.de/ludo_res/
2. Aurora Responsive: http://www.designs.it-passform.de/aurora/
3. Beta Responsive left: http://www.designs.it-passform.de/beta_left_res/
3.a Beta Responsive right: http://www.designs.it-passform.de/beta_right_res/
4. Eigenentwicklung von Conny: Mesa: http://designs.it-passform.de/mesa/

Dann das Bootstrapdesign von Thomas, Beispiel Ameland-tipps.de :

http://www.ameland-tips.de/

Dann haben wir ja noch den Jürgen .... aber jetzt machst du dich mal selber auf die Suche!


Spontaneität muss sorgfältig geplant werden.

#9

Sven aus Berlin

Forum-Sponsor  (435 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden

Nachtrag!

Conny ich hoffe ich durfte das? Wenn nicht einfach mein Beitrag #8 löschen!


Spontaneität muss sorgfältig geplant werden.


Dieser Beitrag wurde bereits 1 mal bearbeitet, zuletzt von »Sven aus Berlin« (04.03.2015, 16:17)
#10

W2D Fan

Co-Admin  (3013 Punkte)  ·   weiblich  ·   Niederlande  ·    Nachricht senden
 http://www.w2dfan.nl

Volker hat HIER schon mal eine Auflistung gegeben, die Klaus auch ueber die Suche selbst haette finden koennen. Mit Hilfe der Links kann Klaus sich schon die Beispielseiten ansehen.


Gruß,
Marjorie

Hilfe ist nicht selbstverständlich, deshalb halte ich ein "Dankeschön" nachdem jemandem geholfen wurde für überaus angebracht und höflich.

Viele hier im Forum veröffentlichte Scripts sind das geistige Eigentum der Ersteller und unterliegen somit das Copyright! Wenn ihr diese Scripts in eure persönliche Seite(n) oder auf Seiten für eure Kunden anwendet, ist ein Quellverweis auf den Beitrag mit dem Script nichts anderes als selbstverständlich.

#11

Merlin2504

Vielfrager  (1075 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden

Irgendwie habe ich den Eindruck das ich nicht verstanden werde. Ich weiss das es die Beispielseiten gibt.

Aber ich wollte einfach mal ein Thema aufmachen. Zeigt eure reponsiven Seiten.

Wahrscheinlich arbeiten aber schon zuviele mit der Pro Version und können deshalb ihr Projekt im normalen Siquando nicht zeigen.


Gruß Klaus

PS: Wer mit mir Kontakt aufnehmen möchte, kann mich jederzeit per Mail anschreiben.

#12

Volker W.

Administrator  (6655 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden
 https://www.warmers.de  ·   vwarmers  ·   vwarmers  ·   VolkerWarmers  ·   volkerw68

Du hast aufgerufen, daß User ihre responsiven Seiten vorstellen, damit DU eine Grundlage zur Aquise eines für Dich geeigneten Designs hast. Dein Beitrag #1 klingt diesbezüglich schon etwas komisch...

Zumal es sich hierbei eher um eine moderative bzw. administrative Angelegenheit handelt, die Mitglieder zu irgendetwas aufzurufen. Dann aber auch im Interesse aller Mitglieder.


<Off-Topic>

In Sachen Pro Web wird es von Thomas ebenfalls bald ein responsives Design geben. Die aktuelle Beta setze ich auf meiner privaten Präsenz (s.u.) bereits ein.

Mit dem Konverter hättest Du Deine Classic-Präsenzen übrigens schnell in native Pro Web Projekte transferiert. Aber das nur am Rande. ;-)

</Off-Topic>


Viele Grüße,
Volker

Volker W. Musik & Sounds  ·  Facebook  ·  Google+  ·  Twitter  ·  Instagram  ·  StayFriends  ·  LinkedIn  ·  XING

Hilfe-Anfragen per PN, E-Mail usw. werden ab sofort nicht mehr beantwortet. Genau dafür ist dieses Forum da. Vielen Dank!

#13

Merlin2504

Vielfrager  (1075 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden

Hallo Volker,

kannst das  Thema  schliessen. 

geändert: 05.03.2015 - Grund: unpassender Kommentar smile_16.png


Gruß Klaus

PS: Wer mit mir Kontakt aufnehmen möchte, kann mich jederzeit per Mail anschreiben.


Dieser Beitrag wurde bereits 3 mal bearbeitet, zuletzt von »Merlin2504« (05.03.2015, 10:36)
#14

krokusknospe

Forum-Sponsorin  (417 Punkte)  ·   weiblich  ·   Deutschland  ·    Nachricht senden
 https://www.bettina-bizzarro.de

Nun ja, so ganz daneben fand ich die Anfrage von Klaus nun nicht. Es gibt m. E. schon einen Unterschied zwischen den Demos der bekannten Anbieter und dann, wie sie "live und in Farbe" eingesetzt werden. Da gibt es m. W. nur wenige (bereits genannte) Beispiele:

- die Schulseite aus Beitrag #7 (mesa von Conny)

- die Inselseite aus Beitrag #8 (Bootstrap von Thomas)

- das Postkartenparadies von Jürgen, wobei ich im Moment nicht weiß, ob die Seite responsiv unter seinem Kick-Design läuft. Habe die Seite gerade nur auf dem Desktop aufgerufen.

Ich selbst habe mir das Bootstrap von Thomas zugelegt (und warte noch auf ReedyCreek responsiv von Conny...), aber ich habe aus zeitlichen Gründen noch nichts damit machen können. Ich bin jedoch auch immer an Live-Seiten interessiert.

@ Klaus: Tikal halte ich nicht für die passende Adresse, wenn Du bei Siq Shop bleiben möchtest.

 


Noch einen schönen Tag wünscht Euch

Bettina

#15

Merlin2504

Vielfrager  (1075 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden

Danke Bettina,

ich habe schon gedacht keiner versteht mich.smile_16.png

Habe mir auch gerade das Bootstrap von Thomas zugelegt, da ich bisher hier im Forum den meistens Zuspruch erlebe. Ich hoffe ich habe die richtige Entscheidung getroffen, da ich schon öfters Designs gekauft habe, wo ich dann später keine Unterestützung mehr erhalten habe.

Freilich sind meine Anfragen hier oft laienhaft und nicht präzise ausgedrückt. Aber dafür habe ich mir ja auch Shoptodate /Siquando gekauft um mit meinen Kenntnissen eine Webseite/Shop aufzubauen. Und das ich nicht alles falsch gemacht habe, beweist mir der Zuspruch auf unserer Vereinsseite.

Nur jetzt will ich mal die Seiten in Ordnung bringe, wo ich ein weng Geld verdienen könnte.smile_16.png

@Bettina: Tikal nehme ich wieder raus. War gestern nicht gut daruf. Außerdem nervt mich seine aggresive Vorgehensweise.


Gruß Klaus

PS: Wer mit mir Kontakt aufnehmen möchte, kann mich jederzeit per Mail anschreiben.


Dieser Beitrag wurde bereits 1 mal bearbeitet, zuletzt von »Merlin2504« (28.09.2015, 21:07)
#16

krokusknospe

Forum-Sponsorin  (417 Punkte)  ·   weiblich  ·   Deutschland  ·    Nachricht senden
 https://www.bettina-bizzarro.de

@ Klaus: Das Leben ist nicht ohne Risiko... Theoretisch kannst Du bei jedem Anbieter "auf die Schnauze fallen", wenn dieser seinen Geschäftsbetrieb einstellt oder seine Schwerpunkte anderweitig setzt. Dabei ist es egal, ob es sich um Einzelkämpfer wie tikal oder die fleißigen gewerblichen Helfer hier aus dem Forum handelt, oder auch um Siquando selbst.

Es gibt für s2d / Siq nun mal keine große Community und auch keine Vielzahl von Anbietern für Templates oder andere Dienstleistungen wie bei den gängigen Shoplösungen wie JTL, Shopware, XT:commerce samt Ablegern, Gambio, Magento etc. pp.

Allerdings ist s2d/Siq für uns eher Unbedarfte (mich ausdrücklich eingeschlossen) ideal geeignet und sollte es zum Schlimmsten kommen, läßt sich der Shop mit den Bordmitteln zumindest rudimentär für eine Zeitlang weiter betreiben. 

Ich bin gespannt, was Du aus Bootstrap machen wirst. Bei mir dauert es noch bis zur Umsetzung. 


Noch einen schönen Tag wünscht Euch

Bettina

#17

Merlin2504

Vielfrager  (1075 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden

Ich werde mich melden, wenn es spruchreif wird.


Gruß Klaus

PS: Wer mit mir Kontakt aufnehmen möchte, kann mich jederzeit per Mail anschreiben.

#18

GrafFoto

Ehrenmitglied  (219 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden
 http://www.postkartenparadies.de

Hallo allerseits.

weil Bettina gefragt hat ... ich arbeite gerade an einer responsive Variante ... und ich habe auch gerade eine Version meines Kick-Templates fertig, die mit vertikaler Navi arbeitet (das ist ja für Shops vielleicht interessant) ... da muss ich nur noch die Anleitung machen, dann geht es online. Testshop ist schon im Netz: http://www.kick-vertical.siquando-templates.de/

Und @ Alois ... ich würde dir da auch widersprechen. Die Details sind ja für responsive wichtig. Also vor allem funktioniert die Navi auf jedem Endgerät und jedem Browser vernünftig (da habe ich schon ne Menge sogenannte responsive Seiten gesehen, die Schrott sind).

Auch wie sich z.B. die Aufmacher verhalten ist im Shop vielleicht ganz interessant - ein 6-spaltiger Aufmacher, der auf dem Handy einfach nur winzig wird sieht auch nicht so gut aus .. usw usw

 

 

 

 

 

 

 

 

#19

inselpirat

Routinier  (439 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden
 https://www.ameland-tips.de

Zitat von: Merlin2504

Ich werde mich melden, wenn es spruchreif wird.

Moin Klaus,

also unsere Seite wurde bereits hier genannt, erstellt mit dem Bootstrap von Thomas.

Wie du ja schreibst, hast du es erworben - dann wirst du schnell herausfinden wie umfangreich die Einstellmöglichkeiten sind. Ich bin nach wie vor absolut begeistert von dem Design.

Ein weiteres Projekt wurde mit dem Aurora_mod von Conny erstellt.

Und dieses Projekt  wurde mit einem leicht veränderte, Bootstrap erstellt.

Solltest du in meinem Projekten Dinge sehen die Du bei dir nicht findest, ich habe zusätzliche Eigenschaften einbauen lassen.

U.a. fehlte mit ein für mich brauchbarer Tooltip, jetzt habe ich diesen . H i e r kannst du ihn anschauen, Ausstattung aufrufen und über die Icons fahren.

Falls du Fragen hast - PN an mich.

VG

#20

Merlin2504

Vielfrager  (1075 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden

Danke für den Hinweis.Ich glaube, ich werde einiges von deiner Struktur klauen. smile_winking_16.png Wirklich ein schöne übersichtliche Seite.

Ich melde mich hier, wenn ich nicht weiterkomme.


Gruß Klaus

PS: Wer mit mir Kontakt aufnehmen möchte, kann mich jederzeit per Mail anschreiben.

#21

inselpirat

Routinier  (439 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden
 https://www.ameland-tips.de

Klaus,

ich habe hier eine Gruppe älterer Herrschaften an der Hand ( Volkshochschule Computerkurs Senioren helfen Senioren) und wenn ich etwas ändere bitte ich die Leute immer das mal zu testen.

Mein Fazit: Kommen die älteren Herrschaften damit klar, sollte auch jeder andere Besucher sich zu recht finden.

Ich hoffe so immer eine übersichtliche klar strukturierte Seite zu bekommen.

Frage ruhig - wenn ich helfen kann.....

VG

#22

inselpirat

Routinier  (439 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden
 https://www.ameland-tips.de

#23

inselpirat

Routinier  (439 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden
 https://www.ameland-tips.de

#24

Volker W.

Administrator  (6655 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden
 https://www.warmers.de  ·   vwarmers  ·   vwarmers  ·   VolkerWarmers  ·   volkerw68

Und womöglich war auch ich gestern nicht so gut drauf... I) OK, Schwamm drüber.

 

Zitat von: krokusknospe

Es gibt für s2d / Siq nun mal keine große Community

Ähem...!?! Was sind denn wir und das Partner-Forum? ;-)


Viele Grüße,
Volker

Volker W. Musik & Sounds  ·  Facebook  ·  Google+  ·  Twitter  ·  Instagram  ·  StayFriends  ·  LinkedIn  ·  XING

Hilfe-Anfragen per PN, E-Mail usw. werden ab sofort nicht mehr beantwortet. Genau dafür ist dieses Forum da. Vielen Dank!

#25

Lega14776

Forum-Sponsor  (119 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden
 http://www.sozialtrainer.de

#26

Lega14776

Forum-Sponsor  (119 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden
 http://www.sozialtrainer.de

#27

cojo_1008

Moderatorin  (452 Punkte)  ·   weiblich  ·   Deutschland  ·    Nachricht senden
 https://www.it-passform.de

Zitat von: inselpirat

Frage an die Fachleute hier, wären Design wie PelicanBay oder/und Ultra nicht geeignet für einen Umbau?

VG

Hm, Ultra würde ich sofort bejahen - mit PelicanBay habe ich mich überhaupt noch nicht beschäftigt: dieses  Design ist total an mir vorbei gegangen :D

#28

inselpirat

Routinier  (439 Punkte)  ·   männlich  ·   Deutschland  ·    Nachricht senden
 https://www.ameland-tips.de

2398 Aufrufe | 28 Beiträge