Mijn site is prima maar in IE een ramp!

[Spikkeltje]

Hallo beste allemaal,

Ik ben de trotse eigenaar van een website, http://www.groesbeekmc.nl.
Het probleem is dat het ding in nagenoeg alle browsers prima werkt, behalve in IE! Eerst al met m'n tagwolkje: hierdoor was het gedeelte van het menu dat daar in de buurt kwam, niet meer aanklikbaar. Maar de problemen gaan verder dan dat, ontdekte ik toen ik testte met BrowserStack.

Ik kwam op deze problemen:
-JavaScript geeft vanaf IE 8 een error, dat is het tagwolkje dus (wordt niet eens aangeroepen maar staat in de code, dus hij 'leest eroverheen' en geeft een error);
-Footer blijft in IE niet op z'n plaats, dit heb ik op vele manieren geprobeerd maar helaas;
- Contactform doet het niet in IE 7 en 8 van XP, pagina opent niet;
- Als ie het wel doet, doet de recaptcha het niet;
- In IE 9 staat de verstuur button niet onderaan het contactformulier;
- In IE10 is m'n menu onleesbaar wegens geen gradients, ik denk trouwens dat ik dát wel opgelost krijg, maar niet om vijf uur 's nachts

Ik heb niet zo heel veel ervaring met programmeren, dus heb ajb een beetje geduld met mij en probeer het zo eenvoudig mogelijk uit te leggen!
Wie oh wie helpt mij verder? Ik zou zo blij zijn!

 

[csshunter]

Hoi Spikkeltje,
Welkom op het forum!
Ik zag 'm om 05.28 ook al even, maar toen geen puf meer. - Tja, het is html5 met css3-foefjes, en daar is IE niet erg van geporteerd... met name de oudere versies kunnen dat niet aan, maar ook IE9 heeft er moeite mee *).

Misschien zijn er wat reddingsoperaties mogelijk, daarvoor moet ik de patiënt in duiken;
... maar nu eerst wat andere dingen doen.

Ik kom terug!
Met vriendelijke groet,
CSShunter
__________
*) Bovendien: lang niet iedereen met IE kan op IE9 overstappen. Als je onder WindowsXP draait, kom je niet verder dan IE8.
Wil je nummertje 9, dan moet je eerst Win7 of hoger kopen. Belachelijke verkooptruc, want de html5- en css3-bestendige laatste versies van Chrome, Firefox, Opera en Safari kunnen het allemaal prima onder WinXP!

 

[Spikkeltje]

Hi CSSHunter,

Dank voor je reactie! Ik heb al een beetje rondgekeken en begrijp dat jij h'e'el veel verstand van zaken hebt, dus als je je licht zou willen laten schijnen op de patiënt (haha) zou ik je zeer erkentelijk zijn! Ik heb ook al te horen gekregen dat m'n "lees meer" en m'n submenu's niet voor iedereen toegankelijk zouden zijn, dit heb ik echter niet uit eigen ervaring, want dat doet het bij mij dan weer wél. Maar mèn, wat een drama is IE. Maar goed, laat ik eerst maar afwachten wat jij er over te zeggen hebt, thanks in advance in ieder geval!

 

[csshunter]

Hoi Spikkeltje,
Vooruitlopend op verdere naspeuringen alvast even dit. - Maak ik de pagina open met IE7, krijg ik (BAM! Eerst het slechte nieuws!) super-opvallend voor m'n kiezen:

Zie ik dat met ogen van een webmaker, dan denk ik:

• Hé, dat heb ik een tijd niet gezien! Dat zag je zo'n jaar of 6 à 10 geleden om de haverklap, meestal net andersom: "Deze website kan het best bekeken worden met Internet Explorer".
• Dat was dan met name nodig om weg te smokkelen dat de site IE-only eigenaardigheden had (bv. door de Microsoft webeditor FrontPage er in gezet). Eigenaardigheden of foefjes die uiteraard niet bij andere browsers ten tonele kwamen, of die ongeschikt maakten. Daarmee probeerde IE in de tijd van de browseroorlog met Netscape goede sier te maken.
• Tegenwoordig zie je dit soort opmerkingen nauwelijks meer, (1) omdat de IE-versies zich gaandeweg (maar: tráág!) steeds meer aan de geldende standaarden zijn gaan houden, en (2) omdat professionele webbouwers zich niet in de kaart willen laten kijken.

Zie ik dat met de ogen van een willekeurige bezoeker, dan denk ik:

• Ja, hoe-hoe! Vlieg maar lekker op met je andere browsers. Ik ga toch zeker niet eerst een programma downloaden en installeren om een website te kunnen zien terwijl ik al een browser heb? Verplichte plug-in's vind ik al erg genoeg ("wegwezen!"). - Maak maar een site die het goed doet in alle browsers!
• Bovendien: er wordt helemaal niet verteld wat die bijzondere "effecten die op deze site te zien zijn" nu eigenlijk inhouden. Misschien stelt het wel niets voor, en dan zit ik mooi voor niks te downloaden en te installeren: verloren tijd!
• Als het nou een site was die staat of valt met die effecten (een experimenteel artistiek project of zo), dan kan ik me er nog iets bij voorstellen. Maar bij een site die over tekstschrijven gaat en niet over beeldende zaken?
• En afhankelijk van mijn temperament krijg ik een rode waas voor m'n ogen dat een of andere webbouwer mij wil bekeren een andere browser te nemen (baas op eigen pc!), of slaak ik een diepe zucht.

Hoe dan ook: ik ben ietwat/flink geïrriteerd, en zeker afgeleid van de inhoud van de site. Valse start!

Conclusie:
Het is niet de eigenlijke boodschap van de site dat er browserverschillen zijn en dat IE het er slecht van af brengt. Dan moet je de bezoekers daar ook niet mee opzadelen. Voor de IE-kijkertjes is het jammer dan: pindakaas. Maar ze hoeven niet te weten wat ze missen, de inhoud van de site moet ook voor hen genoeg te bieden hebben.
Oftewel het mc-advies: IE-boodschap snellekens schrappen!

=======
Flexibele layout met een grens
Nog een algemene opmerking. Breedbeeld-surfers (met een scherm van bv. 1920*1080px) zien dit:

Dat geeft dus regellengtes die minstens 2 keer de maximale zetbreedte voor dit letterformaat zijn...
Dit is te verhelpen door een maximum voor de paginabreedte op te geven.
De pagina wordt dan bij "te groot scherm" horizontaal gecentreerd. Aan de zijkanten komen twee even grote kolommetjes naast de pagina, die nu de kleur van de <body> hebben (#262626 = donkergrijs tegen het zwarte aan). *) Dat kan via de html-eigenschappen bv. omgezet worden in lichtgrijs (c.q. een kleur naar keuze).
Realisatie: in de css van de style.css toevoegen:

#wrapper {
    ...
    max-width: 1200px;
    }
html {
    ...
    background: #C0C0C0;
    }

Resultaat voor breedbeelders zijn tekstblokken die niet breder kunnen worden dan:

Wordt vervolgd!
CSShunter
___________
*) Wilde even een screenshotje bij browsershots laten maken voor hoe het er uit komt te zien, maar dat mislukte deerlijk:
"There were already 146 screenshot requests for this website today. Please create a user account for more screenshot quota." :d

[edit]Hé[/edit] Wat zie ik? "Misschien twijfelt u, of u het schrijven van een tekst wel een tekstschrijver nodig heeft." Soms wel.

 

[Spikkeltje]

Wow, dank je! Ik ben bezig met de door jou voorgestelde wijzigingen door te voeren, oftewel op al m'n pagina's die melding weg te halen. Want eigenlijk heb je wel gelijk: het is wellicht best irritant. Maarre, dat je meteen een typo op m'n indexpagina gevonden hebt! *schaam schaam* Is al verwijderd. Da's het lastige hè, als je maar lang genoeg aan het typen bent dan lees je wat je wíl dat er staat, niet wat er staat

Dank voor de duidelijke uitleg waar en hoe ik e.e.a. moet doen! Dat van die breedbeeld-schermen was eigenlijk expres, een soort liquid-design zeg maar. Omdat ik zelf zo'n hekel heb aan van die kolommetjes naast m'n scherm (heb ook een breed scherm, maar niet zo breed als jouw voorbeeld). Maar jij vindt het dus niks?

Ik ben een n00b op codegebied, 't is té erg... Heb wel geprobeerd m'n CSS te validaten, daar zaten eerst rond de 36 fouten in, nu nog 'maar' zes. Iets met parsen ofzo. Ook heb ik de gradiënt in IE eruitgegooid, die werkte toch vaker niet dan wel. Voor de rest doe ik er mooi even niets aan, alles wat ik doe maakt het geloof ik alleen maar erger.

Ik wacht je berichten af, en alvast bedankt!

 

[csshunter]

Vreemde ogen dwingen tergende typo's tot teloorgang
Nog ééntje dan voor vandaag.
Onder het kopje Feedback (!):
"Wilt u mij ook anderen attenderen op de kracht van deze Dordtse tekstschrijver, ..."

 

[Spikkeltje]

Haha, ik ga een gat graven, heb ik een plekje om me diep te gaan zitten schamen !!

Zullen nog wel meer fouten te vinden zijn vrees ik, ik heb al maanden ruzie met die site... Teksten d'r op, teksten d'r af, dan staat die <div> weer verkeerd, dan is die pagina weer niet valid of vergeet ik ergens weer een <br />.. Het is een drama. Maar je alliteratie is prachtig!

 

[csshunter]

Hoi Spikkeltje,
Zo, daar gaan we dan met het echte werk: het drama om-schrijven tot blijspel!
Mijn strategie is: de html-fouten er uit, de css-fouten er uit, en dan van boven naar beneden en steeds van links naar rechts de elementen doorakkeren. Komt er een ongerechtigheid bij IE of een andere browser tevoorschijn, dan meteen omploegen en opnieuw inzaaien. Zo kom je nooit voor verrassingen te staan als je eenmaal klaar bent.

• Zie ook: The Golden Rules of CSS.

We zijn nog even niet bij "Footer blijft in IE niet op z'n plaats".

Aanpak
Ik bega al meteen een zonde m.b.t. Gouden Regel 2: "eerst het model!". Het model is er in principe al, en ik ga uit van het huidige stylesheet.

• Het speciale stylesheet voor IE schakel ik uit, in afwachting van waar het schip strandt.
• Aanpassingen en aanvullingen voor de styles komen voorlopig onderaan in de <head>.
• Als alles rond is kan dat geïntegreerd worden in de style.css, dat dan ook nog even kritisch bekeken kan worden (tussen m'n oogharen door zag ik wat dubbeldingen en andere overtolligheden).
• Zijn er IE-specialiteiten nodig, dan komen die in een Conditional Comment ook in de <head>.
• Soms zullen er rare dingen kunnen optreden verderop in de pagina, maar daar zijn we op dat moment nog niet aan toe.

Successievelijk zullen er ook wel wat dingetjes komen die een wijziging in het model vragen, maar dat zien we onderweg wel.
Tussendoor zal ik af & toe mijn zaklampje richten op wat me in het kader van toegankelijkheid/accessibility, gebruiksgemak/usability of SEO dienstig lijkt. Alle suggesties vrijblijvend!

=======
HTML
Om te beginnen vervang ik het Doctype voor html5 door XHTML1.0-Strict, zoals wordt aanbevolen in Richtlijn 2.1 van de de webrichtlijnen.nl.
Mochten er html5-zaken komen die anders niet getoond kunnen worden, dan kan altijd naar html5 overgeschakeld wirden, maar dan is alvast een goede basis gelegd.
De huidige html-errors die de html-validator signaleert zijn niet van ernstige aard: een paar keer tags in een verkeerde volgorde en nog wat dingen van minder belang. Voor de pauze onderweg!

=======
CSS
De huidige 6 css-errors zijn allemaal van dezelfde soort: het gaat steeds om browser-specifieke correcties voor Internet Explorer. Die zijn dus niet overeenkomstig de universele css-standaarden en daarom moppert de css-validator. Hoef je niet van wakker te liggen.

• Als ze echt nodig blijken, kunnen ze weggewerkt worden in de IE-styles via een Conditional Comment: dan ziet de css-validator ze niet en valt er niets meer te mopperen.

=======
De topstrook
Wat me vanaf de eerste blik op de site opviel,was het verdonkeren van de topstrook (over de volle breedte) als je de pagina bemuist.
En ik vroeg me af: wat is hier de bedoeling van? - Als je ergens overheen hovert en er verandert iets in het beeld, is het gebruikelijk dat er dan een of andere functionaliteit in werking gezet wordt: je kan klikken op het gehoverde element in kwestie, of er komt ergens een pop-up, enz. Hier niet, en dat kan bezoekers in verwarring brengen (bv. vergeefs klikken).
Mijn suggestie zou zijn: die verdonkering achterwege laten, en alleen de 3 klik-elementen in de topstrook van aanblik laten veranderen bij een hover over zo'n element: dan kan je echt iets doen.

• NB: in IE8 gaat het verdonkeren in 1 klap, en wordt meteen erg zwaar.

Het visueel loskoppelen van de topstrook van de rest van de pagina kan ook door deze altijd een (lichte) achtergrondkleur te geven. Dat breekt het vele wit een beetje, en door het wegvallen van het wit bovenaan komt de focus wat meer op het eerste bericht er onder; de 3 top-elementen zijn opvallend genoeg om toch niet uit het vizier te raken.
Realisatie: een zich horizontaal herhalend background-image voor de html, die de topstrook dan ook buiten de paginabreedte laat zien.

=======
Het logo
Misschien vind jij het mooi, maar ik krijg een beetje een benauwd gevoel van het ingeklemd zijn van de tekst precies tussen de zijkanten (er wordt zelfs een stukje van de G afgeschaafd). Met ietsje verkleinen van de tekst ben je daar van af. Het onderschrift eist door het oranje nu erg veel aandacht op en zou iets smaller kunnen dan de naam (die onthouden moet worden!).
Als ongeduldige surfer vind ik de overgang bij een hover erg traag, die zou van 3 naar bv. 2 sec. kunnen: dan krijg je bij de hover meteen visuele feedback, terwijl de zachte overgang toch niet aangetast wordt. En mijn subjectieve smaak proeft het inkrommen van de hoeken als een beetje overdone: wat minder border-radius bij de hover is subtieler, en zuigt m'n blik niet weg van het centrum met de naam waar het om draait.

Brengt met op een ander puntje. Door de ondertitel weet ik nu dat de "mc" in de domeinnaam niet medisch centrum of medezeggenschapscommissie betekent. Maar het "marketing communicatie" kom ik verder op de pagina niet tegen (misschien kijk ik niet goed, zo best kunnen), terwijl het toch pracht van SEO-woorden zijn. Je zou ze wellicht kunnen toevoegen in de <title> van de homepage, bv. "Tekstschrijver nodig? Tekstschrijver/copywriter L.E. Groesbeek | Bureau Groesbeek Marketing Communicatie".

Voor de toegankelijkheid en voor Google kan je ook zoiets opnemen in een <h1> met hidden text, terwijl de <h1> van "Tekstschrijver nodig?" ook een <h2> zou kunnen zijn (of ook een <h1>); twee h1's is nog net toegestaan.
In plaats van dit (in een pure text-browser = wat de Google-bot ziet):

... wordt het dan dit:

Terug naar logo. Onderaan zit nog een klein strookje waar wel gehoverd en niet geklikt kan worden > door verschillende hoogtes van de #logo en de link er in > weg te werken met css.

Maar ... dit is allemaal nog geen IE8, die schaduwrandje en ronde hoekjes niet kan laten zien. Oplossing kan zijn: aan de IE's < IE9 een image aanbieden, waar alles al in zit (= screenshot van een echte browser). De hover-variant kan er in hetzelfde image naast komen, dan wordt het deze css-sprite: met verandering van de background-position verschuift het beeld bliksemsnel bij een hover.

Al met al tot dusverre:

• Test: grmc-nw1.htm
  

=======
O ja:

... breedbeeld-schermen ... hekel aan kolommetjes ernaast ... liquid design ... Maar jij vindt het dus niks?

Als ik moet kiezen tussen niet zo heel mooie kolommetjes ernaast of onleesbare teksten, dan hoef ik niet lang na te denken.

• Wat wel zou kunnen: een ander soort liquid design, met voor de brede schermen twee tekstkolommen naast elkaar. Die hoeven dan elk niet zo breed te zijn dat de regellengte parten gaat spelen. Daarvoor ben je aangewezen op css3, met vanzelfsprekend weer IE die een workaround nodig heeft.

Met vriendelijke groet,
CSShunter
__________
PS: Niet op m'n alinea-zinnen letten: zo werkt mijn gedachtenstroom. - Later moet ik altijd hakken, maar dat kost extra tijd; dus maar even zo.

[edit]Ah, de uitsmijter nog[/edit]
"Navigatie Overzicht" > Ken je deze? S.O.S. ! Vol met vondsten die je niet zelf kan verzinnen.

 

[csshunter]

Vervolg!

Het gele plakplaatje in de kop
Hier kleven de volgende puntjes aan vast:
Ik had pas na een paar bezoekjes aan de pagina door, dat je erop kunt klikken, en dat het gele briefje dan naar de contactpagina gaat (dat weet je vooraf alleen als je in je browser een statusbar aan hebt staan waarin je de URL van de link kan zien).
Er spelen een paar dingen: het briefje mist een uitnodigende "call to action", waardoor het alleen een illustratie lijkt. En de link kan pas tevoorschijn komen als je vrij hoog in het briefje muist (onder de streepjes geen reactie):

Als je zo hoog in het briefje nog geen hover-handje ziet, verwacht je niet dat dat nog hoger kan komen.
En behalve de tooltip zie je geen visueel verschijnsel als je wel in het hover-gebied zit.

• Gebiedsperikelen op te lossen met css-aanpassing. Er kan een hover-variant voor aanraking bij gemaakt worden. En in de tekst kan iets toegevoegd worden waardoor je ziet dat het ding een link is.

In Internet Explorer komt de CursiveSans niet door. Dat is een meegezonden .ttf font-variant. Maar wil je alle browsers bereiken met dit lettertype, dan moet er een aantal verschillende varianten meegezonden worden. Ik weet niet of alle nodige varianten voor de CursiveSans bestaan.

Ingesloten fonts geven vaak browserverschillen te zien, dat kan redelijk storend zijn (zie dit topic)

In Internet Explorer 8 komt de kanteling van het briefje niet door (en ook de schaduwen niet). In de andere browsers staan de gekantelde letters niet mooi strak. Klopt, want browsers zijn betere rekenmachines dan tekenmachines. Bij geroteerde letters moeten de browsers kiezen: moet de volgende letter nul, één of twee pixels lager, resp. meer naar rechts? (want browsers mogen geen halve pixels aan de beeldschermen toedienen, en bij letters kunnen ze niet anti-aliassen). Daarbij spelen ook afrondingsverschillen een rol. Resultaat: dansende letters en afgrijselijke afspatiëring.

• Maar ... als je van het gele briefje een image maakt, ben je in één klap van alles af!
• Dan doet IE ook mee in schaduw en kanteling, dan hoef je geen ingesloten fonts mee te sturen, en dan kan je in je tekenprogramma de letters mooi strak krijgen (want die kunnen wel goed anti-aliassen op letters).

-

als html+css ----------- als image​

=======
Poneer je zoiets op de site, dan kan je ook een hover-wisseling laten plaatsvinden van het image (alweer via een css-spite). Om consistent te blijven (zelfde type handeling van de bezoeker geeft zelfde soort reactie op het scherm), zou ik net als bij het logo de hoekjes voor de hover-variant afronden. Met css3 kan je de normale en de hover-status mooi in elkaar laten overvloeien (heen wat sneller dan terug).

Dit alles heeft dan dit effect:

• Test: grmc-nw2.htm
  (css weer in de head)

Met vriendelijke groet,
CSShunter
___________
PS: Je vakmanschap m/v en je plezier in je ambacht stralen duidelijk door op de site: leuke teksten!

PS-2: Ik heb het "nodig?" een spikkeltje kleiner gemaakt dan het "Tekstschrijver". Als je het in dezelfde maat onder elkaar ziet staan, krijg je optisch bedrog: dan lijkt "nodig?" net wat groter. En dat is niet nodig, docht ik.

 

[Spikkeltje]

Hi CSS Hunter,

Wat wordt 'ie mooi!! Ik begrijp niet alles wat je zegt, bijvoorbeeld dat gedeelte over die images enzo. Ik begrijp dat het dan een plaatje wordt, wat denk ik veel beter is (omdat 'ie dan mooier is en ook in IE schuin staat). Waarbij mij trouwens opvalt dat in je tweede voorbeeld het plaatje véél schuiner staat dan in het eerste, is dat je bedoeling? want eigenlijk vind ik de eerste schuinte mooier... Is het een probleem dat de tekst in het blokje op alle pagina's anders is? Dan moeten er toch heel veel verschillende plaatjes komen? (Hoeft niet perse hoor, ik heb het toen ooit veranderd omdat het een <h1> is en ik ging ervan uit dat Google het niet leuk vindt als mijn <h1> overal hetzelfde is... Of maakt dat niet uit?

Over Groesbeek Marketingcommunicatie: die naam krijgt inderdaad weinig aandacht, en wordt al snel afgekort tot Groesbeek MC. De reden hiervoor is, dat ik me eigenlijk niet zo bezighoud met marketingcommunicatie (dat is meer de copywriterskant, het verzinnen van reclame enzo). "waarom noem je je bedrijf dan zo?" zou je wellicht denken- en terecht! Maar dat is, omdat het bedrijf eerst van mijn vader was, en die marketingcommuniceerde wél. Toen mijn vader overleed, heb ik het bedrijf overgenomen. Vandaar de naam.

Ik vind het prachtig wat je aan het doen bent, ik durf zelfs de hoop te krijgen dat het ooit weer goed komt met die site van mij!
Alleen weet ik niet hoe ik de wijzigingen moet verwerken in het css en in de html, ook omdat bijv. de plaatjes op een site van jou staan volgens mij. Of wordt e.e.a. gaandeweg duidelijk? Anyway, ik ben je heel dankbaar voor je hulp, echt geweldig! Heb het lichtblauwe ook aan m'n man laten zien, die vond het ook erg mooi. Dus dat houden we erin!

En dat Navigatie Overzicht? Tja, het kan en mag als één woord, dat weet ik... Maar navigatieoverzicht staat zo onoverzichtelijk, denk ik. Of onderschat ik nu m'n lezers? Navigatie-overzicht kan wellicht ook wel. Want sec gezien heb je gelijk, het woord heeft -zoals het er nu staat- een spatie teveel.
PS Die twee tekstkolommen voor brede schermen is wellicht ook heel leuk, ik probeer het me voor te stellen maar volgens mij ziet het er wel gelikt uit! Is dat erg moeilijk?

 

[csshunter]

Hoi Spikkeltje,

... in je tweede voorbeeld het plaatje véél schuiner staat dan in het eerste, is dat je bedoeling?

Wat ik gedaan heb, is precies de hellingshoek aanhouden van het origineel: #header_left {transform: rotate(15deg)}.
In de eerste test (grmc-nw1.htm) richtte ik me op het logo, en heb ik bij het plaatje jouw html/css-code gebruikt (alleen de html-code valid gemaakt) en me verder nergens om bekommerd. Dus: hoek = gelijk.

In de tweede test (grmc-nw2.htm) kwam het plaatje aan de beurt. Uitgangspunt: screenshot van jouw origineel, waar ik even online het lichtblauw achter had gezet (dat kan, met het hulpprogramma Firebug). Dus: plaatje zelf met schaduw = identiek.
De CursiveSans kwam ik tegen bij fonts2u.com/cursive-sans.font. In die demo kan je zelf woorden uitproberen, dus de teksten daar ingevuld (lekker groot) > screenshots gemaakt > met PaintShopPro verkleind, op kleur gebracht, mini-schaduw toegevoegd voor beter contrast en betere leesbaarheid, paar correcties aangebracht (bv. de "e" liep dicht) en gedraaid met weer de 15 graden. Dus: hoek = gelijk!

Conclusie:
Origineel, test 1 en test 2 hebben exact dezelfde schuinte:

origineel ------- test 2​

Om na te meten: dit screenshot (op resolutie 1280*1024px) op ware grootte.
Dat de helling anders lijkt en dat test 2 langer lijkt: puur gezichtsbedrog!

Wat wel anders is, is het meeschalen in de breedte. Bij jou zijn ze liquid, en smaller bij lage resoluties + breder bij hoge resoluties.

schermbreedte 1024px ------- schermbreedte 1600px​

Bij mij heeft het img een vaste breedte: altijd 341*273px (afgestemd op gemiddelde resolutie van 1280*1024px). Ik laat dat niet meeschalen:

• Het is een background-image in verband met de hover, en bij de oudere Internet Explorers kunnen die niet schalen;
• Met enig kunst- & vliegwerk zou het misschien ook met voorgrond-images kunnen, maar dan komen andere problemen om de hoek kijken. Laat je het img alleen horizontaal schalen, dan gaat de hellingshoek steeds slapper worden bij grotere resoluties. Maar laat je het img tegelijkertijd ook in verhouding verticaal meeschalen, dan wordt de hoogte anders, en komt het lichtblauw teveel naar beneden (> dan moet het img semi-transparant gemaakt worden; zou kunnen, maar dan wordt de bestandsgrootte van het plaatje weer een stuk groter = pagina-vertragend).
• Plus altijd: browsers kunnen plaatjes niet zo mooi schalen (geen tekenmachines, enz.).
• Voor de lay-out (ha, deed ik zomaar goed) lijkt me ook geen dringende reden aanwezig voor het schalen van het plaatje.

Wordt vervolgd!
CSShunter
__________
PS: Het hoeft natuurlijk helemaal geen 15 graden te zijn, kan ook anders getekend worden. Een graad of 10 lijkt me wel mooi en genoeg (dacht ik toen ik de pagina voor het eerst zag), dan hoeft de kijker zijn/haar hoofd niet zo scheef te houden.

 

[Spikkeltje]

Je hebt gelijk, niet de bedoeling dat de kijker meteen een whiplash oploopt van m'n site
Het wordt prachtig, ik kan niet wachten op het vervolg!

Enne... Bedankt. Heel erg bedankt. Vind het echt geweldig wat je doet!

 

[csshunter]

Vervolg!

(Fijn dat het tot dusverre bij jou en je gemaal in de smaak valt, dan ben ik op de goede weg.)

Het gele briefje

Is het een probleem dat de tekst in het blokje op alle pagina's anders is? Dan moeten er toch heel veel verschillende plaatjes komen?

Ai, gefixeerd op de homepage, had ik niet verder gekeken dan mijn korte neus en dat nog niet opgemerkt.
Inderdaad! Dat zouden verschillende images moeten worden (+ hover-varianten) = best veel werk.
Ook zo niet handig om aan te passen / uit te breiden.

Nu heeft het gele briefje een aantal functies in zich gecombineerd:

1. Het dient als visuele running gag om te laten zien dat je op een andere pagina bent aanbeland.
2. Het is een speelse textuele illustratie bij de inhoud van de pagina (maar is ongelijk aan de pagina-<title>).
3. Het dient als opvangcentrum voor Google-trefwoorden (maar is ongelijk aan de pagina-<title>).
4. Het is een link naar de contactpagina.

Ik denk dat dit een beetje te veel van het goede is om alle afzonderlijke dingen goed tot hun recht te kunnen laten komen.

ad 1
Dat is helemaal niet gek, pleit ervoor om de verschillen te handhaven. Nadeel: veel tekenwerk.

• Oplossing: toch niet tekenen, maar anders aanpakken.

ad 2
Ligt in het verlengde van 1, is ook prima. De ongelijkheid met de pagina-<title> hoeft niet erg te zijn, als ergens anders maar een herhaling van de pagina-<title> voorkomt. Die is er nu niet: noch in het menu, noch in een kop ergens bovenaan zie je op welke pagina je je bevindt.

• Oplossing: bv. bovenaan in de content een breadcrumb-paadje aanleggen, en/of de pagina-titel als kop erboven, en/of uitlichten in het menu.
• Het laatste is lastig als de pagina in een submenu zit. (De menu-structuur + subs heb ik nog niet bekeken, zit nog op de marsroute; misschien komen dan nog ideeën opborrelen.)

ad 3
Dit maakt het een beetje gecompliceerd. Maar als er een echte <h1> pagina-kop is, kunnen de trefwoorden ook elders ondergebracht worden, als die nog niet in de kop zitten. Bv. in de artikel-koppen, met <strong> enz. (En ik had er stiekem al een <h2> van gemaakt).

• Oplossing aldus: deze functie laten vervallen.

ad 4
Dit breekt een beetje met wat ik maar noem "de eenheid van functioneren": je ziet iets anders op elke pagina, maar de (niet genoemde) link gaat telkens naar hetzelfde.

• Oplossing: de link boven water halen, steeds hetzelfde benoemen, en als gelijkvormig element integreren in het plaatje/plaatjesalternatief.

- Toen wat lopen broeden (sommigen doen dat zittend, ik ben meer van de peripatetische school ).
Resultaat van deze kip:
Het hoeft niet per se een gekanteld memo-briefje te zijn. Zonder kantelen kan het met gewone tekst in elke browser.
Dan is alleen voor de schaduw een background-image nodig en kan de tekst per pagina verschillen.
Maar een rechthoekig geeltje is de dood in de pot voor de vormgeving: de andere dingen in de bovenstrook zijn ook al rechthoekig.
Denk - denk - denk > een geel gedachtenwolkje!
Dat heeft een duidelijk van rechthoekig afwijkende vorm.
En het sluit associatief aan: dit zijn de vragen die de bezoeker (hopelijk) heeft.

=======
De/het Groesbeek MC
Ja, nu snap ik het. Toch moet ik maar steeds aan Medisch Centrum denken: ("is Groesbeek dan zo groot dat het een MC heeft?" - Ja!, zegt Google).
Persoonlijk vind ik "Groesbeek Tekst" beter bekken, en ook niet zo abstract.
Maar misschien kan je voorzichtigjes het begrip Tekst er bij frommelen in het logo op de site? Dan blijft het MC gehandhaafd (ook voor Koophandelkamers e.d.), en weten tekstschrijver-zoekers meteen dat ze op het goede adres zijn.

=======

Het bovenstaande in de vorm van een testpagina:

• Test: grmc-nw3.htm
• Nog niet 100% IE-geschikt gemaakt in de css.

=======
Wijzigingen doorvoeren
Dat komt pas op het eind, als we alles gehad hebben. Misschien moeten er tussendoor nog eerdere nieuwigheden bijgesteld worden n.a.v. dingen die verderop anders kunnen worden. Dan kan alle css in een plaatsvervangend stylesheet komen, en voor de html zal ik voor zover nodig een gebruiksaanwijzinkje maken.
De plaatjes bij mij op de site ... die heb je intussen al bij jou op de computer staan.
Zodra je ze al surfend op het scherm ziet, zijn ze namelijk al gedownload (onder Windows zitten ze in je map Tijdelijke Internet-Bestanden voor IE, en bij andere browsers in een ander tijdelijk mapje - totdat je de browsergeschiedenis e.d. opschoont).
Maar ik kom t.z.t. wel over de brug met een lijstje van de vindplaatsen (zitten ook al in de broncodes van de testpagina's), dan zijn ze direct te downloaden naar waar je ze hebben wilt.

=======
Navigatie(-)Overzicht
Vroeger, toen internet nog jong was en surfers nog van niets wisten, was het gebruikelijk om boven het menu in kanjers van letters "Menu" te zetten: op de dingen onder dat Menu kon je klikken! - Tegenwoordig weet iedereen dat vanzelf al: een rijtje knoppen onder elkaar (en de bovenste met als titel "Home") is overduidelijk het menu en bestemd om over de site te navigeren.
Ik denk dan ook dat het hele woord "Navigatie Overzicht" enz. niet nodig is. Misschien wel een ander kopje, ter onderscheiding van de blog-items er onder die ook een kopje hebben.
Maar daar ben ik nog niet! Eerst het laatste blokje in de bovenstrook nog.

Met vriendelijke groet,
CSShunter
______________
PS: Ook nog een mogelijkheid: op de homepage het mooie gekantelde image zetten, en op de vervolgpagina's het wolkje met telkens een andere tekst.

 

[Spikkeltje]

Hi CSS Hunter,

(Sorry voor de late reactie, we zitten met ziekenboeg thuis )
Wauw, hoe doe je dat allemaal? Dat gedachtenwolkje is prachtig, ik vind het geweldig! Zie wel duidelijk het verschil tussen de tekst als het een tekening is of wanneer het echt tekst in een wolkje is, je hebt gelijk, tekening is mooier. Maar om nu allemaal verschillende tekeningen te maken? En dat "tekst", zou dat niet leuker staan ónder dat Marketingcommunicatie?

Zeur zeur zeur, ik bedoel het allemaal niet zo hoor, ik vind het geweldig wat je doet en durf bijna geen inbreng te leveren, heb eerder zoiets van "laat CSS Hunter maar schuiven!" want wat je maakt vind ik gewoon... tja, klasse. Ben er echt ontzettend blij mee en kan bijna niet wachten tot ik het vervolg zie
(Waarmee ik je absoluut niet achter de vodden wil zitten hoor, hou me ten goede!)

 

[csshunter]

... dat "tekst", zou dat niet leuker staan ónder dat Marketingcommunicatie?

Ah, bij m'n conceptje had ik in gedachten dat je misschien op briefpapier e.d. hetzelfde logo had staan, en om niet al te veel af te wijken had ik de "tekst" er daarom boven gezet. - Maar het "tekst" kan net zo goed onder "Groesbeek", dat is best wel mooier:

• grmc-nw4.htm

Of ook nog onder "mc":

• grmc-nw5.htm

De tweede ziet er wat evenwichtiger uit, maar de eerste vind ik toch beter: dan komt het accent meer op je hoofdactiviteit tekstschrijverij te liggen (en de bezoeker weet niet welke tussenstadia allemaal gepasseerd zijn).

=======

Zeur zeur zeur ...

Nee hoor, niks daarvan. Uit een dialoog komen de beste dingen tevoorschijn! En tenslotte: jij beslist; de site is jouw feestje en niet het mijne, terwijl ik graag geniet van feestgedruis.

=======

Zie wel duidelijk het verschil tussen de tekst als het een tekening is of wanneer het echt tekst in een wolkje is, je hebt gelijk, tekening is mooier. Maar om nu allemaal verschillende tekeningen te maken?

Ja, tig tekeningen maken is ook zo wat. Maar de tekst in het wolkje beviel me ook niet zo, die kan wel wat mooier gemaakt worden. Bv. door het cursief van de vraag om te zetten in normaal rechtopstaand, dat kunnen browsers beter (minder rafelig) renderen. En een ander lettertiepje, andere kleur, enz.
CSS is geduldig (en makkelijker uit te proberen / aan te passen dan een image)!

• Test: grmc-nw6.htm

=======
Nog een vraag: maak je alles op de hand, of zit er stiekem een CMS achter dat ik niet kan zien?

Met vriendelijke groet,
CSShunter

ps: Nog niet naar IE gekeken bij deze dingen, zal iets aangepast moeten worden.

 

[Spikkeltje]

Hi CSS Hunter,

Mag ik de "eronder of erboven"-vraag even laten voor wat 'ie is? Wil nml. ook graag de mening van m'n man weten, maar die zit nu op z'n werk, dus dat gaat 'm momenteel niet worden.
Er zit trouwens geen CMS achter, maar wel een soort-van: m'n eigen home made CMS :d oftewel, ik heb in de htaccess een soort code toegevoegd waardoor 'ie de HTMl op een bepaalde manier parst zodat er een php aangeroepen kan worden. En waar jij in de HTML dus

<div id="contentwrapper">
<div id="leftside">
<p class="navigatie"><span class="menu_first_letter">Navigatie Overzicht</span></p>
<div id="menu">
<ul>
<li><a href="/">Home</a></li> (etc)

leest, staat er stiekem

<div id="contentwrapper">
<div id="leftside">
<p class="navigatie"><span class="menu_first_letter">Navigatie Overzicht</span></p>
<?php include("menu.php"); ?>

Idem voor het Tekstschrijvers Blog: daar staat <?php include("tags.php"); ?> i.p.v. die hele opsomming. Dit omdat ik er zacht gezegd niet goed van werkt dat ik na elke keer een nieuwe blog geschreven te hebben, deze blog moest invoegen op meer dan dertig pagina's. Is dat een bezwaar?

PS ik weet het, het is een php-dinges van niets, maar ik was er stiekem best trots op toen het ein-de-lijk werkte Ben er een week mee bezig geweest. Erg hè.

 

[csshunter]

Kijk eens aan! Ik mag dat wel, die home made CMS'jes. Er gaat niets boven eigen fabrikaat schuurtjeswerk! :thumb:

1. Als het achter de schermen geen Wordpress, Joomla of ander ingewikkeld CMS is, kunnen we niet voor onverwachte verrassingen / complicaties komen te staan.
2. Als je al met php-includes werkt, hoeft ik dat niet voor te stellen resp. uit te leggen.
   (voor eventuele meelezers: PHP-includes in een notendop)

=======

...best trots op toen het ein-de-lijk werkte. Ben er een week mee bezig geweest. Erg hè.

Helemaal niet erg; als oprechte doe-het-zelver doe ik het meestal ook zo (+ ook trots + verklap niet hoe lang het duurde).
Beter dan iets ongezien copy/pasten en niet weten wat je doet. Uitvinden is 10% inspiratie en 90% transpiratie! *)

Wordt vervolgd!
(Ik ga zo eens kijken of ik iets met het rechterbovenblokje kan doen - alle hangende vragen kunnen nog rustig even blijven hangen.)
CSShunter
___________
*) Edison-verbastering: "Genialiteit is 1% inspiratie en 99% transpiratie". Duurt nog langer en kost nog meer zweet!

 

[Spikkeltje]

Blij dat je me niet uitlacht, ik voel me zo'n kneus met al dat gedoe

Overigens heb ik de site niet zelf gebouwd hoor, dat kan ik niet! M'n broer heeft dat gedaan (zie ook de link in de footer). Alleen waren er toen een aantal dingen nog niet goed (zoals dat IE-gebeuren) en werd ik op den duur gek van dat overal aanpassen van m'n links, vandaar dat ik dat php-gedoe toen op- en uitgezocht had. Ik ben er steeds een beetje meer over aan het leren, heb ook al dingen aangepast enzo, alleen dat IE-probleem lukt me in geen 100 jaar, dat weet ik nu al. Dus ben heel blij met je hulp

 

[csshunter]

HOLA! Herstel!
Bij bekijken in Chrome zie ik nu dat dan het wolkje toch wordt gekanteld in de tests nrs. 3, 4, 5 en 6, wat niet de bedoeling was.
En ook het briefje van nr. 2 heeft extra kanteling gekregen in Chrome!

• Vandaar waarschijnlijk je opmerking "in je tweede voorbeeld het plaatje véél schuiner staat dan in het eerste, is dat je bedoeling?" in reactie nr. #10. Voor Chrome klopte dat: die had dus 30 graden wiplash ipv 15, en dat was niet de bedoeling!
• Ik had 'm gemaakt in Firefox, en voor FF het kantelen uitgeschakeld. Dat blijkt ook nog voor Chrome, Safari enz. te moeten gebeuren, want in je stylesheet is dat geregeld met browserspecifieke css. *) Ongedaan maken is soms lastiger dan het lijkt...

Intussen verbeterd in tests/grmc-nw2.htm: dit is de bedoeling voor het briefje.

Intussen verbeterd in tests/grmc-nw6.htm: dit is de bedoeling voor het wolkje.

De wolkjes-css meteen ook aangepast voor IE onder IE9.

CSShunter
_________
*) Alweer een doodzonde tegen de Golden Rules: "Do it TESTING-AND-TESTING-AND-TESTING at each small step, and you will never find surprises in the end!". In mijn haastige spoed en belust op het volgende onderdeel had ik dat even uitgesteld...

[edit]O, tussenliggend bericht![/edit] Ik had de pagina nog open staan, dus zie dat nu pas. - Wat ze ook her en der beweren: webdesign / webontwikkeling / webrealisatie is een vak! En een vak leer je niet van de ene op de andere dag. Doe je dat met zelfstudie & Google (waar je het kaf van het koren moet zien te scheiden), en tussen andere bedrijven door, dan vraagt dat een lange adem. - Als je er net zoveel tijd in hebt gestoken als in je eigen vakopleidingen en het dan nog niet zelf kunt, mag je je van mij wel "kneus" noemen. Maar geen dag eerder!

 

[Spikkeltje]

Hi CSS Hunter,

Hij wordt mooi zeg! Vind het heel leuk met dat wolkje, log elke dag in om te kijken of je al iets nieuws gepost heb want kan niet wachten!
Ben wel heel blij dat je me helpt, ik kom er dus echt niet verder mee en was al in staat om die hele site offline te halen. Maar nu heb ik weer goede moed!
Krijg je 'm IE-proof denk je?