Stikkord: Responsive Webdesign

Nå har jeg tenkt ut en ny løsning for johncons-web/nettsteder

Dette går fortsatt ut på å liksom dele inn skjermen, i tre like deler.

Og så må man midtstille innholdet i disse tre delene.

Det vil da se cirka sånn her ut, på en vanlig PC-skjerm.

Mvh.

Erik Ribsskog

PS.

Her er mer om dette:

PS 2.

På de fleste mobiler så vil disse tre delene da komme under hverandre:

PS 3.

Og på de fleste nettbrett osv., så vil del-knottene komme underst:

PS 4.

Nå lagde jeg en eksempel-nettside i ‘full fart’, (som ikke ble så bra på min egen mobil, antagelig grunnet Angelfire sine bannere):

http://ipadpeek.com

PS 5.

Sånn blir denne nettsiden på min PC, (jeg har fortsatt igjen å flytte ‘Del-knottene’, som på tegningene ovenfor, men det skal nok gå greit, (selv om det er noe pirk), vil jeg si):

http://johncons.angelfire.com/arvettermormorsak.html

PS 6.

Med logoen øverst til venstre, (over menyen), så blir det vel en del bedre på mobil.

Så det er kanskje en bedre løsning.

Det er også mulig at jeg må gjøre det om fra em til pixler, (og/eller legge nettstedet på et reklame-fritt shell), for å få det til å se ut som i emulatoren også på ekte mobiler, liksom.

Og dette minner litt om da jeg lagde kryssordprogram, i 1992.

Da spurte jeg noen ‘random’ folk, (mine ‘flat-mates’ på Ungbo), om hva de syntes, om kryssordene, (som programmet lagde).

Og det er nesten sånn nå og.

At jeg blir litt fristet, til å spørre, noen ‘random’ folk, om hva de syntes om nettstedet på mobil, osv.

For å liksom være sikker på at ‘produktet’ er bra.

Før jeg eventuelt prøver å selge det, til firmaer osv., (som en eksempel-løsning), liksom.

(For å si det sånn).

Så sånn er det.

Bare noe jeg tenkte på.

Men men.

PS 7.

Da blir det sånn her på mobil/nettbrett-emulator, (her kan man stille på bredden på skjerm-elementene, etter å ha forsket mer på hvor stor oppløsning, som de mest brukte mobilene har, (for dette endres fra år til år liksom, når det kommer nye Iphone-er osv., og mobil-brukeren kan også tippe på skjermen, og lese nettstedet på høykant liksom, hvis skjerm-elementene blir for brede)):

PS 8.

Sånn blir det da på min PC, (‘del-knottene’ mangler fortsatt, men det skal ikke være noe vanskelig å få til, på høyre siden av innhold-delen, liksom):

http://johncons.angelfire.com/arvettermormorsak.html

PS 9.

Med ‘del-panel’ osv, så ble nettsiden som dette, på min PC:

(Samme link som ovenfor).

PS 10.

De nye boksene, (del-panelet og copyright-panelet), kommer da til slutt, på mobil/nettbrett-emulatoren, (og sånn er det meningen at nettstedet skal bli, på mobil, når jeg får lagt ut nettstedet, på et reklame-fritt shell etterhvert):

PS 11.

Det er litt stort mellomrom, mellom ‘innhold-panelet’ og ‘del-panelet’, i PS-et ovenfor.

Men det skal gå an å finpusse bort, liksom.

(Ved å for eksempel ha en ‘mellomrom-footer’/marg, nederst på nettstedet.

Tenker jeg nå).

Så sånn er det.

Bare noe jeg tenkte på.

Men men.

PS 12.

Det er også mulig, at jeg gjør det sånn etterhvert, at alle panelene, (og logoen), blir like brede.

Så vil det muligens se mer proft ut, på mobil.

Hm.

Så sånn er muligens det.

Bare noe jeg tenkte på.

Men men.

8. mars 2018
Nå driver jeg med web-design. Jeg prøver å få ‘del-knottene’, på johncons-web, til å slutte, å hoppe, så mye. Dette fungerte bedre, på Posegodt. Jeg prøver derfor å overføre koden derfra, til johncons-web. Men det er litt komplisert, (blant annet fordi, at johncons-web er responsivt, mens Posegodt ikke var det). Så vi får se hvor lang tid dette tar. Vi får se

PS.

Nå har jeg klart å få ‘Del-panelet’, fra Posegodt, til å vise seg, øverst på skjermen, og nå blir utfordringen, å få dette panelet, til å liksom finne plassen sin:

PS 2.

Nå klarte jeg, (ved å bruke ‘laptop-filene’, som ‘sandkasse’), å få ‘Del-panelet’, (fra Posegodt), til å finne plassen sin, så da blir resten bare ‘planke-kjøring’, (det vil si å rydde i designen, og gjøre om Posegodt-koden, sånn at den blir responsiv, blant annet), vil jeg si:

PS 3.

Nå har jeg byttet, til Posegodt Del-panel, på en side, på joncons-web, (så er det igjen, å bytte, på resten av nettsidene, samt en del flikking, når det gjelder fonter og responsiv design):

http://johncons.angelfire.com/kontakt.html

PS 4.

Nå har jeg endret, på ‘Del-panel’-overskriften, sånn at den forhåpentligvis skal passe bedre, sammen med resten av nettstedet:

http://johncons.angelfire.com/kontakt.html

17. november 2016
johncons-web skal også være mulig, å lese, på mobil. Ihvertfall som ‘landscape’

http://mobiletest.me/iphone_5_emulator/?u=http://johncons.angelfire.com/lenker.html

PS.

Nå ser den designen, litt ‘hulter til bulter’ ut, på mobil-emulatoren ovenfor.

Og det fordi, at jeg har tenkt mest, på hvordan nettstedet ser ut, på en vanlig PC-skjerm, (må jeg innrømme).

(Når jeg har laget, dette nettstedet).

Men jeg får prøve å få ordnet det sånn etterhvert, at nettstedet også ser bedre ut, på mobil.

For eksempel sånn, at logo-en blir midtstilt, i forhold til ‘innhold-boksen’ under.

(Noe sånt).

Så vi får se om jeg klarer å få til det etterhvert.

Vi får se.

Mvh.

Erik Ribsskog

PS 2.

Den måten jeg har designet, johncons-web på, er litt inspirert, av et svensk nettsted, (som jeg leste om, da jeg bodde, i England):

http://johncons-mirror.blogspot.no/2014/03/na-driver-jeg-og-tester-responsive.html

13. oktober 2016
Jeg jobber med, å finpusse, den nye web-designen, på johncons-web, (etter migreringen, (til CSS), for noen måneder siden). Og nettstedet skal nå være både objektorientert og responsivt. Men det blir kanskje litt stort mellomrom, mellom de små overskriftene og teksten, (i feltene), tenker jeg. Men det er vel smak og behag. Så jeg får se, hvordan jeg skal løse dette, etterhvert

http://johncons.angelfire.com/lenker.html

PS.

Her kræsjer visst objekt-orienteringen litt med HTML/CSS.

Men da kan jeg kanskje bare droppe å ha disse tekst-feltene objekt-orienterte, (tenker jeg).

For det ser litt ‘gammeldags’ ut, (må man vel si), med så mye avstand, mellom overskriften og teksten, i de ‘link-feltene’, (blant annet).

Så det blir nok til, at jeg bare tar en ‘spansk en’, (på dette), for å spare tid, (og slippe å definere egne overskrifter), osv.

Vi får se.

Mvh.

Erik Ribsskog

PS 2.

Denne bloggposten blir kanskje litt teknisk, men ved å søke litt, på Google, så fant jeg ut, at det er mulig, å fikse problemet ovenfor, ved å stille, på noen ‘default-verdier’, som overskriftene, i HTML, har:

http://www.w3schools.com/tags/tag_hn.asp

PS 3.

Jeg la også merke til, (når jeg så gjennom CSS-koden nå), at johncons-web, har en eller to ting igjen, (det var vel en font-størrelse, som var oppgitt, i piksler), før det er 100 prosent responsivt.

(For da må alt være i em, (for eksempel), og ikke i piksler, da).

Så det er en del finpussing igjen, på dette nettstedet, før denne migreringen, er helt ferdig, (for å si det sånn).

Så sånn er det.

Bare noe jeg tenkte på.

Men men.

PS 4.

Jeg endte opp med, å definere, min egen ‘overskrift-type’, (noe som ser ut til å funke greit, under testing, ihvertfall):

PS 5.

Da ble avstanden mindre, mellom overskrift og tekst, (den røde bakgrunnsfargen, (bak overskriften: ‘johncons-blogg’), er bare for testingens skyld):

16. april 2016
Nå driver jeg og tester responsive webdesign, (på johncons-web). Man skal visst bruke for eksempel prosent, (istedet for piksler), for da kan man også se nettstedet, på mobil. Noe sånt

PS.

Da ble bildet sånn:

http://johncons.angelfire.com/om.html

PS 2.

Men hvis jeg da bruker fullscreen, så blir proporsjonene på bildet forrandret, (så det er mulig at responsive webdesign er mer komplisert, enn det å bare bruke prosent. Hm):

(Samme link som ovenfor).

PS 3.

Jeg får se mer på det her seinere.

For jeg har en del annet, som jeg skulle ha gjort og.

Som for eksempel å sette på resten av ‘share-knappene’, på Bags of Sweets.

Og det var jo noen som ville at jeg skulle begynne å lage pocket-bøker.

Så det har jeg tenkte å gjøre, etterhvert.

(Å utgi Min Bok-bøkene, som pocket-bøker).

Og det er mye annet også, som jeg skulle ha gjort.

Så vi får se når jeg får tid til alt sammen.

Vi får se.

Mvh.

Erik Ribsskog

PS 4.

Og da kan man faktisk også se bildet, på mobil, (som man kan se, på et nettsted jeg fant, når jeg Google-et ‘online mobile emulator’):

http://mobiletest.me/iphone_5_emulator/#u=http://johncons.angelfire.com/om.html

PS 5.

Her er mer om dette:

http://sv.wikipedia.org/wiki/Responsive_web_design

PS 6.

Her kan man se det, at Steffanstorp kommune, (i Sverige), har teksten til høyre for bildet, når ‘surferen’ har en vanlig PC:

http://staffanstorp.se/

PS 7.

Mens på en Iphone, så havner teksten under bildet:

http://mobiletest.me/iphone_5_emulator/#u=http://staffanstorp.se/

19. mars 2014