hulp bij indeling weergave mobiel & tablet gebruikers.

[djeric]

Hallo.

Zojuist had ik een probleem welke ik via andere topic had geopend hier op helpmij. zie hier

Echter zit ik dus op dit moment vast.
Ik wil graag de bovenste helft van me website voorzien van:

* linker kant komt deze pagina: klik
* midden in komt het logo
* rechterkant komt een flashplayer (zie op de website nu resultaat) + onder de speler de buma & sena logo/nummer.

Echter ziet het op me breed beeld schermpje er netjes uit, maar op een kleinere scherm totaal niet. Laat staan het ontwerp goed is voor tablet & mobiel gebruikers.
Me resultaat zoals ik had gewenst wijkt wat af in kleuren, maar niet in vorm. (behalve sommige afbeeldingen ook)
met het volgende resultaat wou ik bereiken:

ontwerp

 

[Aar]

Als je site uit meerdere kolommen bestaat, dan raad ik aan om een goede grid te gebruiken, die je site op goede wijze kan herschalen bij het resizen van de view-port van je browser.
Ik raad zelf de Bootstrap-grid aan (www.getbootstrap.com).

Tevens nog wat opmerkingen:
- Niet is erger dan een auto-play op een website
- Flash is uit de tijd, kijk eens naar HTML5.
- Het logo lijkt behoorlijk op je site geplakt te zijn, en ziet er gecropped uit. Ik neem aan dat dit een tijdelijk logo is?

 

[djeric]

Als je site uit meerdere kolommen bestaat, dan raad ik aan om een goede grid te gebruiken, die je site op goede wijze kan herschalen bij het resizen van de view-port van je browser.
Ik raad zelf de Bootstrap-grid aan (www.getbootstrap.com).

????????????????????????????????????????????????????????????????????????????????
uhm ok. :shocked:

Tevens nog wat opmerkingen:
- Niet is erger dan een auto-play op een website kan ik zo zetten dat ze op play moeten klikken.
- Flash is uit de tijd, kijk eens naar HTML5. leuk die spelers, ze zijn oersaai en zit niks bijzonders aan de interface. just play
- Het logo lijkt behoorlijk op je site geplakt te zijn, en ziet er gecropped uit. Ik neem aan dat dit een tijdelijk logo is? geplakt? aan dit logo is ruim 100 uur gewerkt. bovendien zit er veel effecten in. o.a. schaduw e.d. dus nee is echt het logo... komt het anders door de achter grond dan?

afijn..... ik heb dus geen goede indeling en moet het maar doen met bootstrap-grld ofzoiets.

 

[Aar]

Voor als Bootstrap-grid behoorlijk onbekend klinkt:
https://nl.wikipedia.org/wiki/Bootstrap_(framework)

het komt er op neer dat je dan een basis hebt waarop je je site voor zowel mobieltjes als tablets als desktops kan indelen. Aan de hand van de device waarop iemand je site bezoekt wordt de juiste indeling bepaald. En dat bouw je op met bijv. een framework als Bootstrap. Dat principe heet 'Responsive WebDesign' (RWD)
Zeer handig om naar te kijken als je site op elke device goed moet worden getoond.
Tevens biedt deze ook een hoop extra's zoals knoppen, RWD menubalken en andere (RWD)elementen die mogelijk niet kunnen misstaan voor je site.

Het kan ook zonder een 'grid', maar dan moet je zelf in je CSS allemaal bepalingen gaan inbouwen waarbij elementen aan de hand van de browserbreedtte worden bepaald, de z.g.n. mediaqueries. Ik raad het niet aan.

Over Flash gesproken: Flash wordt nu al behoorlijk de nek omgedraaid vanwege veiligheidsissues, en op veel tablets wordt daar zelfs niks mee gedaan. Kijk liever eens naar HTML5-mogelijkheden. met JavaScript kan je zelf de mogelijkheden als API aanspreken, waardoor je zelf een eigen skin kan maken.

En over je logo, ik doelde op dat plaatje links, nu zie ik dat er 'test' op staat. Dat zag ik even verkeerd.

 

[bron]

Hoi djeric

Je bent goed begonnen door eerst een ontwerp te maken :thumb: De volgende stap is dat je dit ontwerp ook maakt voor phone en tablet. Als voorbeeld heb ik je ontwerp "geknipt" in 3 ontwerpjes. Het is logisch dat je op een phone veel minder kwijt kan dan op een pc dus bij een phone en tablet zal je keuzes moeten maken wat je weg laat of hoe je het onder elkaar gaat zetten.

Het is handig als je in je ontwerp 320, 768 en 992 pixels aanhoudt voor een goede weergave bij respectievelijk phone, tablet en pc.

php4u gaf al aan dat een "grid" handig is. Een grid is reeds bestaande css waarmee je makkelijk de indeling kan maken. Een grid gaat uit van rijen die je verdeeld in kolommen, denk aan het vroegere <table> maar dan in een modern jasje.

Zelf gebruik ik ook Bootstrap omdat de Bootstrap css geschikt is voor phone, tablet en pc. En Bootstrap css gaat uit van responsive pagina's (in jouw html noem je dit autoresize geloof ik). Voorbeeld van een Bootstrap website die ik heb gemaakt; maak je browser smaller en zie wat er gebeurt.

Tips: gebruik bij voorkeur geen iframe en flash. Zoek voor alles wat je gebruikt een "responsive / mobile-friendy / touch friendly" oplossing. Dit in verband met de breedte die variabel moet zijn zodat je het op phone en tablet kan gebruiken. Ik denk dat jPlayer misschien iets is. Ik heb het nog niet gebruikt, maar de website zegt dat het op alle apparaten werkt en het heeft html5/flash (beide dus).







Suc6. Have fun.

*** aanvulling
Zet afbeeldingen of andere content niet "vast" (sticky footer) onderaan de pagina. Dat is niet meer van deze tijd en je voorkomt problemen bij diverse apparaten. Uitzondering kan eventueel het menu zijn maar daar ben ik geen voorstander van.

 

[djeric]

Hoi djeric

Je bent goed begonnen door eerst een ontwerp te maken :thumb: De volgende stap is dat je dit ontwerp ook maakt voor phone en tablet. Als voorbeeld heb ik je ontwerp "geknipt" in 3 ontwerpjes. Het is logisch dat je op een phone veel minder kwijt kan dan op een pc dus bij een phone en tablet zal je keuzes moeten maken wat je weg laat of hoe je het onder elkaar gaat zetten.

Ik snap het via die bootstrap handiger is een ontwerp te maken, maar ik denk dat ik geen website meer nodig hebt eerder ik dat begrijpt. (te ingewikkeld)
ik heb daarom hier de ontwerpen nogmaals bewerkt, maar dit keer voor pc/laptop gebruikers, tablet & mobiele versie. kan ik zo verder naar stap 2?

= pc/laptop
= tablet
= mobiel

is dit dan zo voldoende?

 

[Aar]

De Bootstrap is zeker niet ingewikkeld,

http://www.w3schools.com/bootstrap/
Je moet voornamelijk alleen de juiste classes kennen om je grid op te bouwen.
Persoonlijk zou ik er ook voor kiezen om je menu in het kleintje formaat te verwerken in een uitklap-menu. Dat zat al in de nav-bar van de Bootstrap.
Anders wordt het touchvlak bijzonder klein, waarbij iemand makkelijk verkeerd van tappen op het scherm.

 

[djeric]

De Bootstrap is zeker niet ingewikkeld,

http://www.w3schools.com/bootstrap/

ik kijk er na en lees het, maar denk en schud nee van: "ik geef me over"

 

[Aar]

ik kijk er na en lees het, maar denk en schud nee van: "ik geef me over"

Met alleen maar kijken lijkt alles moeilijk.....

Of je moet gaan stoeien met media-queries, wat soms nog complexer kan zijn omdat je geen 'grid'-rooster hebt.
Anders vrees ik dat je het plan maar moet uitbesteden.

 

[bron]

ik heb daarom hier de ontwerpen nogmaals bewerkt, maar dit keer voor pc/laptop gebruikers, tablet & mobiele versie. kan ik zo verder naar stap 2?

Ziet er goed uit. En dat heb je snel voor elkaar! Het ontwerp pc is 772px en van de tablet 818px. Ik denk dat deze omgedraaid moeten worden. Houdt voor tablet liever 768px aan. De phone is echter te breed. Houdt bij de phone 320px aan om een goed idee te krijgen hoe het er uit zal gaan zien. Zie mijn voorbeelden.

 

[bron]

In de bijlage een voorbeeldje; geen support hierop Het geeft een idee wat je allemaal zelf moet doen als je geen hulp van responsive css (bijvoorbeeld Bootstrap) gebruikt en het allemaal zelf wil gaan bouwen. De vele regels css in de bijlage is het minimum om alleen maar 3 platjes neer te zetten.

Het heeft mij ook wat tijd gekost om Bootstrap te doorgronden, en zeker als ik het naar mijn hand wil zetten. Maar ik ben er blij mee

Suc6 met de bijlage. Have fun.

*** edit
zet in de css de regel url(plaatjes/achtergrond.jpg) even goed. Het achtergrond plaatje wat in de bijlage zit heb ik gecomprimeerd en is 13x zo klein als jouw plaatje (pagina laadt dan een stuk sneller).

 

[djeric]

In de bijlage een voorbeeldje; geen support hierop Het geeft een idee wat je allemaal zelf moet doen als je geen hulp van responsive css (bijvoorbeeld Bootstrap) gebruikt en het allemaal zelf wil gaan bouwen. De vele regels css in de bijlage is het minimum om alleen maar 3 platjes neer te zetten.

Het heeft mij ook wat tijd gekost om Bootstrap te doorgronden, en zeker als ik het naar mijn hand wil zetten. Maar ik ben er blij mee

Suc6 met de bijlage. Have fun.

*** edit
zet in de css de regel url(plaatjes/achtergrond.jpg) even goed. Het achtergrond plaatje wat in de bijlage zit heb ik gecomprimeerd en is 13x zo klein als jouw plaatje (pagina laadt dan een stuk sneller).

excuus voor de vertraging...... door de feestdagen + een verhuizing erna, kan ik hiermee tijdelijk niet verder. wordt vervolgt.... :thumb:

 

[djeric]

ontopic:

nou weer even de buik vol gegeten van de feestdagen en de blikken verf opgeborgen.

Nu heb ik een stuk gelezen en proberen te begrijpen van die bootstrap maar ben echt van mening dit te ingewikkeld blijft voor mij.
Ik ga gewoon per pagina het afwerken en houdt steeds per pagina bij de juiste vorm voor tablet & mobiele gebruikers e.d.


tnx al voor de hulp weer. :thumb:

 

[Aar]

Wat is je kennis tot nu toe dan?

 

[djeric]

Wat is je kennis tot nu toe dan?

html = gevorderd
css = bassis
bootstrap = 0,0%
overige = 0,0%

topic verder hier voortgezet

levens verhaal website bouw ervaring:

Ik was ongeveer 10 jaar terug bezig met website bouwen in programma frontpage.
toe ik na zo 3 jaar later er achter kwam frontpage niet de manier was om website te bouwen ben ik met html gaan werken.
snel kwam ik er achter ik ook css nodig had.

Na heel wat topics leerde ik de html te begrijpen en kon ook valideren even eens voor de cs.
Maar vaak stuit ik op t zelfde probleem. (de uitlijning in div)
Vaak komt dit door niet juist de bron code in te voeren op de juiste plaats

Na zo 9 jaar ben ik er mee gestopt en probeer vanaf heden het beste en professioneler er uit te halen en werken aan de kennis die ik mis.
Ook de tips beter gebruiken en opschrijven en uitvoeren.
maar door gebrek aan de moeilijke situatie's lukt het niet helemaal, welke ik nu stap voor stap probeert op te lossen.