Website optimaliseren voor mobiel.

[Verwijderd]

Hey mensen,

Ik ben druk bezig met een eigen website, een soort eigen portfolio.
Deze website werkt prima met Safari, Chrome enzovoort. Maar ik wil graag deze website ook aanpassen voor mobiel gebruik, ook bijvoorbeeld wanneer je je internet brouwser verkleint ("window") in dit geval Safari dat ie steeds aan wordt gepast aan het schermformaat.

Ik heb dit nergens kunnen vinden, of ik zoek iets niet goed. Maar ik denk dat ik CSS3 nodig heb hiervoor, CSS3 ken ik nog niet heel goed, vooral de basis en gewoon CSS, maar met dit wil ik het juist beter leren.

Alvast bedankt,

Niels

(vraag kan onduidelijk zijn, sorry daarvoor, probeer mijn best om het zo duidelijk uit te kunnen leggen.)

[orf]

Je kunt het beste zoeken naar responsive en/of css media queries. Dan vind je wel genoeg voorbeelden.

[Verwijderd]

Ik zal er naar kijken, bedankt!

[TheNephilim]

Responsive is inderdaad het zoekwoord dat je nodig hebt. Kijk ook eens naar voorbeelden zoals Bootstrap: http://getbootstrap.com/

[Verwijderd]

Heeft iemand nog een link naar een goede uitleg over responsive en/of css media queries?

[8088]

https://github.com/dypsilon/frontend-dev-bookmarks

[Remi1115]

Ik vond zelf deze video erg interresant (maar het ligt er natuurlijk aan hoe je het makkelijkst dingen zoals dit leert, video of toch artikelen lezen).
YouTube: Create a Responsive Website Using HTML5 and CSS3
In het begin maakt de uploader een simpele layout, die hij tegen het eind van de video responsive maakt.
Skip naar YouTube: Create a Responsive Website Using HTML5 and CSS3 voor het begin van de media queries.

[_Thanatos_]

Optimaliseren voor mobiel is natuurlijk meer dan wat CSS3 media queries erop loslaten. Het is ook de afbeeldingen optimaliseren, dus bijv een hogere resolutie met kleinere bestandsgrootte (dikkere compressie dus), terwijl algemene optimalisatieregels natuurlijk ook gelden, alleen zwaarder gaan wegen.

Mijn ervaring is trouwens dat media queries ervoor zorgen dat een site in de praktijk juist *zwaarder* wordt op een mobiel dan op de desktop, omdat er meer stylesheets worden ingeladen en er voor hogere resolutie van iconen e.d. wordt gekozen. Een "mobile first" aanpak vermindert dat gedrag. Daarbij kun je zo werken dat extra dingen pas worden ingeladen wanneer je met een desktop bezig bent. Het is niet een technisch iets, maar meer een denkwijze. Valt genoeg over te ducken

[Verwijderd]

8088, Remi en Thanatos,

Bedankt voor de handige links en tips!