Raar verschil tussen dev en live site

[renevanh]

De afgelopen weken heb ik een nieuwe website voor mijn bedrijf in elkaar gedraaid en ontwikkeld/getest in een subdir op de server waar deze gehost wordt. Dit is een simpel hostingspakketje bij Bsmart.

De ontwikkelde site ziet er (behalve op mobile devices) in principe goed uit. Op mijn eigen scherm (24", wel beetje groter dan gemiddeld, I know) betekend dit o.a. geen scrollbar op de homepage.

Toen ik ongeveer tevreden was heb ik de oude site offline gehaald en de nieuwe gecopieerd naar de public html root directory. Deze werkt dus nu als main site.

Echter: de content is duidelijk zichtbaar groter wat o.a. een scrollbar geeft die ik niet wil.
Volgens FireFox is bijvoorbeeld het logo exact even groot qua aantal pixels, maar het is duidelijk zichtbaar dat dit op het scherm niet zo is.

Van een vergelijking van alle bestanden tot het controlleren van de headers van beide pagina's heb ik van alles geprobeerd, maar ik snap niet waar het aan ligt.

De dev site: www.bassgeluid.nl/BASS4
main site: www.bassgeluid.nl

Wie snapt wat hier gebeurd?

[Koetjeboe]

Druk is ctrl + 0 (of cmd+0) op je toetsenbord in? Gok dat je ooit heb ingezoomd op die 'oude' website, en dat onthoud je brower dan. Hier ziet het er hetzelfde uit.

[ Voor 57% gewijzigd door Koetjeboe op 06-11-2014 10:20 ]

[SmokingAces]

Hier zien ze er exact hetzelfde uit.

*getest met Maxthon browser

[ Voor 30% gewijzigd door SmokingAces op 06-11-2014 10:22 ]

[Gertjuhjan]

Bij mij ziet er ook het exact zelfde uit (Firefox 33 en IE11, Windows 8.1, 1920x1080, 22")

[ Voor 14% gewijzigd door Gertjuhjan op 06-11-2014 10:28 ]

[Gotez]

Identiek (Chrome 38.0.2125.111 m (64-bit))

[Feralio]

Hier zien ze er ook hetzelfde uit. (Chrome 38, Windows 7, 19"monitor)

[crzyhiphopazn]

Ook hier het zelfde -> Win 7, FireFox 33 & IE 8, 2 x 24 inch (Philips en Dell)
Dit vanaf een zakelijke TC gezien.

[Zanzibar-1337]

Zit deze fout niet ergens in een CSS file ? Die letters zijn wel super groot..

[Verwijderd]

renevanh schreef op donderdag 06 november 2014 @ 10:17:

De ontwikkelde site ziet er (behalve op mobile devices) in principe goed uit. Op mijn eigen scherm (24", wel beetje groter dan gemiddeld, I know) betekend dit o.a. geen scrollbar op de homepage.

Hier ook identiek, alleen een tip: Als je het hebt over schermen heeft de grootte er weinig mee te maken, de resolutie bepaald wel wat je ziet. Dus voor de volgende keer je resolutie vermelden

Zanzibar-1337 schreef op donderdag 06 november 2014 @ 10:35:
Zit deze fout niet ergens in een CSS file ? Die letters zijn wel super groot..

Design keuze?

[ Voor 17% gewijzigd door Verwijderd op 06-11-2014 11:24 ]

[renevanh]

Koetjeboe schreef op donderdag 06 november 2014 @ 10:18:
Druk is ctrl + 0 (of cmd+0) op je toetsenbord in? Gok dat je ooit heb ingezoomd op die 'oude' website, en dat onthoud je brower dan. Hier ziet het er hetzelfde uit.

120.00 keer gechecked op de main... is de dev uitgezoomd

#stommiteiten


Overigens zou de boel beter moeten schalen dan het nu doet, zit toch nog wat werk in denk ik...

Weer wat geleerd: ontwikkel nooit op een hoge resolutie (1920x1200 in dit geval).

[borft]

Ontwikkelen op hoge resolutie is prima, maar vergeet niet af en toe te checken wat een andere resolutie doet

btw, als ik jou was, zou ik nog een keer goed naar opmaak (wat hard enters die weg kunnen), grammatica (missende komma's) en spelling (u betaald?!) kijken

[thof]

Goed om te horen dat het probleem is opgelost, kan natuurlijk gebeuren.

Ik heb ook nog wel wat algemene tips:
- De tekst op de Contact en Verkoop pagina is zo groot dat het buiten beeld valt (tekst is nog groter dan die van het logo)
- Er komt een # in de URL, waarom niet de gewone pagina link? Beter voor je google resultaten en makkelijker voor gebruikers ivm bookmarks.
- Je hebt een rond effect rondom je menu items, maar vervolgens klapt er een hoekig menu uit. Dit sluit niet zo mooi aan. Tevens is wat extra ruimte om de om het ronde cirkel effect (link en rechts) wat netter.
- Menu en pagina achtergrond "doen raar" bij scherm breedte van 960px (split screen 1920 breed).
- Zou wat contact gegevens onderaan de pagina in de footer zetten, dat is immers wat je wil: mensen contact met je laten opnemen.
- Een foto van een eerdere productie zal het wat mij betreft ook goed doen.
- Goed die klant referenties, altijd leuk!

Hoop dat je iets met deze feedback kan

[renevanh]

Dankje Thof1, feedback is altijd fijn.

- Grote text: probleempje met fitText() waar ik mee ben aan het stoeien, zou nu netjes moeten werken op die pagina's.
- # in de URL komt door de manier waarop de boel gelinkt is. Gaat via JQuery load() functie (Ajax dus).
- Afgeronde hoeken... nja, working on it. Uitklap rond maken ziet er ook raar uit, ben nog aan het zoeken naar een middenweg.
{EDIT} Middenweg gevonden denk ik{/EDIT}
- Raar menu en divjes: komt door schalen wat niet goed werkt. Fittext zou de menu items moeten meeschalen maar doet dat niet. Kan niet vinden waarom niet, tot nu toe alleen maar ruzie mee gehad

[ Voor 3% gewijzigd door renevanh op 06-11-2014 15:21 ]

[thof]

- # in de URL komt door de manier waarop de boel gelinkt is. Gaat via JQuery load() functie (Ajax dus).

Google eens naar "Link prevent default". Daar kun je de standaard actie (navigeren naar #) mee voorkomen.

- Raar menu en divjes: komt door schalen wat niet goed werkt. Fittext zou de menu items moeten meeschalen maar doet dat niet. Kan niet vinden waarom niet, tot nu toe alleen maar ruzie mee gehad

Misschien wat te hoog gegrepen, maar je zou eens naar Twitter Bootstrap kunnen kijken als je gemakkelijk een responsive design (mobile + tablet + desktop) wil maken.


Voor de rest: Succes

[renevanh]

thof schreef op donderdag 06 november 2014 @ 15:23:
Google eens naar "Link prevent default". Daar kun je de standaard actie (navigeren naar #) mee voorkomen.

Was hardcoded op die manier, heb inmiddels iets verzonnen wat ietsje trager is maar waardoor je wel een valide link meekrijgt die je rechtstreeks naar een pagina kan brengen.

Misschien wat te hoog gegrepen, maar je zou eens naar Twitter Bootstrap kunnen kijken als je gemakkelijk een responsive design (mobile + tablet + desktop) wil maken.

Ik ga eens kijken!