Maler for "mobile" siter. Ønsker tilbakemelding.

[Gjest Slettet+9871234]

Jeg arbeider for tiden med å lage to nye siter og begynner da med å lage siten for mobile plattformer. Jeg vil ikke ha en .mobi eller m.mittdomen.no løsning. Sitene skal helst kunne vise sitt innhold uavhengig av plattform. På den første har jeg begynt å utarbeide en mal.

 

Her er den:

 

http://market2norway.com/

 

Denne har bare sider med en eller to kolonner. Jeg skal legge inn en side 7 med tre kolonner når jeg får tid. Så hvordan virker henholdsvis 1, 2 og 3 kolonner? Ikke bry dere om farger etc. Det er ikke endelige farger. Ikke bry dere om tomme menyer og bokser. Jeg er primært interessert i funksjonalitet på ulike plattformer. Falle noen (html) elementer utenfor skjermen og på hvilken plattform. Hurtighet i side lasting og navigering er viktig.

 

Den andre jeg jobber med som vil ha en annen løsning vil kommer her om noen timer:

 

http://www.ad2no.com/

 

Jeg har også en tredje løsning basert på en sitepoint bok:

 

http://www.kjellblei...ile/content.htm

 

Her er det først og fremst snakk om design og utseende på mobile plattformer. Lenkene fungerer ikke.

 

Det hadde vært fint med tilbakemeldigner på:

1. Generell funksjonalitet.
   
2. Hvordan koden / malene virker på ulike plattformer.
   
3. Annet du mener er viktig.
   

Jeg håper ikke dette blir en rant om ulike språk, industristandarder og beste praksis. En beste praksis er bare en beste praksis til en ny praksis som er bedre overtar. De som er interessert i gamle standarder og best praskis kan selge bilen og kjøpe seg en hest.

Endret 2. august 2013 av Slettet+9871234

[Gjest Slettet+9871234]

Skulle vært et eksempel på responsive web design (fluid grid layout i DW CS6), men ble forstyrret for ad2no.com, så derfor er den som den er foreløpig. Lenkene viser en annen mal for mobile siter.

 

Også her bare interessert i funksjonalitet.

Endret 2. august 2013 av Slettet+9871234

[Gjest Slettet+9871234]

Jeg har nå laget min første site http://tankeportalen.no/ som tilpasser seg brukerens plattform med media spørringer ("media queries"). Men reklamen vises ikke bra på smarttelefoner og små nettbrett. Noen som vet hvordan det skal forbedres. Min foreløpige løsning er å splitte opp i mindre visninger. Andre forslag?

 

Native video trenger også et eget format på mobile plattformer. Jeg har laget en site med HTML5 native video som ikke alltid fungerer bra i FireFox og Google Chrome. Derfor opprettet jeg denne

 

Native video what is the best web browser?

 

tråden som noen av dere kanskje kan svare på.

[GeirGrusom]

Veldig mye annonser. Annonsene skalerer dessuten ekstremt dårlig. Det ser lignende ut på mobiltelefonen min.

[Wattengård]

Du bryter tydeligvis siden på feil pixelverdi:

http://www.screenr.com/MPXH

 

Nå bruker jeg adblock, så jeg så ikke annonsene og lurte på hvorfor du hadde en tom sidebar på siden der... Men at den er tom er vel bedre enn at dens eneste formål er reklame..

[Gjest Slettet+9871234]

Veldig mye annonser. Annonsene skalerer dessuten ekstremt dårlig. Det ser lignende ut på mobiltelefonen min.

 

Takk.

 

Virker som Google og Opera er kommet lengst med reklame på mobile plattformer.

 

Hvordan virker siten ellers? Skalerer teksten og bildene bra?

[Gjest Slettet+9871234]

Du bryter tydeligvis siden på feil pixelverdi:

http://www.screenr.com/MPXH

 

Nå bruker jeg adblock, så jeg så ikke annonsene og lurte på hvorfor du hadde en tom sidebar på siden der... Men at den er tom er vel bedre enn at dens eneste formål er reklame..

 

Men det er vel bare på reklamen. Eller mener du at disse valgene er feil

<link href="styles/basic.css" rel="stylesheet" type="text/css">
<link href="styles/tablet_finish.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 481px) and (max-width: 768px)">
<link href="styles/desktop_finish.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 769px)">
<!--[if lt IE 9 & !IEMobile]>
<link href="styles/desktop_finish.css" rel="stylesheet" type="text/css">
<![endif]-->

eller for få?

Endret 23. august 2013 av Slettet+9871234

[GeirGrusom]

 

Takk.

 

Virker som Google og Opera er kommet lengst med reklame på mobile plattformer.

 

Hvordan virker siten ellers? Skalerer teksten og bildene bra?

Ellers ser det bra ut ja

[Wattengård]

Du kan jo ikke bryte på 768px når du setter bredden på wrapper til 980px.

[Gjest Slettet+9871234]

Men det skalerer på tre media spørringer. Kunne muligens hatt flere eller andre grenser. Jeg vet ikke om det er dette ChristianW er inne på.

 

Noen mener at det bør se sånn http://mediaqueri.es/ ut.

 

Denne http://www.bostonglobe.com/ siten har jeg sett nevnt minst to ganger i litteraturen på en som resporderer bra?

 

Se bort fra reklamen nå. Det skal jeg prøve å fikse senere.

[Gjest Slettet+9871234]

Du kan jo ikke bryte på 768px når du setter bredden på wrapper til 980px.

 

Så ikke det før jeg skrev posten ovenfor.

 

Glimrende med en diskusjon om antall brudd og optimale verdier.

 

Takk begge to.

[Gjest Slettet+9871234]

Betinget lasting av innhold og styling er et ganske stort tema.

 

http://24ways.org/2011/conditional-loading-for-responsive-designs/

 

Man kan for oss som bruker php til web utvikling skille mellom tre tilfeller:

1. Betinget lasting via CSS.
2. Betinget lasting via JavaScript.
3. Betinget lasting via PHP.

1. Betinget lasting via Css.

 

Conditional CSS

 

Think Twice Before Using matchMedia to Conditionally Load Stylesheets

 

Det er for eksempel en diskusjon om man skal benytte n eller ett stort stilark. Tester typer på at det er mest effektivt å laste ett stort stilark.

 

2. Betinget lasting via JavaScript.

 

conditionally display content based on Media Query

 

Se også:

 

http://filamentgroup.com/lab/ajax_includes_modular_content/

 

3. Betinget lasting via PHP.

 

PHP version of CSS Media Queries

 

Se også:

http://stackoverflow.com/questions/8780599/conditional-php-for-media-queries-what-are-the-options

[Gjest Slettet+9871234]

Native video trenger også et eget format på mobile plattformer. Jeg har laget en site med HTML5 native video som ikke alltid fungerer bra i FireFox og Google Chrome. Derfor opprettet jeg denne

 

Native video what is the best web browser?

 

tråden som noen av dere kanskje kan svare på.

 

 

Ser ikke ut til at jeg får svar på dette her inne eller på WPW til tross for at tråden nå er på WPWs fremside.

 

Utgangspunkt:

 

Native Video for Web and Mobile – We have a Workflow for That

[Gjest Slettet+9871234]

Litt mer om betinget styling og lasting av innhold:

 

http://wadmiraal.net/lore/2013/04/11/quicktip-detect-responsive-display-with-js/ Interessant trick!!!!!

 

http://www.sitepoint.com/javascript-media-queries/

 

http://wicky.nillia.ms/enquire.js/

 

Senere oppdateringer finnes muligens ved:

 

media query detection modernizr

 

media query detection jquery mobile

[Gjest Slettet+9871234]

Her var det taust.

 

Denne Detect the current CSS3 media query rule tråden er nå på WPWs forside. Jeg fortsetter med en ny site:

 

http://sannhetsdepartementet.no/

 

hvor jeg foreløpig ikke har lagt in responsiv reklame. Det er det jeg jobber med nå.

 

Noen kommentarer eller forslag?

[Wattengård]

Det er ikke mye å diskutere. Du driver jo fortsatt bare å poster random sider med tynt innhold og masse reklame. Jeg kan ikke mye om SEO men jeg antar at du forsøker å bygge pagerank...

[Gjest Slettet+9871234]

Det er ikke mye å diskutere. Du driver jo fortsatt bare å poster random sider med tynt innhold og masse reklame. Jeg kan ikke mye om SEO men jeg antar at du forsøker å bygge pagerank...

 

Slutt med de konspirasjonene dine.

 

Jeg bygger fire typer mobile siter. To av dem er ferdige. De to andre er nevnt i første post, hvor en bygger på jQuery mobile + Phonegap og den andre på fluid grid layout.

 

Pagerank har svært lite med SEO og gjøre. I tillegg har dette forumet rel="nofollow" attributten på utgående lenker.

 

Merk at jeg var høyest rangerte på WPW (kanskje det mest kjente SEO forumet i verden) den gang jeg var mer aktiv der. Jeg ville ikke brukt tid her inne om hensikten var SEO for sitene.

 

Studer heller det jeg spør om og prøv og kom med konstruktive innspill på det.

 

Du kan jo begynne her:

 

http://stackoverflow.com/questions/5570580/php-version-of-css-media-queries

 

Jeg tenker spesielt på noe lignende denne

<?php
  if (isset($_GET['width'])) {
    $width = $_GET['width'];
    if ($width <= 480) { //mobile devices
      $style = '<link rel="stylesheet" href="mobile.css" type="text/css">';
    } elseif ($width <= 720){ //tablets
      $style = '<link rel="stylesheet" href="tablet.css" type="text/css">';
    } else { //desktops
      $style = '<link rel="stylesheet" href="desktop.css" type="text/css">';
    }
    echo $style;
  } else {
      echo "<script language='javascript'>\n";
      echo "  location.href=\"${_SERVER['SCRIPT_NAME']}?${_SERVER['QUERY_STRING']}" . "&width=\" + screen.width; \n";
      echo "</script>\n";
      exit();
  }
?>

koden til å laste php include filer (ikke stilark). Eller er det best (mest effektivt / robust) å bruke JavaScript?

 

Jeg arbeider med å laste innhold beginget av hvilken plattform siten vises på. Vet du noen bedre måte å gjøre det på. Det er også mulig å bruke JavaScript, Jfr. lenker ovenfor.

 

Jeg leter som nevnt etter den mest effektive måten å laste innhold betinget av brukerens plattform (skjerm). Noen av de metodene som er nevnt i lenkene lenger oppe er ikke robuste. Jeg leter etter en robust minimalistisk metode.

 

 

Det er ikke mye å diskutere..

 

Det er det for dem som forstår problemstillingen. JavaScript / PHP eller noe annet for å laste betinget innhold basert på den platform brukeren ser / leser innholdet på.

 

Metoden bør være effektiv og robust.

 

Nøkkelen til betinget lasting finner du i filen:

 

media.css

/* desktop */
@import url("desktop.css") only screen and (min-width:760px);
/* tablet */
@import url("tablet.css") only screen and (min-width:321px) and (max-width:759px);
/* mobile */
@import url("mobile.css") only screen and (max-width:320px);

Endret 18. september 2013 av Slettet+9871234

[Gjest Slettet+9871234]

Nå bruker jeg adblock, så jeg så ikke annonsene og lurte på hvorfor du hadde en tom sidebar på siden der... Men at den er tom er vel bedre enn at dens eneste formål er reklame..

 

Har du sett denne

 

https://www.diskusjon.no/index.php?showtopic=1121642

 

tråden?

 

 

Du kan jo ikke bryte på 768px når du setter bredden på wrapper til 980px.

 

Jeg fant denne

 

http://vimeo.com/32143919

 

meget interessante viedeon av av Jeremy Keith. Hør hva han sier fra 30 til 36.20 (mer presist 35.40) minutter ut i videoen hvor han snakker om innhold først. Innholdet bestemmer altså bruddene.

 

Det kan være vel verdt å følge bloggen hans: http://adactio.com/

 

Se også:

 

There Is No Mobile Internet!

 

og denne http://alistapart.com/article/dao klassikeren.

 

Jeg har nå samlet dette stoffet sammen i en post på min oppslagstavle:

 

http://www.oopschool.com/phpBB3/viewtopic.php?f=46&t=311

 

P.S.

 

Jeg likte følgende utsagn fra den videon:

 

My prediction: Web sites that don't adabt for viewing on resolutions between - 300 - 1280 CSS pixels will be obsolete within 2 years.

 

Endret 18. september 2013 av Slettet+9871234

[Gjest Slettet+9871234]

I den samme videoen (37 minutter ute i videoen) viser han ideen med betinget lasting av innhold. Jfr.

if ($(document).with()>640) {
$.get('path/to/html', function(data) {
  $('[role="complementary"]').appende(data);
});
)

Noen tanker om det?

[Wattengård]

Har du sett denne

 

https://www.diskusjon.no/index.php?showtopic=1121642

 

tråden?

Ser ikke den som relevant da det bare ender opp som en "jailbreak"-kamp uansett. Nettsider blokker adblock, adblock oppdaterer.. Rinse and repeat... Heldigvis er brukerstyrt adblock raskere til å oppdatere sine script og unntak enn nettsidene er til å endre adblock-blokkeringene sine.

Jeg fant denne

 

http://vimeo.com/32143919

 

meget interessante viedeon av av Jeremy Keith. Hør hva han sier fra 30 til 36.20 (mer presist 35.40) minutter ut i videoen hvor han snakker om innhold først. Innholdet bestemmer altså bruddene.

Dette er riktig, men det du har gjort (jeg har ikke åpnet siden på nytt, så dette er fra minnet) er å bryte på en smalere verdi enn bredden av hovedblokken din. Dette gjør at ~200px med informasjon forsvinner på alle viewport-størrelser mellom bredden på hovedblokka og brytningspunktet.

 

Du har altså ikke latt innholdet diktere brytingen, da hadde du måttet hadd bruddet på samme bredde som hovedblokken (gjerne noen pixler luft på hver side), og når du treffer bruddpunktet, endret bredden på hovedblokka.