Veng
Elite lid
- Lid geworden
- 27 nov 2012
- Berichten
- 6.543
- Waarderingsscore
- 137
Google berichtte mij afgelopen week dat de responsiveness van mijn
website voor verbetering vatbaar is (belangrijk omdat Google dit in de ranking gaat meenemen, al blijken ze bij hun analyse de plank ook wel eens mis te slaan):
1) Tikelementen te dicht op elkaar: Ik heb de afstand tussen de menu items verdubbel)
2) Viewport niet geconfigureerd: Ik heb een viewport met "initial-scale=1" ingesteld
3) Kleine lettergrootte: Ik heb de lettergrootte wat verbeterd.
Zelf vind ik het er redelijk uit zien, maar ik ben dan ook geen webdeveloper :surrender
Alleen mijn images lijken mij een ratjetoe.
Ik vraag me af of ik principieel verkeerde keuzes heb gemaakt om de images te plaatsen.
In de HTML:
en in de CSS:
en
In de media queries scale ik dan. Bv.:
En van mijn problemen is dat bijna alle plaatjes verschillende afmetingen hebben. Ik heb alles gedimensioneerd voor een scherm van 1024*768, maar de benodigde scaling voor mobiele sites is me niet echt gelukt. Als ik via een gsm kijk (400*800), hebben niet alle plaatjes de juiste afmeting of zijn ze naar rechts verschoven. Lijkt voor alle resoluties beneden de 480 pixels, terwijl daar wel nog veel bezoekers gebruik van maken.
Verder gebruik ik 4 media queries om de verschillende formaten af te dekken. E.e.a. heb ik drie-eneenhalf jaar geleden gemaakt. Sindsdien is css natuurlijk ook flink uitgebreid.
Ik gebruik deze site als testsite: http://mattkersley.com/responsive/
Mijn vraag is dus of iemand me wat aanwijzingen naar de juiste weg kan geven (in de hoop dat ik niet van voren af aan moet beginnen, want dan ga ik beslist verdwalen:-().
website voor verbetering vatbaar is (belangrijk omdat Google dit in de ranking gaat meenemen, al blijken ze bij hun analyse de plank ook wel eens mis te slaan):
1) Tikelementen te dicht op elkaar: Ik heb de afstand tussen de menu items verdubbel)
2) Viewport niet geconfigureerd: Ik heb een viewport met "initial-scale=1" ingesteld
3) Kleine lettergrootte: Ik heb de lettergrootte wat verbeterd.
Zelf vind ik het er redelijk uit zien, maar ik ben dan ook geen webdeveloper :surrender
Alleen mijn images lijken mij een ratjetoe.
Ik vraag me af of ik principieel verkeerde keuzes heb gemaakt om de images te plaatsen.
In de HTML:
Code:
<div class="divImgDefault1" align="center">
<img class="img100" src="images/pelsserredcentrum.jpg" alt="REDCentrum" />
<p class="p0a">
Pelsser RED Centrum
</p>
</div>
en in de CSS:
Code:
.divImgDefault1
{
height: 80px;
width: 200px;
margin: auto;
}
Code:
.img100
{
position: relative;
height: 100%;
width: 100%;
top: -3px;
left: 3px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
In de media queries scale ik dan. Bv.:
Code:
.img100
{
height: 86%;
width: 86%;
}
En van mijn problemen is dat bijna alle plaatjes verschillende afmetingen hebben. Ik heb alles gedimensioneerd voor een scherm van 1024*768, maar de benodigde scaling voor mobiele sites is me niet echt gelukt. Als ik via een gsm kijk (400*800), hebben niet alle plaatjes de juiste afmeting of zijn ze naar rechts verschoven. Lijkt voor alle resoluties beneden de 480 pixels, terwijl daar wel nog veel bezoekers gebruik van maken.
Verder gebruik ik 4 media queries om de verschillende formaten af te dekken. E.e.a. heb ik drie-eneenhalf jaar geleden gemaakt. Sindsdien is css natuurlijk ook flink uitgebreid.
Ik gebruik deze site als testsite: http://mattkersley.com/responsive/
Mijn vraag is dus of iemand me wat aanwijzingen naar de juiste weg kan geven (in de hoop dat ik niet van voren af aan moet beginnen, want dan ga ik beslist verdwalen:-().