Responsive maken met Java/PHP?

Geplaatst: 1 juni 20159 jaren

Hallo!

Ik heb laatst een eigen website gemaakt, maar heb te horen gekregen op school dat zij graag willen zien dat ik de website responsive maak. Tuurlijk, heel erg handig. Dit moet ik echter laten zien in minimaal 100 regels php/javascript. Ik heb echter geen idee waar ik moet beginnen en hoe ik dit moet aanpakken. Heeft iemand tips?

Als je een bepaalde code nodig hebt, wil ik die hier uiteraard wel droppen. Website is dm-design.nl.

Reageren

Geplaatst: 1 juni 20159 jaren

comment_2316262

Resposiveness zit hem vooral in de CSS en is eigenlijk een puur front-end probleem. Back-end (PHP, Java) heeft hier vrij weinig mee te maken. Het enige wat eigenlijk echt belangrijk is zijn de media queries. https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Reageren

Geplaatst: 1 juni 20159 jaren

comment_2316263

Responsive maken met PHP is mogelijk door de HTTP headers te checken. HTTP headers zijn extra regels informatie die je browser meestuurt naar de server. Eén van die regels heet User-Agent en bevat informatie over de browser van een client die naar de server verbindt. Het is dus mogelijk om via PHP een andere stylesheet te includen in je pagina:

<!doctype html>
<html>
 <head>
   <?php
     $user_agent = strtolower($_SERVER['HTTP_USER_AGENT']);
     if (preg_match("/phone|iphone|itouch|ipod|symbian|android|htc_|htc-|palmos|blackberry|opera mini|iemobile|windows ce|nokia|fennec|hiptop|kindle|mot |mot-|webos\/|samsung|sonyericsson|^sie-|nintendo/", $user_agent)) || preg_match("/mobile|pda;|avantgo|eudoraweb|minimo|netfront|brew|teleca|lg;|lge |wap;| wap /", $user_agent)) {
   ?>
   <link rel="stylesheet" type="text/css" href="/stylesheet_mobile.css" />
   <?php
     } else {
   ?>
   <link rel="stylesheet" type="text/css" href="/stylesheet.css" />
   <?php
     }
   ?>

   ...
 </head>

...

Het nadeel is dat dit statisch is, en de client de pagina moet verversen om een nieuwe stylesheet te krijgen.

Voor meer informatie hierover verwijs ik je door naar Stack Overflow (waar ik dit voorbeeld aan heb ontleend):

CSS Media queries

Natuurlijk verandert een mobieltje niet direct in een complete desktop, maar het volgende voorbeeld biedt wel betere mogelijkheden. Het is echter geen Javascript of PHP, dus je zult je docent even moeten vragen of dit wel mag (maar ik neem aan van wel).

HTML/CSS biedt al een tijd de mogelijkheid om media queries uit te voeren. Dit zijn kortweg regels die je opstelt zodat een browser (een) bepaalde stylesheet(s) voorgeschoteld krijgt. Zo kun je alleen mobiele browsers selecteren, of browsers/mobieltjes die een bepaalde paginabreedte hebben. Het voordeel van deze regels is dat ze direct worden toegepast zodra de browser verandert. Nog steeds geldt: een mobieltje wordt niet direct een desktop, maar een mobieltje kun je wél kantelen (portret en landschap). Dit kan handig zijn voor pagina's waar veel tekst op staat (die lees je graag in een portretformaat) of waar veel foto's op staan (landschapformaat).

Dit is mogelijk met behulp van de volgende regels:

<!doctype html>
<html>
 <head>
   <link rel="stylesheet" type="text/css" href="stylesheet_screen.css" media="only screen" />
   <link rel="stylesheet" type="text/css" href="stylesheet_mobile.css" media="only screen and (max-device-width: 640px)" />

   ...
 </head>

...

Ook is het mogelijk om deze CSS queries in de stylesheet zelf uit te voeren.

Voor meer informatie hierover verwijs ik je naar de Mozilla Developer Network:

CSS Media queries
HTML viewport meta tag (ook handig)

Bewerkt: 1 juni 20159 jaren door .Timothy

Reageren

Geplaatst: 1 juni 20159 jaren

comment_2316275

Het eerste voorbeeld dat Timothy geeft is het omgekeerde van responsive design. In dat geval maak je meerdere versies van je website. Zoals hier bijvoorbeeld nog steeds (helaas) op het forum is. Ons forum is dus eigenlijk niet responsive aangezien het een losse mobiele skin heeft die aan de hand van een vergelijkbaar stukje PHP-code wordt geladen. Websites die meerdere versies hebben zijn dus geen (goed) responsive design.

Responsive design is juist dat je één versie van je website hebt en afhankelijk van hoe groot je je browser maakt of hoe groot je scherm is dat alles anders schaalt.

Voorbeelden hiervan zijn de websites van Geenstijl en Tweakers.net. Hoe kleiner je de browser maakt, hoe meer alles verspringt en herschaalt. Je hebt nog steeds exact dezelfde informatie en dezelfde website en het herladen van de browser is nooit vereist als je de resolutie van je scherm of browsergrootte aanpast.

Dit kan je dus doen met de uitleg/link die Big Boss over CSS geeft. Een oplossing met PHP raadt ik dus ten zeerste af. Beste is dus je CSS bestand zo te schrijven dat je rekening houdt met meerdere resoluties.

Grote voordeel is dat als je eenmaal een goed responsive design hebt dat je maar één website hoeft te onderhouden en dat wijzigingen direct voor alle apparaten zijn doorgevoerd. Geen geklooi meer dus met dubbel uploaden en dubbel publiceren.

Veel succes!

Reageren