[img=right]http://www.macfreak.nl/base/data/news/images/macfreak_logo.png[/img]Bij MacFreak zijn we deze week begonnen met de optimalisatie van de website voor betere leesbaarheid en layoutmanagement op de iPad. Om dit te bereiken hebben we al een aantal dingen veranderd en zijn er nog een aantal veranderen die in de nabije toekomst worden doorgevoerd.

Vanaf heden zijn de veranderingen voor zowel iPad gebruikers als Mac/Windows gebruikers direct zichtbaar. De volgende dingen zijn veranderd:

Site wrapper
Een site wrapper om de hele website heen om deze op verschillende schermresoluties te presenteren. De iPad heeft in landscape mode een maximale breedte van 1024 pixels. Door een andere stylesheet te gebruiken dwingen wij voor de iPad af dat de website ook op die grote wordt getoond. De iPad kan hierdoor de site in landscape mode perfect strakzoomen. In portrait view lijkt dit niet te werken omdat deze een maximale breedte heeft van 768 pixels en MacFreak breder is en zal de huidige kwaliteit ook zo blijven.

Content wrapper
Een content wrapper om alles wat onder het menu zit op 1024 pixels breed uit te lijnen. Op grote schermen werd de website voorheen over de volle breedte uitgerekt, waardoor er veel witruimte ontstond in en tussen blokken. Vanaf heden staat alles dus in het midden van het browserscherm gecentreerd.

Conversie plaatjes
Conversie van plaatjes van het formaat GIF naar PNG. Op dit moment zijn alle plaatjes nog in GIF formaat op 72 dpi. In de loop van de week zullen voor alle thema's alle plaatjes woorden omgezet naar PNG formaat op 300 dpi. De plaatjes van het forum bevatten nu ook de teksten op de knoppen, maar bij zoomen op de iPad worden deze heel wazig, dus hebben we besloten om de teksten via CSS erop te plaatsen waardoor de tekst bij zoomen scherp zal blijven.

In de toekomst kunnen we altijd nog tegen andere dingen aanlopen, dus suggesties zijn altijd welkom.

Poeh ! Knap hoor, zo'n oudje als MacFreak nog oppimpen ! Want de hier gebruikte opmaaktechniek is nog voor 95% gebaseerd op ouderwetse tabel-layout en good-old pixel-buttons (incl. tekst). Dat omturnen naar een vloeibare en zoombare opmaak voor iPads is net zo'n tour-de-force als een old-timer ombouwen voor LPG en van airbags voorzien...
Sterkte !  

Ik heb geen iPad dus ik zal niet veel verschil merken, maar even uit nieuwsgierigheid: PNG op 300 dpi? Is dat voor mensen die hun iPad gebruiken om 1 smiley levensgroot te tonen of letterlijk heel diep in een discussie opgaan.

Het is meer voor de scherpte te waarborgen als je inzoomt.
Dus dat ronde hoekjes om op laagste zoomlevel nog rond zijn.

De voorpagina is op een 24inch Mac even wennen. Vrij smalletjes..

Dat is inderdaad even wennen op een groter scherm, lijkt wel heel smalletjes opeens, de voorpagina.

Ik zit er aan te denken om een resolutiekeuze als voorkeur op te nemen. Zodoende kan je zelf de breedte van de content wrapper kiezen, maar dan moet ik echt weten of mensen dit noodzakelijk vinden.

Zeker niet teveel tijd aan besteden hoor. Het werkt toch? Het gaat om de inhoud.

Daar zou ik me ook niet druk over maken, even wennen, maar niks mis mee verder.

Netjes hoor! Ziet er heel strak uit op een iPad!

Mijn complimenten!

Resolutievoorkeur ?
Dat zou dan de eerste website zijn die daar om vraagt...

Op mijn 23-inch is de aangepaste lay-out geen succes imho...

De voorpagina ziet er niet uit: te veel in het wit, en de titels van veel news-items en threads zijn te lang voor de beschikbare ruimte (ja, ik weet dat ik de tekenweergave kan verkleinen, maar ik ben 54 en moet bijna een leesbril).

Zijn er geen truukjes om de weergave aan te passen aan scherm/browser?

Er zijn Javascripts en HTML5/CSS3-technieken om dat te flikken. Maar die zijn eigenlijk altijd een gebaseerd op het switchen van pagina-opbouw (moet je als web-aanbieder wel meer pagina-weergaven opmaken) of het switchen van CSS (en dan moet de website wel met CSS voor alle opmaak werken). Kortom: de huidige oplossing lijkt mij een stoplap, maar zal geen ideaal zijn...

Is het opschalen van de afbeeldingen naar 300dpi niet een beetje overkill? Dit gaat uiteraard ten koste van de bestandsgrootte/laadtijd van de site. MacFreak wordt hierdoor minder geschikt  voor mobiele gebruikers. iPad gebruikers met een Pre-paid sim zijn uiteindelijk meer geld kwijt aan het bezoeken van MacFreak.

Hallo MacFreaks

Die voorpagina ziet er inderdaad op een 24" beeldscherm niet echt geweldig uit.  

Maar voor wie twee websites tegelijkertijd wil bekijken of twee browsers/programma's naast elkaar wil gebruiken is het misschien een oplossing.  

groetjes

Mathy

Zal even kijken of ik in CSS de max-breedte iets groter maak. is 1280 pixels iets.

Ik heb al een set omgezet en een bepaald plaatje gaat van 0,8kb naar 1,2kb.

Op mijn 15" macbookpro vind ik de nieuwe homepage geen succes, zoals eerder gezegd, te veel wit aan de zijkanten.

De oude layout deed het toch prima op de iPad? waarom veranderen??

De iPad heeft zijn eigen CSS en staat los van het gene wat je in de browser ziet. Ik heb een tijdje geleden al geprobeerd de website te centreren en niet helemaal uit te rekken, want op groot scherm is het dan niet echt geweldig.

Ik heb de css aangepast de minimale breedte is 1024 pixels en de maximale breedte is nu 1280 pixels.
Hierbij peil ik nogmaals de meningen.

Als ik de voorpagina bezoek ziet het er in landscape goed uit qua breedte, exact uitgevuld.

Nadat ik in portrait heb gekeken -waar de site ook exact over de breedte van het scherm wordt uitgevuld- en weer terugga naar landscape is de site echter een stukje breder en is niet alles meer in beeld.

Rechtsboven staat een button 'voorkeuren' die er halverwege de 'e' vanaf valt.

Op mijn mbp is de voorpagina trouwens wat aan de smalle kant.

Het switchen tussen portriat en landscape en terug doet de iPad daar kan ik niks aan veranderen.
De website dient dan ook alleen in landscape mode bekeken te worden.

Ronde hoekjes met PNG's in 300dpi?

Dat klinkt vaag. Als je al plaatjes wilt gebruiken voor ronde hoekjes zou je daar background-images voor moeten gebruiken en die kun je niet in elkaar drukken zodat je scherpte overhoudt als je later inzoomt zoals je met gewone plaatjes kunt (al ziet dat er erg ranzig uit in IE). Eigenlijk doet DPI hier niet ter zake, maar dat is een lang verhaal.

Ronde hoekjes kun je daarbij tegenwoordig veel beter met CSS doen (vergezeld van een filter voor IE's) ben je verzekerd van glad geschoren pixels tot ver in de toekomst, en het scheelt een hoop geneuzel.

Zet die ronde hoeken om naar CSS, ben je ongeveer een miljoen losse plaatjes kwijt. 300DPI plaatjes voor een website is pure waanzin natuurlijk.

Als iedere web-maker met goeie bedoelingen nou eerst eens een willekeurige MacFreak-pagina opent (bijvoorbeeld deze) en die eens in Source bekijkt. Let er wel op dat je kin niks kan omstoten als je mond openvalt van verbazing.

De omzetting van de huidige tabellenjungle naar DIV en CSS (voor scherpere tekst, schonere HTML en makkelijkere lay-out aanpassing) is een hels karwei. Dus "even wat ronde hoekjes in CSS" vereist een totale omzetting van alle scripts en stramienen. Ik vind het al knap dat de Administrator in staat is om een wrapper erom heen te krijgen...

Het totale aantal kilobytes van een gemiddelde MacFreak-pagina valt trouwens best mee. Er zijn ca 100 bestanden nodig, waarvan het gros plaatjes betreft die vaak herhaald worden. De plaatjes zijn enorm uitgeknepen qua bestandsgrootte - bij een website als de iPhoneClub krijg je in één scriptje of plaatje al meer data binnen dan de hele pagina van MacFreak nodig heeft.

Ik denk dat alle probeersels om MacFreak voor de iPad te 'optimaliseren' beter achterwege kunnen blijven. Okay, je ziet vagere tekst op de buttons - so what. Ik zie wel meer vage dingen op de iPad; zowat 75% van de huidige apps zijn nog steeds in verdubbeld iPhone-formaat. Ik denk dat het beter is als Safari op het iOS een optie gaat bieden om alleen de tekst te vergroten/verkleinen, zoals iedere desktop-browser biedt. Op tekst-onderdelen inzoomen heb je vaak niks aan, als een suffe webdesigner te brede lappen tekst gebruikt.

Verder hoeft de MacFreak-website geen dingen uit te vinden voor problemen/fenomenen die geen enkele website wilt of goed oplost. Een vaste en gecentreerde breedte zal op een breed scherm altijd veel ruimte eromheen laten zien. Kijk maar naar zowat iedere andere website waar zelfs een team van tig medewerkers aan werkt. Een tegelijk kamerbreed-vloeibare en soms weer gecentreerde layout is een mogelijkheid (met CSS, mits de hele pagina goed werkt met CSS), maar niemand gebruikt deze.

Het heeft te maken met het visuele ontwerp: MacFreak wil onderdelen aan de vensterranden laten 'kleven' en zo een vloeiende indruk geven. Dat lukt (zelfs met tabellen) maar heeft wel consequenties. De vraag is hoe lang je een dergelijk ontwerp wil blijven volhouden. Die vraag is echter van een andere orde...