• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Webseite für Smartphones optimieren

A

Anonymos

Neues Mitglied
Hallo zusammen,

Ich würde gerne meine Seite www.niklasnaturblog.de für Smartphones optimieren. Zurzeit kann man nämlich nicht wirklich etwas erkennen. Darum wäre es nett, wenn einer von euch mir Schritt für Schritt erklären könnte, wie ich vorgehen soll. Ich habe schon media queries und viewport ausprobiert, aber letztendlich hat es nicht wirklich funktioniert.

Danke im Voraus für Antworten :)
 
Erstmal würde ich prüfen ob man am Smartphone ist oder nicht. Ich mach das mit php.
PHP: 
function check_user_agent ( $type = NULL )
{
  $user_agent = strtolower ( $_SERVER['HTTP_USER_AGENT'] );
  if ( $type == 'bot' )
  {
    // matches popular bots
    if ( preg_match ( "/googlebot|adsbot|yahooseeker|yahoobot|msnbot|watchmouse|pingdom\.com|feedfetcher-google/", $user_agent ) )
    {
      return true;
      // watchmouse|pingdom\.com are "uptime services"
    }
  }
  else if ( $type == 'mobile' )
  {
    // matches popular mobile devices that have small screens and/or touch inputs
    // mobile devices have regional trends; some of these will have varying popularity in Europe, Asia, and America
    // detailed demographics are unknown, and South America, the Pacific Islands, and Africa
    // trends might not be represented, here
    if ( preg_match ( "/phone|iphone|itouch|ipod|symbian|android|htc_|htc-|palmos|blackberry|opera mini|iemobile|windows ce|nokia|fennec|hiptop|kindle|mot |mot-|webo\
s\/|samsung|sonyericsson|^sie-|nintendo/", $user_agent ) )
    {
      // these are the most common
      return true;
    }
    else if ( preg_match ( "/mobile|pda;|avantgo|eudoraweb|minimo|netfront|brew|teleca|lg;|lge |wap;| wap /", $user_agent ) )    {
      // these are less common, and might not be worth checking
      return true;
    }
  }
  else if ( $type == 'browser' )
  {
          // matches core browser types
    if ( preg_match ( "/mozilla\/|opera\//", $user_agent ) )
    {
      return true;
    }
  }

  return false;
}

und dann...

PHP: 
if( check_user_agent( 'mobile' ) )
{
  $smart=true;
  $breite="100%";
  $links="0%";
  $schriftgröße="25px";
}
else
{
  $smart=false;
  $breite="50%";
  $links="25%";
  $schriftgröße="16px";
}

Die Variablen bindet man in den HTML Code dann ein und schon wird in diesem Beispiel die Schrift größer gemacht, die Breite des Blogs auf 100% gesetzt. Sitzt man am Computer, wird die Schrift normal groß gemacht, die Breite des Blogs auf 50% gesetzt und zentriert. Die Definierung der Variable $smart ist dafür da, dass du wenn du wo anders im Programm wieder wissen musst ob man am Smartphone ist einfach
PHP: 
if($smart)
{
...
}
schreiben kannst.

Viele Grüße drumer
 
Ja media queries würden hier natürlich helfen, aber das ist ja viel zu umständlich. Der Grund für deine Probleme sind feste Größen, also Pixelangaben.

Nimm doch mal bei deinem #Banner Bild den festen Pixelwert von 500px raus.
Schon hast du es für alle Bildschirmgrößen optimiert.
Du hast aber auch andere feste Pixelwerte (z.B. #Beitrag) wo du eine feste Pixelgröße von 820px angegeben hast.
Um sowas zu optimieren, ist es Sinnvoll mal einfach eine Liste von CSS-Befehlen anzuschauen. Dann würdest du sowas wie "max-width" finden.
Bsp.:

HTML: 
#Beitrag {
    width: 820px
   //Lass das Height weg!!!
   max-width: 90vw;
}

Die Kunst im CSS ist es, die Seite OHNE oder nur SEHR WENIG media queries zu gestalten.

Dazu benutzt du Tags, die in HTML5 gar nichts unterstützt werden (Bsp.: <center>).
Das zentrieren von Elementen kann man heute ganz einfach mit CSS, bzw. Flexboxen machen.
https://www.w3schools.com/css/css3_flexbox.asp
Hier eine kurze Einführung in das Thema.

Es scheint dir auch nicht klar zu sein, dass man z.B. margins auch für einzelne Seiten eines Elements verwenden kann (Bsp.: margin-top, margin-bottom, margin-left, etc.)
Es fehlen also Grundlagen von CSS, bzw. HTML. Das ist nicht weiter schlimm und jeder lernt dazu.

Fazit:
Guck dir auf JEDEN Fall das Flexboxen-Tutorial an, es wird dir das Leben 1000 Mal leichter machen.
Schau dir doch mal eine Liste von CSS3 Attributen an und gucke, was du machen

Ich sehe außerdem gerade, dass @drumer einen Lösungsvorschlag gepostet hat, welchen ich aber mit diesem Beitrag entkräftigen will.

@m.scatello ich weiß ja nicht, aber du kommst immer so unfreundlich rüber.
Schreib doch statt:
m.scatello schrieb:
Auweia @drumer
Schon mal was von Media Queries gehört? Solltest du dir unbedingt ansehen!
Zum Vergrößern anklicken....
Lieber:
So würde ich das nicht machen, weil...
und dann schreibst du auch auf warum!


Edit:
Wichtig!!!
Du hast vergessen den DOCTYPE zu deklarieren!
https://www.w3schools.com/tags/tag_doctype.asp
 
Zuletzt bearbeitet:
Ja @drumer, dennoch ist dein Lösungsansatz nicht Sinnvoll.
Warum denn der ganze PHP/Javascript-Kram? Damit optimierst du die Seite für ALLE-Geräte aber nur sehr, sehr umständlich und unnötig kompliziert. Eine pure CSS-Variante ist in aller Regel sinnvoller.

Aber das hier ist jetzt auch kein Thema, wir wollen schließlich @Niklas Ahrnke helfen.
 
drumer schrieb:
Erstmal würde ich prüfen ob man am Smartphone ist oder nicht. Ich mach das mit php.
PHP: 
function check_user_agent ( $type = NULL )
{
  $user_agent = strtolower ( $_SERVER['HTTP_USER_AGENT'] );
  if ( $type == 'bot' )
  {
    // matches popular bots
    if ( preg_match ( "/googlebot|adsbot|yahooseeker|yahoobot|msnbot|watchmouse|pingdom\.com|feedfetcher-google/", $user_agent ) )
    {
      return true;
      // watchmouse|pingdom\.com are "uptime services"
    }
  }
  else if ( $type == 'mobile' )
  {
    // matches popular mobile devices that have small screens and/or touch inputs
    // mobile devices have regional trends; some of these will have varying popularity in Europe, Asia, and America
    // detailed demographics are unknown, and South America, the Pacific Islands, and Africa
    // trends might not be represented, here
    if ( preg_match ( "/phone|iphone|itouch|ipod|symbian|android|htc_|htc-|palmos|blackberry|opera mini|iemobile|windows ce|nokia|fennec|hiptop|kindle|mot |mot-|webo\
s\/|samsung|sonyericsson|^sie-|nintendo/", $user_agent ) )
    {
      // these are the most common
      return true;
    }
    else if ( preg_match ( "/mobile|pda;|avantgo|eudoraweb|minimo|netfront|brew|teleca|lg;|lge |wap;| wap /", $user_agent ) )    {
      // these are less common, and might not be worth checking
      return true;
    }
  }
  else if ( $type == 'browser' )
  {
          // matches core browser types
    if ( preg_match ( "/mozilla\/|opera\//", $user_agent ) )
    {
      return true;
    }
  }

  return false;
}

und dann...

PHP: 
if( check_user_agent( 'mobile' ) )
{
  $smart=true;
  $breite="100%";
  $links="0%";
  $schriftgröße="25px";
}
else
{
  $smart=false;
  $breite="50%";
  $links="25%";
  $schriftgröße="16px";
}

Die Variablen bindet man in den HTML Code dann ein und schon wird in diesem Beispiel die Schrift größer gemacht, die Breite des Blogs auf 100% gesetzt. Sitzt man am Computer, wird die Schrift normal groß gemacht, die Breite des Blogs auf 50% gesetzt und zentriert. Die Definierung der Variable $smart ist dafür da, dass du wenn du wo anders im Programm wieder wissen musst ob man am Smartphone ist einfach
PHP: 
if($smart)
{
...
}
schreiben kannst.

Viele Grüße drumer
Zum Vergrößern anklicken....


Die ersten beiden PHP-Scripts, kann ich also einfach in meinen <head> einbauen...Wie soll ich jetzt genau die Variablen einbinden? ich kann ja nicht z.B. <div id="#" width="$breite"> machen?

Viele Grüße Niklas
 
Nein @Niklas Ahrnke so funktioniert es leider nicht.
Ich erkläre dir kurz wie man PHP einbindet, aber empfehle es dir unter KEINEN Umständen.
Um PHP einzubauen, muss deine Datei erstmal die Dateiendung .html entfernt bekommen und in .php umgewandelt werden. Dann funktioniert das auch mit dem PHP, welches überall eingebaut werden kann, solange es so im Code steht:

PHP: 
<?php
//Hier der Code
?>
<html>
...
</html>

oder so:
PHP: 
<html>
<?php
//Hier der Code
?>
...
</html>

Wie auch immer, gucke dir lieber meinen Vorschlag an (ohne Eigenwerbung für meinen Beitrag ;)) an und befolge den.

Edit:
Variablen würdest du dann so einbauen
PHP: 
<div style="width: <?php echo $breite; ?>; height: ...">
 
Nein. Aber du kannst sagen:
Ist scheiße.

Oder du sagst:
Es ist keine gute Lösung.
Dann beschreibst du, wie man es besser machen kann.


Mit der Info:
"Ist scheiße", ist dem User immer noch nicht geholfen
 
Vielen Dank für eure vielen Antworten ;). Ich werde jetzt mal die verschiedenen Lösungen ausprobieren. Ich schreibe dann später noch einmal!

Liebe Grüße
Niklas
 
So! Es ist jetzt schon mal besser, aber immer noch nicht perfekt...Die Beiträge und der Banner passen sich schon an, aber ab einer gewissen Größe, wird es wieder durcheinander...die Navigation oben sowieso, aber das könnte man ja durch eine menubar lösen...Was kann ich den noch verbessern? Achja und ruft die Seite am besten in Firefox auf...in Google Chrome dauert es immer sehr lange, bis das Stylesheet erkannt wird :/...Keine Ahnung warum.

Liebe Grüße
Niklas
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben