Website Bouwen, Verschillende Browsers

[Ryatzu]

Hallo,

Ik wil een website maken die werkt op verschillende browsers.
Wat is de beste manier om te beginnen? Wat doen jullie als eerst?
Zelfde geld als je bij een bedrijf werkt waar er websites worden gemaakt, wat doen jullie daar als eerst?

Er werdt mij door sommige web developers aangeraden om eerst voor Firefox de website te maken, daarna aanpassen zodat het ook in IE werkt, en daarna de rest met de gebruikelijke bugs en work arounds.

Dank u

[ikbenwouter]

Ik zou eerst voor Firefox de website maken, daarna aanpassen zodat het ook in IE werkt, en daarna de rest met de gebruikelijke bugs en work arounds.

[Noork]

Ik zou gewoon valide HTML en CSS gebruiken. Desnoods enkele hacks later toepassen zodag marges etc. goed worden weergegeven. Maar als je een beetje een goede en ervaren html'er bent, dan is het niet of nauwelijks nodig om dit te doen.

Zelf gebruik ik Firefox om te testen, maar dat komt meer doordat ik het gewoon een handige browser vind voor webdevelopment. Zeker icm Firebug. Maar ik test tegelijkertijd ook met IE6, IE7, Safari en Opera.

[Bozozo]

Ik heb gewoon vier browsers open staan tijdens het ontwikkelen. Na elke grote aanpassing (in CSS of JS) even F5, en je ziet het meteen als je tegen een quirk aanloopt.

[Megamind]

Inderdaad, vooral met IE7 hoef je echt niet van die rare hacks in te bouwen als je een normale website maakt.

Ik maak ze gewoon in IE7, check dan even in Chrome, Opera en Firefox om te zien of het werkt. En dan helemaal op het einde nog even met Multiple IE om te kijken of het ook met IE 6 werkt (en lager )

[WeeJeWel]

FF check, werkt overal. Dan nog IE6

[RM-rf]

als je structurele opzet juist is, is het meestal niet een erg groot probleem om eventuele 'glitches' op te vangen... net iets andere rendering in verschillende browsers...

als er echter grote problemen optreden bij de rendering van je website in verschillende browsers is echter de grootste kans dat de werkmethode zelf al fout is, de bouwer zelf tezeer 'visueel' werkt en de visuele weergave te sterk in elkaar 'ge-klei-t' is.....


Als je de basis goed wilt opzetten én je wilt je erst op één browser richten; zou ik je aanraden je oorspronkelijke opzet eerst voor Lynx (een tekst-based) browser op te zetten of bv voor een speech-browser die enkel de structuur en teksten weergeeft ... als dat een goede weergave van je inhoud geeft is dat een teken dat de structurele opzet al juist is.
dat is natuurlijk geen serieuye optie en weinig bouwers yullen dit daadwerkelijk doen, maar is vooral bedoeld als illustratie wat het betekent om af te stappen van het 'visuele denken'

[falcon4ever]

Persoonlijk gebruik ik eerst firefox om mijn content te controlleren (uiteraard wel valide html/css). Mocht het nodig zijn dan gebruik ik voor IE(6 en 7) een aangepaste css (op basis van de useragent).

[ Voor 7% gewijzigd door falcon4ever op 15-09-2008 16:51 ]

[Bosmonster]

Als je een fatsoenlijke doctype gebruikt is xbrowser gecko/webkit/IE7 geen enkel probleem zonder hacks/alternatieve stylesheets. Het zorgenkindje is altijd IE6, maar daar kun je via een conditional statement een css-override voor toepassen.

Om jezelf geen Microsoft-"standaarden" aan te leren raad ik aan te ontwikkelen in Firefox (in combinatie met Firebug). 9/10 keer werkt het dan ook prima in alle andere browsers.

Google Chrome is tegenwoordig een redelijk alternatief. Goede standards-compliant rendering engine en prima debugger/DOM viewer. En lekker snel

[ Voor 48% gewijzigd door Bosmonster op 15-09-2008 17:00 ]

[mr_derk]

deze vond ik wel cool: http://browsershots.org/. gewoon omdat het kan

[Verwijderd]

Bosmonster schreef op maandag 15 september 2008 @ 16:57:
Als je een fatsoenlijke doctype gebruikt is xbrowser gecko/webkit/IE7 geen enkel probleem zonder hacks/alternatieve stylesheets. Het zorgenkindje is altijd IE6, maar daar kun je via een conditional statement een css-override voor toepassen.

Om jezelf geen Microsoft-"standaarden" aan te leren raad ik aan te ontwikkelen in Firefox (in combinatie met Firebug). 9/10 keer werkt het dan ook prima in alle andere browsers.

Google Chrome is tegenwoordig een redelijk alternatief. Goede standards-compliant rendering engine en prima debugger/DOM viewer. En lekker snel

enige hacks die ik gebruik is _height voor min-height en zoom: 1 om vage bugs in ie6 te fixxen

[radem205]

Het gemakkelijkst is om bijvoorbeeld Firefox, IE6 en IE7 vensters open te hebben staan tijdens het ontwikkelen van de (html & css) codes. Wanneer je dan delen van de code gereed hebt dan controleer je telkens of alles nog goed wordt weergegeven in die 3 browsers.
Wanneer dan iets niet correct wordt weergegeven dan weet je dat het (meestal) in het deel van de code zit die je het laatst hebt toegevoegd. Zo voorkom je (voornamelijk in IE6) dat je achteraf fouten er uit moet gaan halen, terwijl je niet precies weet waar het aan ligt.

[TheBorg]

Bosmonster schreef op maandag 15 september 2008 @ 16:57:
Als je een fatsoenlijke doctype gebruikt is xbrowser gecko/webkit/IE7 geen enkel probleem zonder hacks/alternatieve stylesheets.

Helemaal mee eens. Als je opmaak klopt is er bijna geen verschil tussen de browsers.

De hacks die ik gebruik:
1. Een textfield in elke browser pixelperfect hetzelfde maken:

Cascading Stylesheet:

#margin     : -1px 0px -1px 0px;

2. Min-height voor IE6:

Cascading Stylesheet:

min-height  : 100px;
height      : auto !important;
height      : 100px;

3. Als IE6 ineens dubbele marges begint te vertonen:

Cascading Stylesheet:

display     : inline;

[Verwijderd]

Als ik het zo lees is het dus het verstandigst om tijdens de ontwerpfase voortdurend de website in meerdere browsers te bekijken, om te voorkomen dat een van de browsers je website ineens heel anders toont dan jij verwacht.

Dus, je gaat coden, en drukt steeds op F5 in alle browsers.

Is er geen software of zou het niet mogelijk zijn om software te ontwikkelen die dit deels voor je doet en je waarschuwt als het resultaat in een van de browsers gaat afwijken?

[Verwijderd]

Dreamweaver heeft die functie al een tijdje: die checkt je code en rapporteert in welke browsers dat welke bugs kan opleveren en wat je eraan kan doen.

[Bosmonster]

Verwijderd schreef op dinsdag 16 september 2008 @ 15:54:
Als ik het zo lees is het dus het verstandigst om tijdens de ontwerpfase voortdurend de website in meerdere browsers te bekijken, om te voorkomen dat een van de browsers je website ineens heel anders toont dan jij verwacht.

Dus, je gaat coden, en drukt steeds op F5 in alle browsers.

Is er geen software of zou het niet mogelijk zijn om software te ontwikkelen die dit deels voor je doet en je waarschuwt als het resultaat in een van de browsers gaat afwijken?

Iederen wijziging is wat veel, dan wordt je al snel knetter vrees ik

Maar per onderdeel zou ik het zeker testen of dat werkt in alle browsers. Dit voorkomt dat je later een foutje tegenkomt en uren bezig bent om te achterhalen uit welk onderdeel dat komt (want dit soort foutjes kunnen snel een waterval effect veroorzaken).

Persoonlijk ontwikkel ik in FF met IEtab. Zo kan ik in eerste instantie snel ontwikkelen in FF en af en toe even snel kijken in IE7. Met IEtab liggen de sites ook exact over elkaar, zodat grote verschillen erg snel opvallen. Daarna check ik af en toe even in IE6 en iets minder vaak in Webkit/Opera (die doen het toch altijd wel goed als het in FF werkt).

[RM-rf]

Verwijderd schreef op dinsdag 16 september 2008 @ 16:03:
Dreamweaver heeft die functie al een tijdje: die checkt je code en rapporteert in welke browsers dat welke bugs kan opleveren en wat je eraan kan doen.

leuk idee en misschien voor bepaalde mensen een handig 'gedachtesteuntje', maar een functionaliteit waar je op kunt bouwen zal dat volgens mij nooit zijn en het kan zelfs erg negatief werken als mensen dat wel denken te doen:
testen op browser-incompatibiliteiten moet je gewoon doen door je code ook daadwerkelijk te laten weergeven in die browsers (zelfs die standalone test-versies van msie5, 5.5 en 6 moet je eigenlijk een beetje wantrouwen daarin)