ingewikkelde layout

Status
Niet open voor verdere reacties.
M

marc 05

Gebruiker
Lid geworden
5 sep 2006
Berichten
227
Hallo wij hebben een vrij ingewikkelde layout... nu loop ik vaker tegen de problemen aan dat onze site op oude mobiele browsers niet goed te zien is.

Ook niet op b.v. iphone met een resolutie van 320 *480 ..... nu willen we onze site met de huidige layout niet helemaal aanpassen.
Maar als we onze site www.digitreport.com testen: http://mattkersley.com/responsive/ dan blijft er niet veel van over bij de kleinere resoluties.
Ook de tablets hebben moeite met onze site


Nu hadden we zelf gedachte aan een mobiele variant ernaast maar dat is ook bijna niet in te stellen en je hebt waarschijnlijk te maken met dubbel content wat
weer door google bestraft wordt.


Kan ik in css instellen dat het toch mogelijk is tablets en iphone op een goede manier onze website kunnen zien?
 
Je hebt een paar opties om er voor te zorgen dat je website goed is te bekijken op een dumbphone/smartphone. Als eerste moet je wanneer je mobiel aan wilt spreken de browser duidelijk maken dat 'wanneer de website word bekeken met een mobiel apparaat' deze de content moet schalen naar de juiste proporties. Dit doe je m.b.v een meta tag. Hierover kun hier meer vinden

optie1
Een aparte mobiel website bouwen en deze hosten op een m.domein is een optie, maar meestal word dit niet gedaan omdat responsive een goedkopere en snellere oplossing is en je hiermee meerdere apparaten mee aanspreekt (iPHone, iPad, Desktop). Nadeel van responsive is echter wel dat de content overal hetzelfde blijft, en deze niet voor elk afzonderlijk apparaat apart word ge�ndexeerd. Wanneer je dit wel wilt kun je kiezen voor een .m domein en hierop een aparte mobiele site hosten.

optie2. responsive layout m.b.v CSS3 media querys
Responsive is helemaal hot tegenwoordig. waarom? omdat je snel en gemakkelijk meerdere apparaten aan kunt spreken en vanuit een single base kunt werken. Uitleg over CSS3 media query's kun je hier vinden(dit wil echter niet zeggen dat responsive altijd de juiste aanpak is, dit hangt af van je doelstelling). Wanneer je toch kiest voor responsive kunt dit 'na mijn persoonlijke mening' het beste aanpakken met de mobile first strategie in het achterhoofd mobile first strategie je begint met het kleinste scherm (mobiel) en werkt zo omhoog.

Belangrijk is om te onthouden dat wanneer je ontwikkeld voor iPhone, of welke andere mobiel dan ook je niet alleen rekening moet houden met resolutie maar ook met PPI (Pixels Per Inch) Zo heeft een iPHone 3 bijv. een PPI van 163, en de iPhone 4 een PPI van 326ppi (x2) Ook heeft de iphone 4 een 2 maal zo hoge resolutie. De valkuil is echter dat de fysieke groote van beide schermen hetzelfde blijft. Wanneer je een element een bepaalde grootte geeft in pixels zeg 100 px is deze op beide schermen even groot. Wat is dan het verschil? dat is dus de PPI . Hoe hoger de PPI hoe meer detail. Meer uitleg hierover kun je hier vinden

genoeg leesvoer, mochten er nog vragen zijn stel ze gerust :D
 
Laatst bewerkt:
Hoi Pum,
Wanneer je een element een bepaalde grootte geeft in pixels zeg 100 px is deze op beide schermen even groot.
Klik om te vergroten...
Mist hier niet het woordje niet?
Oftewel: "... is deze op beide schermen wel even groot in pixels, maar niet in centimeters" (bij hogere resolutie passen er meer px op een cm).
 
Bij een hogere resolutie passen er meer px op een cm. dit klopt :D. Dit is ook terug te zien aan de PPI waardes. Een iPhone 4 heeft 326 PPI hier passen meer px op een cm dus afbeeldingen worden scherper weer gegeven en er is ruimte voor meer detail. Wat ik er mee bedoelde is dat wanneer je een element een bepaalde grootte geeft in px, 'en dit is alleen wanneer je px gebruikt' de fysieke grootte van het element hetzelfde blijft ongeacht de PPI waarde, ze zijn op beide schermen 100px breed of hoog, het ene element kan alleen meer detail 'wanneer je een afbeelding gebruikt' bevatten als het andere.
 
Laatst bewerkt:
Ah, ik veronderstelde dat "fysieke grootte" de tastbare grootte in cm zou zijn, maar jij gebruikt "fysieke grootte" voor de pixel-grootte. Dan is alles precies omgekeerd.

Maar de werkwijze om de valkuil te vermijden zal hetzelfde zijn:
  • Maak je images zo groot (in px) als hoe je het op de hoogste resolutie wilt zien (dan zijn er px genoeg voor de details).
  • Geef in de css de image-breedte op in % van de schermbreedte.
  • Bij een kleine resolutie zal de browser de afbeelding gaan schalen (zodat deze per saldo minder px bevat en grofmaziger wordt).
  • En dan geven beide beeldschermen hetzelfde beeld weer (in verhouding tot het schermformaat in cm).
  • Alleen die met de hoogste resolutie heeft een scherper beeld.

Met vriendelijke groet,
CSShunter
 
kan ik mijn huidige css dan zo laten als dat deze nu is en voor de kleinere versie`s
dan 1 aparte css maken met media querys en de images een bepaalde breedt van het scherm geven in %?


pum


Je hebt een paar opties om er voor te zorgen dat je website goed is te bekijken op een dumbphone/smartphone. Als eerste moet je wanneer je mobiel aan wilt spreken de browser duidelijk maken dat 'wanneer de website word bekeken met een mobiel apparaat' deze de content moet schalen naar de juiste proporties. Dit doe je m.b.v een meta tag. Hierover kun hier meer vinden
Klik om te vergroten...


Moet ik bovenstaand evengoed doen als ik een responsive layout wil maken?
 
Hoi Marc,

Laatste vraag:
Ja, het is just de kern van een responsive layout dat ie respons geeft op de css3 media query's die in de meta's staan.

=======
Eerste vraag:
  • Om de verschillende beeldformaten te kunnen bedienen zal je aan 1 algemeen alternatief stylepakket denkelijk niet genoeg hebben (bv. wegens verschil staand/liggend formaat).
  • Niet alleen de images moeten in verhouding tot de schermbreedte komen, de hele rest ook als je dezelfde aanblik wilt houden. Voor de kleinere schermen zal dat onmogelijk zijn, daar zal een reorganisatie van de layout voor moeten plaatsvinden (dingen onder elkaar ipv naast elkaar, menu onderop, makkelijke links/menuknoppen voor touchscreens, enz.).

Dus nog best een klusje! ;)
Zie verder pum's opmerkingen, suggesties en links hierboven (als ik zo vrij mag zijn).

Met vriendelijke groet,
CSShunter
 
ik zie door de bomen het bos niet meer:)

Welke metatags heb ik nodig... mijn engels is niet zo goed dat ik alles kan volgen en nu weet ik niet hoe te beginnen?
Heb ik meerder metatags nodig en dat ook weer voor iedere resolutie?


Verder had ik eerst zelf ook gedacht aan een mobiele website maar dan wordt je weer door google bestraft bij dubbel content.
Weet ook hier niet hoe ik dat het best kan opzetten... feit is dat je minder mogelijkheden hiermee hebt.
 
je hebt een paar dingen nodig.

de viewport tag
HTML: 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
zie: https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag

media queries
deze kunnen voorkomen binnen de head tag bijv zoals hieronder (aan het eind word de juiste stylesheet aan de query gekoppeld )
HTML: 
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

of binnen je stylesheet
HTML: 
@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
 // hier je stijlen die passen bij de query
}

meer voorbeelden:
media querys binnen een stylesheet:http://css-tricks.com/css-media-queries/
media querys binnen de head: http://css-tricks.com/resolution-specific-stylesheets/

mocht je het niet meteen toe kunnen passen op je eigen lay-out probeer dan eens te beginnen met een blanco scherm en hier vanuit het geheel op te bouwen. Zo leer je het principe snappen en kun je het later gemakkelijker toepassen op de bestaande lay-out.

succes :D
 
Laatst bewerkt:
pum


je hebt een paar dingen nodig.

de viewport tag


HTML Code:
1<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Klik om te vergroten...


Hoef ik hier om te beginnen dan geen device width in te vullen?
Moet deze hetzelfde zijn als de minimale width van de query?
 
Wat ik van de viewport begrijp is dat je dit kunt instellen naar breedte van het scherm voor b.v. safari browser.
Maar er zijn toch ook meerdere browsers en kun je meerder keren de viewpor instellen?


Wat ik bedoel te zeggen, stel je zet de viewport op 500 dan is dit toch niet voor ieder mobiel apparaat hetzelfde.
Dus zou je op een telefoon met meer dan 500 pix. dan toch ook witruimte ernaast krijgen?
 
Hoi Marc,
Volgens mij is device-width = "apparaat-breedte", dwz: daar hoef je niets in te vullen, want dan zoekt het apparaat zelf uit wat de breedte in px moet zijn.

Als het goed is, staat dat wel ergens in het boven gegeven leesvoer.
En als het niet goed is, ook! ;)
 
Volgens mij is device-width = "apparaat-breedte", dwz: daar hoef je niets in te vullen, want dan zoekt het apparaat zelf uit wat de breedte in px moet zijn.
Klik om te vergroten...

klopt, hier hoef je niets in te vullen je moet die meta tag gewoon kopiëren en pasten binnen je head. De browser zoekt dan zelf uit hoe groot deze de viewport moet schalen a.d.h het apparaat waarmee de website of webapp word bekeken. Met de media querys kun je er dan voor zorgen dat bepaalde elementen wel of niet worden getoond. Deze querys geef je wel een minimale en maximale grootte mee anders kun je namelijk nooit controleren welke stijlen getoond moeten worden.

Voorbeeld:
Een gebruiker bezoekt jouw website met een iPad. Wanneer je geen meta tag bovenin je head hebt staan heeft de browser geen idee hoe groot de viewport van het apparaat is waarmee de website word bekeken dit kan zijn: 'een computerbeeldscherm, iPad scherm, iPhone scherm', je kunt nu ook niets controleren je mist namelijk een gegeven (device-width). Wanneer je dus wel een meta tag in je head hebt staan word er bij device-width de groote van de viewport 'in dit geval de breedte van het iPad scherm' dynamisch ingevuld. Wanneer je een media query hebt die voldoet aan deze voorwaarden kun je hier een stylesheet aan koppelen die past bij de beeldschermgrootte (viewport)

Zo kun je media querys voor elke beeldscherm grootte maken, en hier afzonderlijke stylesheets aan koppelen.

N.B Als je er meer over wilt weten zul je je er echt in moeten verdiepen Google is your friend :)
 
Laatst bewerkt:
ik heb het volgende geproberd om verscil te kunnen zien:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

en


<link rel='stylesheet' media='screen and (min-width: 240px) and (max-width: 400px)' href='css/frames.css' /> (dit is een andere css)

verder staat er nog mijn huidigess

<link rel="stylesheet" type="text/css" href="css/frame.css"> (huidige css)

ik blijf alleen mijn huidige css versie zien



Ook al maak ik in de eerste stylesheet een min-width van 1024 and max van 1920 wat mijn resolutie is van desktop, er verandert niets.


Wat doe ik nog verkeerd?
 
Hoi marc,
Als ze in deze volgorde staan, gaat de laatste de eerste overrulen als er andere waarden in staan voor dezelfde elementen.
Ik denk dat je eerst het algemene stylesheet moet aanroepen, en daarna pas de mutaties voor de mobieltjes e.d.
  • Als je voor alle beeldschermformaten een eigen css-koppeling in voorwaardelijke links zet, gaat het weer wel goed; maar dan is er een compleet sheet voor elk formaat nodig.

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
hallo,

ik begin het een beetje te volgen.... er zijn wel nog wat dingen waar ik tegenaan loop.
op het grotere formaat laat ik de gewone css staan.
op de kleinere fotmaten zijn de foto`s en table te groot.
 
Laatst bewerkt:
Hoe kan ik de plaatjes schalen..... het grootste formaat van 1 plaatje is 600px soms ook een enkel plaatje van 450px,
verder soms met twee naast mekaar en zijn dan beide 300 px breed.

plaatjes staan als volgt:

de ene keer is het een plaatje

<p class="middenin"><img src="plaatje1.jpg" alt="plaatje1" width="600" height="450"></p>

de andere keer zijn het er twee

<p class="middenin"><img src="plaateje1.jpg" width="300" height="225">&nbsp;&nbsp;<img src="plaatje2.jpg" width="300" height="225"></p>


Eerder had ik een site van gevonden, maar daar werd de <div> geschaald als ik me niet vergis.


Nu heb ik een gedeelte van Responsive design gemaakt en wil nu de foto`s en tabellen aanpassen aan schermformaat.

www.digitreport.com
 
Als je er in slaagt om de breedtes van de images allemaal uit te drukken in een percentage van het omvattende element (en daarmee van de schermbreedte), gaat het schalen vanzelf, bv.:
HTML: 
<p class="middenin"><img src="plaatje1.jpg" width="45%"></p>
<p class="middenin"><img src="plaatje2.jpg" width="22%"> <img src="plaatje3.jpg" width="22%"></p>
Daarbij moet je géén hoogte opgeven, die verandert dan automatisch naar rato.
En ook die omvattende elementen moeten allemaal in relatieve breedte-maten staan!


  • Voorbeeld: relatieve-img-breedtes.htm
  • Zet je het browser-venster op kleiner, dan kan je bv. de rechterkant naar links slepen: alles past zich naar verhouding aan, en de aanblik van de layout blijft gelijk.
  • Teksten gaan natuurlijk wel langer naar beneden doorlopen, maar horizontaal is er geen pijn.

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
<p class="middenin"><img src="plaatje1.jpg" width="45%"></p>
<p class="middenin"><img src="plaatje2.jpg" width="22%"> <img src="plaatje3.jpg" width="22%"></p>
Klik om te vergroten...

Jouw manier is wel veel makkelijker. Maar als ik het scherm bij mij op het breedste formaat heb staan en geef b.v. aan een plaatje 50% mee dan wordt het op een gegeven moment groter dan wat het daadwerklijke plaatje is. Had dit gemeten en kwam dan wat pixels hoger uit (weet niet wat er in de toekomst gebeurt als we nog grotere schermen gaan krijgen. Kan het percentage lager zetten maar het wordt dan wel klein.
Is het ook mogelijk om de test dan ook een breedt te geven die in <p class="middenin">breedte tekst aanpassen aan scherm</p>


Ik had ook al wat liggen stoeien met css, maar als ik een border toevoeg dan krijg ik de <div> niet in het midden.... wel als ik deze weglaat.


Code: 
.figure {
margin: auto;
text-align: center;
width: 65%;
max-width:450px;
    [B] border: thin silver solid;
     margin: 0.5em;
     padding: 0.5em;[/B]


}



.figure p {
  text-align: center;

}
img.scaled {
  width: 100%;
}


De html:

Code: 
<p class="middenin">&nbsp;</P>
<div class="figure">
  <p>De tekst schaalt dan ook gelijk mee</p>
  <p class="middenin">&nbsp;</P>
  <p><img class="scaled" src="/vakantie/italie/2012/28_05/IMG_3044.JPG"></p>
</div>
<p class="middenin">&nbsp;</P>
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan