Posted by razzel on May 18, 2015 at 11:37am
Hej på er!
Finns det något enkelt sätt att mobilanpassa en Drupalsajt eller måste man köra två sajter - en för datorer/surfplattor och en för mobiler?
Tack!
Mobilanpassa Drupal
Group organizers
Group categories
Ämne
- Frågor och svar (2151)
- Besvarade frågor (1801)
- Gamla frågor (194)
- Avskrivna frågor (155)
- Tips och guider (148)
- Projekt (93)
- Händelser och träffar (216)
- Hej och presentation (59)
- Drupal Sverige (61)
- Om denna grupp (50)
- Framtiden (10)
- Allmänt (69)
- Om Drupal (42)
- Annat än Drupal (5)
- Nyheter (92)
- Lanseringar (46)
- Marknadsföring (28)
- Podcast (10)
Comments
Enkelt! :)
Det enklaste sättet att mobilanpassa en Drupal-sajt är att välja ett tema som är "Responsive" dvs ställer om sig automagiskt beroende på vilken sorts enhet du använder. Inget behov av två olika sajter alltså. Samma innehåll presenteras anpassat för resp. enhet.
Själv brukar jag använda "Zen". Det finns även andra och olika personer har olika favoriter... :)
/Thomas
Jag har mest använt zen som
Jag har mest använt zen som bas temat för mina webbplatser. Men det finns andra teman som också används i stor utsträckning.
Dessa teman är kända. Du kan besöka dem och jämför sedan själv.
Zen: https://www.drupal.org/project/zen
Omega: https://www.drupal.org/project/omega
Adaptive Theme: https://www.drupal.org/project/adaptivetheme
Fusion: https://www.drupal.org/project/fusion
Bootstrap: https://www.drupal.org/project/bootstrap
Besök dessa sidor och jämför dem. Du kan få en bättre uppfattning om vilka som ska användas.
Ok, tack! Jag har skapat min
Ok, tack!
Jag har skapat min sida på egen hand, så för mig återstår då endast att ... göra vad? Är Zen det enda alternativet?
Hej Arbetar mycket med Omega
Hej
Arbetar mycket med Omega temat som jag gillar. Där kan du i temats gränssnitt ställa in en del saker. Finns även bra tutorials på temat. I grunden så finns det olika css filer som läses av beroende på skärmstorlek. Enklast här om du kör mobile first som designtanke.
En annan variant är att köra themekey och ladda olika teman beroende på skärmstorlek. Problemet är att du får 2 teman att underhålla men vissa gillar den varianten.
Om du med "Jag har skapat min
Om du med "Jag har skapat min sida på egen hand" menar att du skapat ett eget tema, så återstår ganska lite arbete för att göra sidan responsiv.
Det kortfattade svaret är att du bör söka på @media Rule. Om du vill byta ordning på utskriften, tex att content ska komma före first sidebar så kan du söka på display:table med lite kombinationer kring responsive osv. Dessutom måste du hantera viewport.
Det långa svaret är att du måste göra en egen analys av hur du vill att sidan ska se ut för dina olika användarfall. Visa respekt för din publik och fundera vilka de är och vad de vill ha ut av din webbplats.
Jag gissar att om du har byggt din sida för pc/desktop så har du antagit att huvudparten av dina användare sitter bakom en pc. Vilka användare har du då bakom en mobil? Samma, fast de är ute på stan, eller en ny publik? Om det är 'samma' så kanske du ska satsa på en kompakt design som gör det lätt att navigera på sajten (jmfr mobil epost). Om det är en ny publik kanske du ska ha en evighetslång scrollning som gör rättvisa åt innehållet (jmf dagstidningar).
Adaptive theme i kombination med panels är min favorit
Efter ha använt Omega samt en del andra teman så har jag fastnat för http://www.drupal.org/project/adaptivetheme (AT), och när man kör "Panels Everywhere" så finns ett färdigt sub-tema som heter "AT_Panels_Everywhere"
Nu till din fråga!
AT använder http://www.drupal.org/project/browscap för att idenfiera enheten som surfar. (med Browscap ctools för panels eller Browscap Block för teman utan panels)
Bland inställningarna från temat, eller sub-temat, så kan du ställa HUR olika enheter ska se ut- massor av alternativ finns.
Du får alltså en färdig lösning för fem olika alternativ: 2st-Telefon; (porträtt/landskaps-vy), 2st för Läsplattor (Landskap/porträtt) samt en för dator. Temat växlar alltså utseendet helt automatiskt för de olika enheterna som besökarna använder.
Eftersom varje vy har en egen css i temat så kan du enkelt skräddarsy egna idéer på utseende genom att editera dem via ett sub-tema.
Nackdel: browscap skapar ganska stora mängder i databasen
Fördel: Allt färdigt - tuta och kör ( men läs instruktionerna för temat först)
// Göran