Website ziet er niet uit op Ipad

[Miekmol]

Goedemiddag,

Ik heb de website voor de gehandicaptenvereniging gemaakt met Kompozer.
De website is getest met IE, Mozilla en Google Chrome.
Op allerlei formaten van beeldschermen, van 11 t/m 26 inch.
Overal werkte de website goed.

Nu heb ik onlangs met kerst een nieuwe Ipad gekregen en daar ging ik eens even naar de website kijken.
Ik schrok me rot... de achtergrond was wit, de gekleurde balken waren weg, een gedeelte uit de koptekst was verdwenen.
Sommige pagina's staan niet meer in het midden en zelfs een pagina is heel erg klein geworden.
Het gaat over www.houvastgemert-bakel.nl

Wie kan me helpen?

groetjes Miek

[Frederik]

Dat kan inderdaad behoorlijk schrikken zijn als je je eigen website voor het eerst op een Ipad of tablet computer ziet. Dat heeft allemaal (hoofdzaak) te maken met de layout van de website. Bij vaste afmetingen kan de website niet aan het beeldscherm aanpassen en bij flexibele afmetingen doet ie dat wel. Het is niet de inhoud van de website die je dan moet aanpassen, maar de layout.

Google je op: website aanpassen voor tablet
Dan kom je behoorlijk wat ondersteunende informatie tegen.

Google eens op: fluid website templates
voor verdere uitleg en voorbeelden.

[Miekmol]

Oh oh oh, wat moeilijk toch allemaal. Ik ben maar een simpele ziel en was al zo trots op de website die ik had gemaakt.
Ik durf er niet aan te beginnen. Joomla heeft wel Fluid website templates tegen betaling.. maar om de website nu helemaal opnieuw gaan te maken?

Ik hoop dat er hier iemand een simpelere oplossing heeft.

[Frederik]

Je hoeft niet helemaal opnieuw te beginnen en ja, het is moeilijk.
Maar er zijn wel vloeibare drie kolommen templates te vinden die je zo kunt overnemen, bijvoorbeeld:
http://www.manisheriar.com/holygrail/index.htm

[nirwana]

Mieke,

Wat je vooral mist is de achtergrond-afbeelding van de website. Omdat die achtergrond-afbeelding van boven naar beneden loopt ben je de zwarte achtergrond bovenaan kwijt. Daardoor valt de witte tekst bovenaan de website weg.

Dan komen de blauwe balken boven en onder het menu. En daaronder komt een grijs kleurverloop.

Ik vraag me echt af waarom de iPad die achtergrond achterwege laat. Ik heb het op de iPad naast Safari ook in Google Chrome geprobeerd, maar ook die browser laat de achtergrond van de website weg. Ik dacht dat het iets specifieks van Safari was, maar het lijkt haast iets speciaals van de iPhone / iPad.

Ik denk dat we hiervoor zullen moeten kijken of we de achtergrond van de website ook kunnen opdelen in stukjes die wel door de iPad getoond worden. Na enig onderzoeken blijkt dat de iPad wel een website-achtergrond kan tonen, maar dat de iPad ook wat vreemde beperkingen heeft. Bijvoorbeeld dat je interlacing in de afbeelding maar beter uit kunt zetten en dat een iPad een beperkte hoeveelheid geheugen heeft die voor website-afbeeldingen gebruikt mag worden. Dat heeft dan vooral te maken met de afmetingen van de afbeelding. Jouw achtergrond-afbeelding is nu eenmaal erg hoog (8899 pixels), dus waarschijnlijk gooit dat hier roet in het eten.

Daarop heb ik geprobeerd om de afbeelding wat kleiner te maken. Dan wordt die uiteindelijk wel getoond, maar helaas niet op het juiste formaat: www.mozbrowser.nl/web/houvast/ipad/index.html

Daarom vind ik dat niet zo'n handige weg en wil ik proberen om de achtergrond-afbeelding in meerdere stukken op te delen. Eens zien of ik dat goed kan inpassen in de HTML-code en dit dan aan jou kan uitleggen.

1 andere tip heb ik alvast voor je: pas de titel van de beginpagina van de website eens aan. Nu staat daar "index html", maar iets als "Houvast Gemert-Bakel" zou ik dan beter vinden.

[Miekmol]

Hallo Martijn,

Wat ontzettend fijn dat je me wilt helpen!

Bedoel je dat ik de eerste pagina die nu onder de knop Home staat gewoon kan veranderen?
Kan ik dit doen door het html document gewoon een andere naam te geven en dan naar de server uploaden, moet ik ergens nog meer aanpassingen verrichten, of moet ik het op een andere manier doen?
Ik weet er niet veel meer van, deze website is al 2,5 jaar geleden gemaakt en sindsdien heb ik eigenlijk bijna niets meer veranderd.

Gr. Mieke

[nirwana]

Mieke,

Bekijk deze website maar eens op je iPad en laat me weten wat hiervan vindt:
http://www.mozbrowser.nl/web/houvast/ipad/

Ik bedenk me alleen dat ik nu het grijze kleurverloop in het onderste gedeelte niet heb overgenomen.
Maar voor de rest ziet de website er volgens mij goed uit, ook op een iPad.

[Miekmol]

Hoi Martijn,

De website ziet er zeker goed uit, wel jammer van de grijze achtergrond.
Ik zie alleen dat de onderste zin nu niet meer in het midden van de pagina staat maar aan de linkerzijde...

Als ik dit ga toepassen te zijner tijd, heb ik dan nergens geen grijze achtergrond meer?

Groetjes Mieke

[nirwana]

Mieke,

Op www.mozbrowser.nl/web/houvast/ipad/ heb ik nu ook het grijze kleurverloop in ere hersteld
En de onderste zin staat weer in het midden. Die had ik even over het hoofd gezien.

Voor het grijze kleurverloop heb ik een cross-browser gradient generator gebruikt. Op die manier heb ik ook daarvoor geen achtergrondafbeelding meer nodig.

Op deze manier wordt de gehele achtergrond van de website opgebouwd uit kleuren, in plaats van met een afbeelding. Dat is een modernere manier om een vergelijkbaar resultaat te behalen. Bijkomend voordeel is dat dit er ook op de iPad goed uitziet.

Denk je dat je dit zelf in het Joomla-sjabloon kunt verwerken ?
Anders mag je me wel de bestanden van het sjabloon toesturen. Dan kan ik ik eens kijken of ik dit erin kan krijgen.

[Frederik]

Aanvullende info voor belangstellenden:
http://www.mijn-eigen-website.nl/website-mobiel.html

[Miekmol]

Hoi Martijn,

Het is geweldig maar ik kan het niet toepassen.
Ik zal het aan je opsturen, ik heb je e-mailadres nog wel ergens denk ik.
Het is super dat je dit voor me wilt doen.
Ik neem aan dat ik heel de website naar je moet sturen?

groetjes Mieke

[nirwana]

Mieke,

Als het goed is dan heeft jouw Joomla-installatie een map met de naam templates. In die map verwacht ik dan een map met de naam van het thema dat jouw website gebruikt.

Echter, als ik jouw website zo bekijk, dan verwacht ik niet dat je Joomla gebruikt.
In de code kom ik althans geen referenties tegen die daarop wijzen. Of heb je Joomla slechts als voorbeeld gebruikt ?

Als je geen Joomla gebruikt, dan heb ik inderdaad alle bestanden van de website nodig. Maar die kan ik dan volgens mij ook gewoon van de server downloaden. Daarna kan ik ze weer aan jou terugsturen, zodat je ze zelf weer naar jouw webserver kunt uploaden.

[Miekmol]

Hoi Martijn,

Fijn dat je me wilt helpen, ik ben hier echt heel blij mee!

Nee inderdaad, ik gebruik geen Joomla.
Sterker nog ik heb helemaal geen Template gebruikt en zelfs Joomla niet als voorbeeld.
De achtergrond is met Photoshop gemaakt en de website zelf helemaal met Kompozer.

Ik verbaas me erover dat jij alle bestanden van de server kunt downloaden.
Kan iedereen dit zo maar doen en met iedere willekeurige website?.. ik heb er weinig verstand van.

Wat me opvalt is dat de Nieuwspagina een veel kleiner lettertype heeft en de knoppen bovenin allemaal naar links zijn verschoven op de Ipad. Alle andere pagina's worden wel goed geopend. Is hier iets verschoven, of komt dit goed als de achtergrond aangepast is?
Ik weet wel dat de nieuwspagina veel nieuws bevat. Soms moet ik dingen verwijderen omdat inderdaad de achtergrond niet lang genoeg is en de website dan rare dingen laat zien. Maar dat zou nu dan opgelost worden door hetgeen wat jij gaat gebruiken? Zo niet, wil je dan de Nieuwspagina wat langer maken?
Nu je toch aan de slag gaat, wil je dan misschien ook die eerste knop/pagina van Index aanpassen zoals je al eerder voorstelde?

Ik hoor het wel..

groetjes Mieke

[nirwana]

Nee inderdaad, ik gebruik geen Joomla.
Sterker nog ik heb helemaal geen Template gebruikt en zelfs Joomla niet als voorbeeld.
De achtergrond is met Photoshop gemaakt en de website zelf helemaal met Kompozer.

Oh, je noemde Joomla, dus daardoor werd ik even op het verkeerde been gezet. Maar toen ik jouw website verder bekeek, zag ik helemaal niets van Joomla terug. Ook kon ik me uit het verleden niet herinneren dat je Joomla gebruikte. Maar dat is dus ook niet zo

Ik verbaas me erover dat jij alle bestanden van de server kunt downloaden.
Kan iedereen dit zo maar doen en met iedere willekeurige website?.. ik heb er weinig verstand van.

Ik heb geen toegang tot de FTP-server, als je dat bedoelt. Dus wat dat betreft is jouw website veilig. Maar een webbrowser downloadt de bestanden vanaf de server om ze in de browser te kunnen tonen. Wat zo'n webbrowser kan, dat kan ik ook. Dat kost iets meer moeite, maar gelukkig zijn er programma's om op die manier een website te kunnen downloaden.

Wat me opvalt is dat de Nieuwspagina een veel kleiner lettertype heeft en de knoppen bovenin allemaal naar links zijn verschoven op de Ipad. Alle andere pagina's worden wel goed geopend. Is hier iets verschoven, of komt dit goed als de achtergrond aangepast is?

De Nieuws-pagina had ik nog niet aangepast, dus dat scheelt

Ik weet wel dat de nieuwspagina veel nieuws bevat. Soms moet ik dingen verwijderen omdat inderdaad de achtergrond niet lang genoeg is en de website dan rare dingen laat zien. Maar dat zou nu dan opgelost worden door hetgeen wat jij gaat gebruiken? Zo niet, wil je dan de Nieuwspagina wat langer maken?

Het grijze kleurverloop wordt uitgerekt over de lengte van de pagina. Dus als een pagina wat langer is, dan krijg je een wat langer stuk grijs.

Nu je toch aan de slag gaat, wil je dan misschien ook die eerste knop/pagina van Index aanpassen zoals je al eerder voorstelde?

Ik heb de titel van de Index-pagina aangepast, als dat is wat je bedoelt. Ook heb ik aan de foto-pagina een slideshow van een album van Picasa toegevoegd. Dat heb ik eens eerder voor een andere website gedaan en dat geeft wel een leuk effect. In plaats van dat je zelf enkele foto's aan de website toevoegt, kun je nu de foto's aan het album van Picasa toevoegen. Als de foto-pagina geladen wordt, dan worden de foto's van Google Picasa geladen. Daarmee zijn die altijd up-to-date. Je kunt zelf bepalen welke albums je op de fotopagina wilt tonen. Ik heb daar nu gekozen voor het Kerst-album 2012.

Op www.mozbrowser.nl/web/houvast/ipad/ kun je de aangepaste website bekijken. Als de aanpassingen goed bevallen, dan stuur ik je daarna bijvoorbeeld een zip-bestand met alle nieuwe bestanden van de website. Mocht ik iets niet goed hebben overgenomen (of als je iets wilt aanpassen), dan kun je dat doorgeven.

[Miekmol]

Martijn,

Ik stuur je zo een mailtje..

groetjes Mieke