Utredning: Responsiv webbdesign (RWD)
|
|
- Lars-Göran Samuelsson
- för 8 år sedan
- Visningar:
Transkript
1 Utredning: Responsiv webbdesign Sida 1 (8) Utredning: Responsiv webbdesign (RWD) Förbehåll Denna utredning fokuserar på det som är närmast relaterat till responsiv webbdesign. Med andra ord kommer inte webbstrategiska ämnen som URL strategi, CMS tekniska egenheter och innehållsstrategiska val med mera att tas upp. Bakgrund, nuläge och slutsats Bakgrund När sajten designades senast var det få som använde något annat än en dator till att surfa på webben. Som så många andra valde man då att optimera webbplatsen efter vad som ansågs vara minsta troliga skärmstorlek, dåtidens referensutrustning, vilket hamnade på minst 14 tumsskärm och horisontell upplösning om 1024 bildpunkter. På detta sätt gjordes webbplatsen användbar för så många som möjligt. Nuläge Sedan 2007 har användandet av mobila enheter ökat till en nivå att det inte går att ignorera längre. När en liten skärm tidigare var 14 tum kan den idag vara 3 tum, se bilden intill, dessutom ofta stående på högkant. Många surfar också på webben via surfplattor vilket inte är fullt lika problematiskt som med en mobiltelefon, åtminstone inte så länge som skärmstorleken är runt 10 tum. Andelen mobila besökare på flertalet av regionens publika webbplatser är runt 15 %, mätt första kvartalet 2013 enligt webbanalysverktyget Piwik. Statistiken tyder på att majoriteten av besökarna är regionanställda vilket ger en icke representativ bild av att omvärlden använder Windows XP och Internet Explorer. Dock är det värt att komma ihåg att det är olika brådskande med en responsiv redesign på olika webbplatser. De webbplatser som primärt vänder sig till privatpersoner är troligen mer brådskande än de där besökaren i stor grad sitter vid en stationär dator på en arbetsplats. Samtidigt skrämmer man bort mobilsurfare genom att inte möta deras behov. Ett annat exempel är webbplatsen 1177.se som vänder sig huvudsakligen till allmänheten med råd om vård och hälsa se hade för Q cirka 50 % av sina besökare på en mobil enhet.
2 Utredning: Responsiv webbdesign Sida 2 (8) Trenden går tveklöst mot att det blir allt vanligare, om inte det normala, att använda en mobil enhet när man surfar på webben. Problematisering Sedan säkert 10 år har olika tekniker testats för att göra bättre mobila upplevelser. Sedan de moderna, smarta, telefonernas intåg är det återigen lämpligast att använda gammal beprövad webbteknik som HTML, Javascript och stilmallar. Idag är frågan mer om man ska bygga en specialiserad mobilwebb bredvid den vanliga webbplatsen, eller om den vanliga webbplatsen ska klara av att hantera alla sorters enheter en besökare kan ha. Bland dessa finns skärmar små som armbandsur, mobiltelefoner, surfplattor, upp till bärbara och stationära datorer, spelkonsoler som körs på tv eller projektor över en hel vägg. Storleken på de mindre skärmarna i kombination med deras upplösning gör att text ofta inte går att läsa utan att zooma oavsett hur god syn man har. Zoomar man in i sidan försvinner istället översikten och besökaren tappar orienteringen. Se exempel nedan på hur det ser ut på de mindre surfplattorna som blir allt mer populära. Under 2013 är drygt hälften av de sålda surfplattorna mindre än 8 tum enligt prognoser. Nexus 7 första generationen Apple ipad Mini första generationen Stående format Stående format
3 Utredning: Responsiv webbdesign Sida 3 (8) Liggande format Liggande format Skillnad mellan responsiv och icke-responsiv webbplats i en mobiltelefon Nedan finns tre exempel på webbplatser och hur de kan se ut i exempelvis iphone 4/4S. Längst till vänster vgregion.se, som inte är responsiv, är svår att snabbt få en uppfattning om, design som bland annat menyn bryts sönder till flera rader med mera. Varmland.se i mitten är en väsentligt mindre webbplats som är responsiv där man snabbt får en överblick kring vad som erbjuds via länkar och ikoner. Lulea.se till höger är en responsiv webbplats med mer komplicerad navigering vilket de löst genom den orangea ytan med huvudmenyn. Luleås design stödjer flera nivåer av navigering på ett sätt som kan vara värt att inspireras av. Den kanske mest avgörande skillnaden är att de responsiva webbplatserna är läsbara, visar prioriterat innehåll på den lilla ytan och att navigeringen fungerar smidigt med touchskärm. vgregion.se i iphone 4 varmland.se i iphone 4 lulea.se i iphone 4
4 Utredning: Responsiv webbdesign Sida 4 (8) Grovt förenklat är det mest strategiskt att göra en responsiv webbplats för alla som inte bedriver ehandel på publika webben. Anledningen till att de som bedriver ehandel kan ha nytta av olika webbplatser för de viktigaste typerna av enheterna är för att det är lättare att jobba mätbart genom att utvärdera det ekonomiska resultatet per typ av enhet. Denna uppenbara måttstock finns inte för de som erbjuder information, e tjänster och dylikt på webben. Genom att fokusera på att ha en webbplats som ska fungera bra nog för alla besparar man sig en del huvudbry med att ha flera olika webbplatser att förvalta och vidareutveckla. Det en responsiv webbplats strävar efter är att vara device agnostisk, vilket rent praktiskt innebär tre saker: 1. Media queries. Brytpunkter gör att om innehållet kräver det kommer fler eller färre kolumner användas. På detta sätt modifieras utseendet för de speciella behov som finns för olika storlekar på skärmar. Det är vanligt att vissa delar av innehållet inte visas upp om det är ont om utrymme, exempelvis utsmyckningsbilder brukar ofta döljas för mobiler. 2. Kolumn/rutsystem används. Alla komponenter i designen flyter ut över tillgängligt utrymme då alla mått är relativa. Finns plats ska den användas om det tillför något. 3. Flexibla bilder. Bilders storlek sätts i relativa mått så de kan skalas upp eller ner beroende på vilket utrymme som finns tillgängligt. Utmaningen är inte bara att folk har mindre skärmar idag utan även att de mobila anslutningarna till internet skiljer sig från trådbunden uppkoppling man har på kontor och i många hem. Även de med en vanlig dator, om de ansluter via mobilt bredband, kan dra nytta av ett väl utfört jobb inom RWD. Exempelvis är det vanligt förekommande att webbplatser som skapades innan RWD slog igenom är beroende av väldigt många filer för att visas korrekt. På en mobil anslutning vill man ha så få, och samtidigt små, filer som möjligt. För den som har en skakig 3G eller EDGE anslutning kan det ta upp till flera minuter att ladda ner alla filer som krävs för att interagera med en webbplats värt att jämföra med att många jagar tiondelar av sekunder när de optimerar webbplatsers laddningstid. När och hur man använder webben är också något annorlunda idag. Att din besökare kan vara på gående fot i starkt solsken ställer nya krav på användbarheten jämfört med en ergonomiskt utformad arbetsplats med en stationär dator, stor skärm, vanligt tangentbord och en mus. Slutsats VGR bör göra sin webb responsiv och prestandaoptimera den så långt det är försvarbart. Nedan ges två alternativ på hur VGR kan sikta in sin responsiva omdaning av webben. Det första alternativet föreslår den minsta tänkbara ansträngning som är meningsfull ur en webbstrategisk synvinkel. Alternativ 2 är om man har väsentligt mycket mer resurser att avsätta, samtidigt är den ett förslag på steg 2 när man har gjort och utvärderat alternativ 1. Förslagsvis utför VGR alternativ 1 men i mån av resurser plockar med godbitar från alternativ 2.
5 Utredning: Responsiv webbdesign Sida 5 (8) Alternativ 1: Den görbara versionen av RWD Alternativ 1 siktar på det som verkligen behöver göras, men inte att fullt ut följa allt som kan anses ingå i begreppet RWD. Ambitionen är inte att bearbeta redaktionellt innehåll i någon nämnvärd utsträckning. Målet är att lösa de mest akuta problemen utan att för den skull påverka utseendet på webbplatsen för övriga. Inget ska förändras om det inte löser ett problem för mobila och surfplattebesökare. De som ska dra nytta av detta arbete är de: Med så pass låg upplösning/storlek på skärmen att nuvarande designen bryts och skapar problem. Som ansluter med en mobil uppkoppling till nätet. Mobilt bredband som Edge/3G/4G. Vanliga datoranvändare som inte låter sin webbläsare fylla hela skärmen. Med det sagt är inte kravet att en besökare med en högupplöst surfplatta på 10 tum kommer märka någon större skillnad i horisontellt läge, de med mobiltelefon är högre prioriterade. Att identifiera smärtgränsen, och att finna den mobila brytpunkten för media query, är upp till konsultens UX expertis under framtagandet i samråd med VGR. Brytpunkten ser ut att hamna i spannet 6 9 tum på testade upplösningar i horisontellt läge. Följande punkter är exempel på delar som behöver jobbas på: Införa ett modernt kolumn/gridsystem vilket ska lösa dagens designbuggar där exempelvis innehållet ibland hamnar under undermenyn. I övrigt vara grunden för en flexibel layout upp till den maximala bredd som idag finns i designen. Identifiera brytpunkten när det inte längre är användbart att ha mer än en kolumn. Snabb utvärdering om det är meningsfullt att ha fler brytpunkter än bara för desktop & mobil, vilket i så fall skulle vara en för surfplatta som inte behöver vara fullt så förenklad som den för mobil. Designa & konstruera ett nytt förenklat sidhuvud som ersätter det nuvarande vid den brytpunkt som förenklar gränssnittet, där stor vikt läggs vid: Smart disponering av utrymmet så att en undersidas unika och meningsbärande innehåll, som huvudrubrik, får en chans att synas. Kunna hantera flera nivåer i navigationen. Lösningen har på mobila enheter är värd att beakta. Att bevara igenkänningen att det är VGR som är avsändare. Designa & konstruera hur sidors innehåll ska visa sig i det förenklade gränssnittet, där fokus ligger på att: Prioritera text som innehåll framför utsmyckningsbilder. Främja läsbar text för ett mobilt användningsscenario. Tillgängligt utrymme utnyttjas maximalt väl avvägt med de marginaler som behövs mellan olika element.
6 Utredning: Responsiv webbdesign Sida 6 (8) Tillräckligt stora träffytor på länkar och knappar för att vara användbara för de med touchskärm. Generell prestanda för ett mobilt scenario ska best practice tillämpas, exempelvis: Ersätta eventuella designstöttande bilder med CSS i de fall det är riskfritt. Använda tekniken CSS sprites i rimlig utsträckning för att minimera antalet bilder att ladda ner. Planera resurser som Javascript, stilmallar och bilder för smart livslängd/cache hantering i nätverk och i webbläsare ger färre anrop då oförändrade, gemensamma eller redan hämtade filer inte skickas på nytt. Beakta Content Delivery Networks för ramverksfiler från tredje part, exempelvis jquery. Ha så få filer för stilmallar och Javascript som möjligt. Med lite god planering kan man i vissa fall slå samman dessa filer till en stilmallsfil och en Javascript fil. Se till att textbaserade resurser som HTML, stilmallar och Javascript sänds komprimerat och minimerat. Prestandadelarna är mätbara via Google PageSpeed och Yahoo YSlow. Det en gränssnittsprogrammerare kan påverka en undersida bör endast i undantagsfall ha lägre än 90 av 100 enligt PageSpeed. Inga högprioriterade, rödmarkerade, åtgärder ska finnas enligt vare sig PageSpeed eller YSlow. VGR bör inte acceptera att: Det förenklade gränssnittet förhindrar zoomning. Det krävs nya sidmallar i EPiServer eller att sidor ska behöva byta sidmall. Nya beroenden till Javascript introduceras. Nuvarande nivå av tillgänglighet försämras. Det tillkommer designramverk med CSS/Javascript. En alternativ/legacy version av sajten behöver leva parallellt för att stödja äldre webbläsare som Internet Explorer 8. Avsteg från ovan punkter behöver stämmas av med VGR:s arkitekturledningsgrupp och dokumenteras. VGR rekommenderas att ha en grupp som börjar testa tidigt, och testar ofta, för att prioritera varje iterations insatser. Denna grupp bör bestå av personer med bred erfarenhet av webbarbete. Alternativ 2: Möjlig vidareutveckling Här föreslås den nivå VGR kan välja antingen som steg 2 alternativt om man tror sig kunna dra i land ett större och mer komplicerat projekt direkt, eller möjligen som en plocklista vid varje iteration i det kontinuerliga webbarbetet. Detta alternativ gör sig som helhet väl med en översyn av innehållet, upprättandet av en mobil innehållsstrategi och etablerandet av en multifunktionell
7 Utredning: Responsiv webbdesign Sida 7 (8) bildbank. Dessa punkter är vad som kan beskrivas som bokstavstroende RWD, andra punkter vad vissa skulle kalla Adaptive Web Design och några punkter är allmän uppryckning av kvalitet. De som ska dra nytta av alternativ 2 är förutom tidigare: De besökare som vill kunna välja vilken brytpunkt de vill använda. De med högupplöst skärm. Användare som föredrar, eller primärt använder, mobila enheter för att surfa. De med relativt små skärmar, främst mobiler, ska få meningsbärande information direkt vid sidvisning. Delar att jobba med: Putsning på alternativ 1 baserat på användbarhet och översikt, bland annat: Det ska vara möjligt för besökare att välja och byta bland de brytpunkter som finns. Exempelvis låta mobilanvändare få ta del av, vad som slarvigt uttryckt kan kallas, tablet och desktop varianterna av designen. Erbjuda möjligheten att dölja utsmyckningsbilder i mobil och tablet version av designen. I de fall bilder sätts och styrs av sidmall kan detta ske för mallen, men en redaktör bör kunna välja bilder som inte behöver visas för de med mindre skärmar. Bygga bort de delar som idag är designade med behov av iframes. Istället får man lov att läsa in den informationen via API, länka direkt till den externa funktionen eller utveckla eget. Omtag kring hur navigering kan behöva kompletteras på grund av besökare med touch skärmar och ett mobilt interaktionsbeteende. Exempelvis behov av swipe sidledes på bildkaruseller då den navigeringskonventionen finns bland de som frekvent använder mobila enheter. Höja nivån av semantik på publicerad information. Följa schema.org och Microformat där det är tillämpligt, validera med Googles Structured Data Testing Tool. Exempelvis kontaktuppgifter, geografiska platser, kalenderhändelser och relationer i länkar behöver beskrivas på ett sätt som maskiner förstår. Kalenderhändelser ska exempelvis märkas upp med bland annat datum så sökmotorer får en chans att veta om det är en händelse i framtiden och var det tar plats. Högupplösta webben: Högupplösta logotyper och ikoner erbjuds för de som kan dra nytta av det. Ge, eller erbjud, högupplöst material (foto/bilder/video) till de enheter som stödjer det och har en lämplig uppkoppling. Utvärdera om moderna webbteckensnitt kan ersätta många bildbaserade ikoner/pictogram. Höja prestandakraven ytterligare för gränssnittskod och teknisk miljö, bland annat: Optimera ordningen på stilmallar och Javascript så inga onödiga, eller åtminstone
8 Utredning: Responsiv webbdesign Sida 8 (8) överdrivna, så kallade reflows sker. Inte exekvera onödig Javascript vid initial sidladdning. Sikta på minst 95 av 100 i Google PageSpeed på samtliga sidor. Pingdom för att mäta svarstider. Beroende på när alternativ 2 kan tänkas bli aktuellt är det smart att utvärdera de ingående delarna på nytt. God webbdesign är trots allt ett rörligt mål och livslängden på denna utredning är förstås begränsad. // Marcus Österberg, // Webbstrateg på VGR
Mobile First Video on demand och livesändningar på Internet. Juni 2012
Mobile First Video on demand och livesändningar på Internet Juni 2012 1 Om detta dokument Marknaden och tekniken kring film (video on demand och livesändningar) på Internet utvecklas blixtsnabbt. Video
Läs merAvancerade Webbteknologier 2. AD11g Göteborg 2012 Mobilanpassning
Avancerade Webbteknologier 2 AD11g Göteborg 2012 Mobilanpassning Idag Reality Check Strategier för mobilanpassning Problem vid mobilanpassning Exempel på några ramverk Statistik Det finns väldigt mycket
Läs merResponsiv webbplats. Tips på hur innehållet ska ses över för en bra användarupplevelse på alla skärmstorlekar 2014-02-17 1
Responsiv webbplats Tips på hur innehållet ska ses över för en bra användarupplevelse på alla skärmstorlekar 1 Vad är responsivt? Det betyder att webbplatsen känner av vilken skärmstorlek användaren surfar
Läs merLaboration 3 i kursen Produktion för tryckta medier och webb: Webbplatsproduktion med ett publiceringssystem
Laboration 3 i kursen Produktion för tryckta medier och webb: Webbplatsproduktion med ett publiceringssystem Målsättning Att bygg upp en komplett webbplats i ett publiceringssystem. Platsen ska vara snygg,
Läs merbehövs för enhetlighet, tala samma språk, så att användaren kan lära sig och använda det vidare.
1 2 3 Grafisk profil reglerar grunddragen i utseendet (logga, färger, typsnitt) en helhet skapas Vi ska känna igen oss, vi ska förstå vad som avsändaren vill kommunicera. Kan vara svårt att direkt applicera
Läs merA" utveckla kartor med responsiv design. Johan Lah8 Geografisk IT- utvecklare Stadsbyggnadskontoret, Malmö stad
A" utveckla kartor med responsiv design Johan Lah8 Geografisk IT- utvecklare Stadsbyggnadskontoret, Malmö stad Innehåll 1. Vad och varför responsiv design? 2. Hur kan det genomföras? 3. Exempel (smap)
Läs merManual Anvisningar vid annonsering på startsida i Ratsit 3.0.
Version 2.0 onsdag 12 oktober 2016 1 av 8 Manual Anvisningar vid annonsering på startsida i Ratsit 3.0. Kort beskrivning Instruktioner: Nedan finner du instruktioner kring hur du skapar wallpaper för ratsit.se.
Läs merQR-kodernas intåg för nytta och nöje!
QR-kodernas intåg för nytta och nöje! Föredrag av Stig Ottosson om smarta "självlänkande" streckkoder som vi kommer att se alltmer i framtiden. 2012-05-04 Webbvärlden ur exponeringssynpunkt till ca 2010
Läs merVälkommen till Studiekanalen.se
Välkommen till Studiekanalen.se Det här produktbladet beskriver besökarens (elevens) väg till utbildningen, hur de matchas mot rätt skola och utbildning. Det beskriver även hur utbildningsanordnaren kan
Läs merGrundläggande funktioner i CMS ifrån Argonova Systems, 2011.
Grundläggande funktioner i CMS ifrån Argonova Systems, 2011. Syfte Detta dokument tar upp grundläggande funktioner i Argonova Systems CMS i syfte att förbereda och stödja användaren, vid sidan av och inför
Läs merSju riktlinjer vid utveckling av hemsidor för mobil och desktop
Sju riktlinjer vid utveckling av hemsidor för mobil och desktop Denna artikel går igenom hur du gör en hemsida användarvänlig till både vanliga desktopdatorer och mobilanvändare utan att behöva ha två
Läs merSkillnader mellan design för tryck och webbdesign
Vad är en webbtext? Webbtexter är inte en specifik texttyp i likhet med protokoll, rapporter eller artiklar. Istället kan webbtexter vara precis vilken texttyp som helst, och det enda som förenar dem är
Läs merNext -> Next -> Finish
Next -> Next -> Finish eller? Vad bör man tänka på i samband med uppgradering till eller nyutveckling i EPiServer CMS 7? Oscar Larsson Oscar Larsson Agenda Det Leverantören här är Sogeti lovar Är det verkligen
Läs merINDIVIDUELL INLÄMNINGSUPPGIFT
INDIVIDUELL INLÄMNINGSUPPGIFT Sofia Aronsson ANVÄNDBARHET OCH GRAFISK DESIGN MIS 13, Nackademin Yrkeshögskola Lärare: Ellinor Ihlström Inledning... 3! Analys... 3! Hitta... 3! Förstå... 5! Använda... 6!
Läs merQR-kodernas intåg för nytta och nöje!
QR-kodernas intåg för nytta och nöje! Föredrag av Stig Ottosson om smarta "självlänkande" streckkoder som vi kommer att se alltmer av i framtiden. 2012-06-20 Något stort hände 2007 och 2010 2007 introducerades
Läs merKlarspråk på nätet - Webbredaktörens skrivhandbok av Karin Guldbrand & Helena Englund Hjalmarsson
Klarspråk på nätet - Webbredaktörens skrivhandbok av Karin Guldbrand & Helena Englund Hjalmarsson Klarspråk på nätet är en praktisk handbok för dig som någon gång skriver text för webb, surfplattor och
Läs merBild 1. EPiServer CMS 9.9
Bild 1 EPiServer CMS 9.9 Bild 2 Bakgrund till denna uppdatering IdrottOnline är idag världens största EPiServer lösning IdrottOnline introducerades 2007 och har sedan starten erbjudit EpiServer CMS som
Läs merRiktlinjer för navigation i mobilgränssnitt Senast uppdaterad 2014-02-21
Riktlinjer för navigation i mobilgränssnitt Senast uppdaterad 2014-02-21 Funka Nu AB Döbelnsgatan 21, 111 40 Stockholm 08-555 770 60 kontakt@funkanu.se Innehåll Inledning... 3 Bakgrund... 3 Projektupplägg...
Läs merSÅ LEVERERAR DIN WEBBPLATS VÄRDE OCH KUNDNYTTA
SÅ LEVERERAR DIN WEBBPLATS 7 steg för en bättre användarupplevelse Den externa webbplatsen är affärskritisk för de allra flesta organisationer och besökarnas krav på användarvänlighet är skyhöga. Här är
Läs merBygga kurser för mobila enheter
Bygga kurser för mobila enheter NETCOMPETENCE 2017-10-30 Innehåll Inledning... 2 Om Responsive Design och Adaptive Design... 3 Responsive Design... 3 Adaptive Design... 3 Exempel... 4 Tips och rekommendationer...
Läs merMÄRKSPRÅK OCH STILMALLAR II EXAMINATIONSUPPGIFT 2 HELENE BROGELAND
MÄRKSPRÅK OCH STILMALLAR II EXAMINATIONSUPPGIFT 2 HELENE BROGELAND 1 Innehåll Inledning... 3 Framework... 3 Val av ramverk... 3 Arbetet med Bootstrap... 4 Preprocessorer... 5 Val av preprocessor... 5 Arbetet
Läs merResponsiv Webbdesign är det framtiden?
Beteckning: Akademin för teknik och miljö Responsiv Webbdesign är det framtiden? Daniel Karlsson juni 2011 Examensarbete, 15 högskolepoäng, C Datavetenskap Datavetenskapliga programmet Examinator: Ann-Sofie
Läs merMÄRKSPRÅK OCH STILMALLAR II EXAMINATIONSUPPGIFT 1 HELENE BROGELAND
MÄRKSPRÅK OCH STILMALLAR II EXAMINATIONSUPPGIFT 1 HELENE BROGELAND 1 Innehåll Inledning... 3 Optimering av min webbportfolio... 4 Analys och dokumentation av utgångsläget... 4 Optimeringsaktiviteter...
Läs merPageSpeed Insights. (utgångsdatum har inte angetts)
PageSpeed Insights 93 / 100 Hastighet Överväg att Fixa: Utnyttja cachelagring i webbläsare När du anger ett utgångsdatum eller en högsta ålder i HTTP-rubrikerna för statiska resurser instrueras webbläsaren
Läs merVilken version av Dreamweaver använder du?
Sida 1 av 7 Lektion 1: sida 1 av 4 Till kursens framsida Sida 2 av 4» Lektion 1 Då ska vi sätta igång med den här kursens första lektion! Här kommer du att få lära dig hur man skapar och förbereder webbplatser
Läs merFrån Smart TV till Smartare upplevelse Av: Kim Huber och Connie Huanca
Från Smart TV till Smartare upplevelse Av: Kim Huber och Connie Huanca System vi undersökte Den system vi valde att undersöka var en av de senaste smart tv som finns i markanden och var nämnd till bästa
Läs merHja lp till Mina sidor
Hja lp till Mina sidor Vanliga Frågor Varför godkänner inte Mina sidor mitt personnummer trots att jag har prövat flera gånger och är säker på att jag skrivit rätt? Du behöver använda ett 12 siffrigt personnummer
Läs merSå fjärrstyr du datorn
Så fjärrstyr du datorn direkt från mobilen 7 Gör Iphone och Android till en fjärrkontroll 7 Fungerar både för Mac och pc 7 3 smarta gratistips. Så fjärrstyr du datorn direkt från mobilen Så blir mobilen
Läs merHur man lägger upp och redigerar dokument i Typo3.
Hur man lägger upp och redigerar dokument i Typo3. Typo3 är ett så kallat CMS, Content Management System där du enkelt och smidigt kan lägga ut kursinformation och bilder. Detta verktyg är webbaserat vilket
Läs merPrislista. Information. Se detaljerad info i dokumentet. Se detaljerad info i dokumentet. Se detaljerad info i dokumentet
Prislista Prislista Produkt Information Pris, SEK Kampanjsida 8.500 Nyhetsbrev 3.500 Banners 900-1200 Mobilwebapp 12.000 Logotyper 8.000-14.000 Informationswebbplats 13.500 Offertbaserade webbplatser Offertbaserade
Läs merInlämningsuppgift 2. DA156A - Introduktion till webbutveckling Teknik och samhälle, Malmö högskola Oktober 2012
Oktober 2012 Uppgiften går ut på att redovisa dina kunskaper kring JavaScript, liksom din förmåga att skapa en CSS-baserad layout. Detta gör du genom att lämna in ett resultat som följer specifikationerna
Läs merGrundläggande om sökordsoptimering Sida 1. Grundläggande om sökordsoptimering. Marcus Österberg, marcus@webbfunktion.com
Grundläggande om sökordsoptimering Sida 1 Grundläggande om sökordsoptimering Marcus Österberg, marcus@webbfunktion.com Sida 2 Innehåll: Ordlista... 3 Varför sökordsoptimering... 4 Viktiga faktorer inom
Läs merLåt datorn prata med mobilen
DET BÄSTA FRÅN BÅDA VÄRLDARNA Låt datorn prata med mobilen Skicka sms från datorn Med Pushbullet kan du skriva dina sms med datorns tangentbord. Hej Jörgen! Du får ursäkta att det här meddelandet är långt,
Läs merUppdateramera. Tio tips för en bättre webbplats. PRODUKTIONSBYRÅ AB. 1 Krokedil Produktionsbyrå AB www.krokedil.se
Uppdateramera Tio tips för en bättre webbplats. PRODUKTIONSBYRÅ AB 1 Krokedil Produktionsbyrå AB www.krokedil.se Välkommen Här har vi samlat tio grundläggande tips som hjälper dig att skapa en effektivare,
Läs merKom igång. Readyonet Lathund för enkelt admin. Logga in Skriv in adressen till din webbsida följt av /login. Exempel: www.minsajt.
Kom igång Logga in Skriv in adressen till din webbsida följt av /login. Exempel: www.minsajt.se/login Nu dyker en ruta upp på skärmen. Fyll i ditt användarnamn och lösenord och klicka på "logga in". Nu
Läs merWindows 8.1, hur gör jag?
2014 Windows 8.1, hur gör jag? Tor Stenberg Piteå Kommun 2014-03-28 1 av 13 Innehåll Hur jobbar jag med Windows 8.1... 2 Logga in... 2 Skrivbordet och programportal... 2 Logga ut och stänga datorn... 3
Läs merFrågor och svar - Diagnostisk prov ht14 - Webbutveckling 1
Frågor och svar - Diagnostisk prov ht14 - Webbutveckling 1 Bilder och optimering --- Vilken upplösning är lämplig för bilder som ska användas på Internet? Sträva efter korta nedladdningstider. 72 ppi/dpi
Läs merMetod Rapporten är baserad på egen erfarenhet av marknadsföring on-line samt studier av aktuell forskning, rapporter och webinars.
Att välja mellan native- eller webbapp Bakgrund Marknaden för smarta mobiltelefoner ökar kraftigt. Därför ser allt fler företag och organisationer behovet av att göra digitalt innehåll tillgängligt för
Läs merTillämpad programmering CASE 1: HTML. Ditt namn
Tillämpad programmering CASE 1: HTML Ditt namn 18 [HTML] Din handledare vill se din skicklighet i att använda HTML-koden. Du ska utveckla en webbplats om ditt intresse, inriktning eller gymnasiearbete.
Läs merRapport: 2012 Mobilens år!
1 (9) Rapport: 2012 Mobilens år! Innehåll OM UNDERSÖKNINGEN... 1 MOBILWEBB... 1 NULÄGE... 2 PLANER FÖR 2012... 3 PROGNOS - 2012 ÄR MOBILENS ÅR!... 6 ATT TÄNKA PÅ!... 7 OM WEB SERVICE AWARD... 9 KONTAKT...
Läs merUndervisningen i ämnet webbutveckling ska ge eleverna förutsättningar att utveckla följande:
WEBBUTVECKLING Ämnet webbutveckling behandlar de tekniker som används för att presentera och bearbeta information i webbläsaren samt utifrån dessa tekniker skapa och vidareutveckla statiska och dynamiska
Läs merSnabbstart för Novell Vibe Mobile
Snabbstart för Novell Vibe Mobile Mars 2015 Komma igång Mobil tillgång till Novell Vibe-webbplatsen kan inaktiveras av din Vibe-administratör. Om du inte kan använda Vibemobilgränssnittet enligt beskrivningen
Läs merProgramportalen på Falkenbergs kommun
Programportalen på Falkenbergs kommun Många av kommunens program finns tillgängliga via Falkenbergs kommuns programportal. Den kallas även ibland för Citrix. Med hjälp av denna kan du köra program fast
Läs merHur jag arbetar med min dator del 2
Hur jag arbetar med min dator del 2 VÄRSTA OREDAN!? Bildbiblioteket!? Mailens brevlådor!? Namnge och/eller tagga bilderna GMAIL OUTLOOK SÖKA OCH HITTA Hur söker jag efter något? I min dator Windows sök
Läs merIkon Menyalternativ Funktion och beskrivning Sök och ersätt text i arbetsfältet. Ramformatering
Innehåll Redigeringsverktyget... 3 Hantera bilder... 5 Infoga pdf-fil... 5 Lägg till mall... 6 Infoga YouTube-klipp... 6 Infoga länk... 7 Infoga tabell... 8 Kodupprensning... 10 CSS-klass... 10 Egna anteckningar:...
Läs merOn-line produktion TDDC61
On-line produktion TDDC61 Sök till Legionen! Förra gången MuddyCards PHP Lab 4. Agenda Webbtermer och annat som är bra att veta Bildoptimering Javascript jquery Portfolio Avstämning kurs. Webbsida Webbsida
Läs merInstruktioner. Innehåll: 1. Vad är Kimsoft Control (SIDA 2) 3. Hem (SIDA 2)
1 Instruktioner Innehåll: 1. Vad är Kimsoft Control (SIDA 2) 2. Logga in (SIDA 2) 3. Hem (SIDA 2) 4. Skapa/redigera sidor (SIDA 3) 41. Lägg till ny sida (SIDA 3) 42. Avancerat (SIDA 4) 5. Texteditor (SIDA
Läs merGrafisk profil för digitala gränssnitt MAJ 2019
Grafisk profil för digitala gränssnitt MAJ 2019 GRAFISK PROFIL FÖR DIGITALA GRÄNSSNITT Inledning Den här grafiska profilen för digitala gränssnitt innehåller riktlinjer för hur Umeå kommuns e-tjänster
Läs merKonsultprofil. Per Norgren (1983) Arkitekt & webbutvecklare
Konsultprofil Per Norgren (1983) Arkitekt & webbutvecklare Per Norgren är arkitekt och webbutvecklare som främst är inriktad på Mircosofts.Net-ramverk och EPiServer. Han har arbetat i branschen sedan 2007
Läs merOneDrive för företag hos Svenska Brukshundklubben
OneDrive för företag hos Svenska Brukshundklubben Instruktion för OneDrive för företag Författare Thomas Holmén Version TH20170510:001 Målgrupp Kanslipersonal, FS, Utskott Datum 2017-05-10 Sammanfattning
Läs merKort om World Wide Web (webben)
KAPITEL 1 Grunder I det här kapitlet ska jag gå igenom allmänt om vad Internet är och vad som krävs för att skapa en hemsida. Plus lite annat smått och gott som är bra att känna till innan vi kör igång.
Läs merSammanställning. Innehållsförteckning. för ledare
för ledare Sammanställning Denna guide avser att hjälpa dig som ledare att administrera dina grupp(er) i MyClub. Allt som görs i MyClub är webbaserat vilket innebär att du kan sköta all administrering
Läs merResponsive web design
IT 12 069 Examensarbete 30 hp December 2012 Responsive web design En studie i hur designkonceptet påverkar användbarheten hos en webbplats Sara Ingmar Institutionen för informationsteknologi Department
Läs merAnvändarmanual. Meetings 1.5
Användarmanual Meetings 1.5 Revisionsnummer: 1 Dokumentnamn: FormPipe Meetings 1.5 - Användarmanual ipad Datum: 2013-12-05 Formpipe Software AB. All rights reserved. 2 (23) Innehållsförteckning 1 INLEDNING...
Läs merFoto: Björn Abelin, Plainpicture, Folio bildbyrå Illustrationer: Gandini Forma Tryck: Danagårds Grafiska, 2009
Om trådlösa nät 2 Foto: Björn Abelin, Plainpicture, Folio bildbyrå Illustrationer: Gandini Forma Tryck: Danagårds Grafiska, 2009 Om trådlösa nät Trådlösa nät för uppkoppling mot Internet är vanliga både
Läs merManual HSB Webb brf 2004 03 23
NYHETER Manual HSB Webb brf 2004 03 23 Nu kan man sätta en hemavdelning på ett arbetsflöde, så att det bara blir synligt från den avdelningen och nedåt i strukturen under en förening. Ett arbetsflöde blir
Läs merPP7Mobile User s Guide
PP7Mobile User s Guide PP7 Mobile är en del i PP7s produktserie och är beroende av PP7 Pro Desktop för att fungera. Modulen är optimerad för användning på mobiltelefon och/eller tablet. För användning
Läs merEPiSERVER 7.5. För nybörjare. Krister Holm - Kommunikationsavdelningen Uppdaterad 1 juli 2014
EPiSERVER 7.5 För nybörjare Krister Holm - Kommunikationsavdelningen Uppdaterad 1 juli 2014 1 Vad är nytt? Höger musknapp används inte. Ett nytt sätt att arbeta. Nytt utseende. Responsiv design. Det vill
Läs merLägga till bild i e- handeln
Lägga till bild i e- handeln INNEHÅLL 1 LÄGGA TILL BILD I E-HANDELN... 3 2 LÄGGA TILL BILD PÅ PRODUKT... 3 3 LÄGGA TILL BILD PÅ KURS... 4 4 LÄGGA TILL BILD I TIDMALLEN... 6 5 SKAPA URL TILL BILD... 7 5.1
Läs merAnvändarhandledning. edwise Webbläsarinställningar 2013-01-11
Användarhandledning edwise Webbläsarinställningar 2013-01-11 Sida 2/14 Innehållsförteckning 1 Webbläsarinställningar... 3 1.1 Internet Explorer Kompatibilitetsläge... 3 1.1.1 Inställningar för kompatibilitetsvyn...
Läs merHur du gör ditt Gilles hemsida - en liten hjälp på vägen
Hur du gör ditt Gilles hemsida - en liten hjälp på vägen Sidan 2 - Logga in Sidan 3 - Uppbyggnad av en sida Sidan 4 - Infoga länk Sidan 5 - Infoga bilaga Sidan 6 - Infoga bild Sidan 7-8 Vad betyder knapparna
Läs merCopy Cat Laboration 4
Laborationsanvisning Copy Cat Laboration 4 Författare: Johan Leitet Version: 1 Datum: 2011-09-19 Inledning Vi kommer på denna laboration fortsätta med CSS och nu finslipa vår sida. Du kommer även att få
Läs merE-POSTBAROMETERN 2013
E-POSTBAROMETERN 2013 E-post i mobila enheter Så skapar och designar du e-post som ger resultat i en mobil värld. Ta del av undersökningsresultat och aktuell statistik. Creating e-mail success Hej! Den
Läs merhttp://office.microsoft.com/sv-se/word/ha100444731053.aspx
1. Öppna Word 2007 i 97-2003 2. Vilken Explorer har jag 3. Inloggning med Explorer 8 4. Sökväg till sidan 5. Ha två fönster öppna 6. Stilar 7. Storleksändra 8. Inklistring av text 9. Bilder till startsidan
Läs merPRESENTATION AV DESIGN OCH OFFERT
PRESENTATION AV DESIGN OCH OFFERT LICHRON BAKGRUND Via kravspec har Lichron klargjort att man önskar en ny webbplats som presenterar Lichronbolagen - Lichron AB som arbetar med försäljning av maskiner
Läs merOanade möjligheter. Oanade möjligheter är ett initiativ skapat av Sparbankernas Riksförbund och Svenska Bankföreningen
Oanade möjligheter www.oanade-möjligheter.se Oanade möjligheter är ett initiativ skapat av Sparbankernas Riksförbund och Svenska Bankföreningen En sajt som involverar och väcker nyfikenhet kring digitala
Läs merSkapa epublikationer för Webben & Mobila Enheter
emag PRODUKTION Skapa epublikationer för Webben & Mobila Enheter Med emag kan du omvandla statiska PDF-dokument till interaktiva on-linepublikationer för vanliga webbläsare och mobila enheter, och detta
Läs merAtt arbeta med. Müfit Kiper
Att arbeta med Müfit Kiper Att skriva nya inlägg Alla inlägg som är postade visas i kronologisk ordning, det vill säga det senast postade inlägget kommer visas först om inget annat angetts i temafilerna.
Läs merManual till publiceringsverktyg
Manual till publiceringsverktyg Allmänt När man har loggat in hamnar man direkt på översikten över hela webbplatsen. Överst hittar man en meny som alltid ligger med i verktyget. Denna meny innehåller översikten
Läs merSäkerhetskopiera mobilen
Säkerhetskopiera mobilen gratis och helautomatiskt 7 Bästa gratistipsen 7 För Android, Iphone och Windows Phone 7 Säkerhetskopiera till Dropbox. Så fixar du automatisk säkerhetskopiering av mobilen Visst
Läs merFöreningarnas nya sidmall. Version 4, 12.4.2016
Föreningarnas nya sidmall Version 4, 12.4.2016 Innehållsförteckning Föreningarnas nya sidmall... 1 Introduktion... 3 Sammanfattning... 3 Sidmallar och sidornas uppbyggnad... 4 Gamla sidmallen... 4 Nya
Läs merSå skapar du fler affärer på nätet
Så skapar du fler affärer på nätet Så skapar du fler affärer på nätet Sökmotoroptimeringens grunder Kunskapen som gör att ni kan börja arbeta med er synlighet redan idag. Det mobila söket växer Faktorer
Läs merBiometria Violweb. Kom-igång-guide. Mars Sammanfattning Den här anvisningen är till för dig som ska börja använda dig av Biometrias tjänster.
Violweb Kom-igång-guide Mars 2019 Sammanfattning Den här anvisningen är till för dig som ska börja använda dig av s tjänster. Innehållsförteckning Systemkrav... 2 Administratörsrättigheter... 3 Hur vet
Läs merRapport: 2012 Mobilens år även inom den offentliga sektorn?
1 (7) Rapport: 2012 Mobilens år även inom den offentliga sektorn? OM UNDERSÖKNINGEN Undersöknings- och analysföretaget Web Service Award genomför årligen sedan 2006 en trendundersökning under januari månad.
Läs merVilka trender kommer att vara viktiga för din business under 2011
Vilka trender kommer att vara viktiga för din business under 2011 Av Alice Christensson/ BarfotaChefen BarfotaChefen Häng på innovationerna För dina konsumenter är det viktigt med innovationer. Apples
Läs merSida 1 av 13. Standardwebben. Användarguide för standardwebben. Limepark AB Telefon (växel)
Sida 1 av 13 Standardwebben Användarguide för standardwebben Sida 2 av 13 Grundläggande uppsättning av en ny webbplats utifrån standardwebben Export/import Logotyp i sidhuvudet Färgschema Adresser Adressompekningar
Läs merEtiska regler för sökmarknadsföring via sökmotoroptiering
Etiska regler för sökmarknadsföring via sökmotoroptiering Innehåll Etiska regler för sökmarknadsföring via sökmotoroptimering 2 1. Syfte och tillämplighet 3 2. Definitioner 3 3. Allmänna bestämmelser 3
Läs merMANUAL FÖR JÄGAREFÖRBUNDETS KRETSAR
MANUAL FÖR JÄGAREFÖRBUNDETS KRETSAR I följande dokument hittar ni information om hur ni administrerar er nya hemsida. Manualen går endast igenom grundläggande administration. För mer avancerad redigering
Läs merFöreningarnas nya sidmall
Föreningarnas nya sidmall Innehållsförteckning Föreningarnas nya sidmall... 1 Introduktion... 2 Sammanfattning... 2 Sidmallar och sidornas uppbyggnad... 3 Gamla sidmallen... 3 Nya sidmallen... 4 Hur sidmallsuppdateringen
Läs merIntroduktion. Skriv in användarnamn och lösenord
LATHUND Introduktion Välkommen till vår interaktiva kursportal. Detta är en lathund för dig som ska utbilda dig med hjälp av ipoint-kurser. Instruktionerna gäller när du har Internet Explorer med Windows
Läs merOn-line produktion TDDC61
On-line produktion TDDC61 Förra veckan Kursupplägg HTML FTP Validering Laboration 1. Deadlines Laborationer: 12/10, kl 08 Lämna in efterhand ni blir färdiga Vi rättar inom 4 arbetsdagar Portfolio, tillfälle
Läs merLärarhandledning. Felix börjar skolan
Lärarhandledning för Felix börjar skolan Felixonline är en digital anpassning av barnboksserien Felix börjar skolan utgiven av Bonnier utbildning. Syftet med läromedlet är i första hand att skapa läsupplevelse
Läs merAnvända Internet. med hjälp av Internet Explorer. Nybörjarguide
Använda Internet med hjälp av Internet Explorer Nybörjarguide Av Carl Ewnert 1 Innehåll: 1. Introduktion 3 2. Utseendet 4 3. Verktygsfältet 4 4. Börja Surfa. 5 5. Att söka på Internet 5 6. Spara en sida
Läs merDenna rutin gäller för Denna rutin gäller för samtliga verksamheter inom Sahlgrenska Universitetssjukhuset.
Doknr. i Barium Dokumentserie Giltigt fr o m Version 13006 su/adm 2017-12-01 4 Innehållsansvarig: Linda Kullenberg, IT-strateg, Kommunikationsavdelning (linku2) Godkänd av: Lars Rydhede, Personaldirektör,
Läs merwww.grade.com LUVIT LMS Quick Guide LUVIT Composer
www.grade.com LUVIT LMS Quick Guide LUVIT Composer LUVIT Composer LUVIT Composer är ett verktyg för att enkelt skapa snyggt innehåll direkt i LUVITs kurser. Verktyget innehåller designade mallar som du
Läs merMöt nya Windows. Vacker. Snabb. Dynamisk.
Möt nya Windows. Vacker. Snabb. Dynamisk. Möt de nya utgåvorna...4 Tre sätt att köpa Windows...10 Uppgradering på en befintlig dator...12 Navigera i Windows 8...14 Sälja in Windows 8...18 Möt Windows 8.
Läs merMANUAL FÖR JÄGAREFÖRBUNDETS KRETSAR
MANUAL FÖR JÄGAREFÖRBUNDETS KRETSAR I följande dokument hittar ni information om hur ni administrerar er nya hemsida. Manualen går endast igenom grundläggande administration. För mer avancerad redigering
Läs merPageSpeed Insights. Ta bort JavaScript- och CSS-kod som blockerar renderingen från innehåll ovanför mitten
PageSpeed Insights 64 / 100 Hastighet Bör Fixas: Ta bort JavaScript- och CSS-kod som blockerar renderingen från innehåll ovanför mitten Det finns 12 skriptresurser och 10 CSS-resurser som blockerar renderingen
Läs merProjektanvisning. Webbsideprojekt. Författare: Johan Leitet Version: 2 Datum: 2012-10-09
Projektanvisning Webbsideprojekt Författare: Johan Leitet Version: 2 Datum: 2012-10-09 Inledning Du har nu under ett antal laborationer i webbteknik fått relativt styrda uppgifter där du ensam fått lösa
Läs merFöljande frågor handlar om digitala medier och digital utrustning så som stationära och bärbara datorer, smarttelefoner, surfplattor, mobiltelefoner
Följande frågor handlar om digitala medier och digital utrustning så som stationära och bärbara datorer, smarttelefoner, surfplattor, mobiltelefoner utan internetuppkoppling, spelkonsoler och smart-tv.
Läs merGrundläggande datorkunskap
Grundläggande datorkunskap Vissa nybörjare känner sig väldigt osäkra Man kan förstora texten på skärmen genom att trycka på Ctrl + SeniorNet Lidingö 2014-11-10 Mamma får en gammal dator av sin son men
Läs merSnabbstartsguide. Visa eller växla mellan onlinekonton Klicka på ditt konto-id för att ändra inställningar eller växla mellan konton.
Snabbstartsguide Microsoft OneNote 2013 ser annorlunda ut jämfört med tidigare versioner, så vi har skapat den här guiden för att hjälpa dig minimera din inlärningskurva. Växla mellan pekskärm och mus
Läs merLaboration 2: Xhtml och CSS.
Laboration 2: Xhtml och CSS. Målsättning Att prova på grundläggande html samt att separera innehåll och utseende. Slutresultatet kommer att bli en webbplats med layout, bakgrundsbilder, minst en meny och
Läs merSå får du Microsofts Office-paket gratis
Så får du Microsofts Office-paket gratis 7 Kör Word, Excel, Powerpoint och Onenote i webbläsaren 7 Dela dina dokument 7 För dator, mobil och platta. Kom igång med Microsoft Skydrive och Office Web Apps
Läs merMANUAL FÖR JÄGAREFÖRBUNDETS KRETSAR
MANUAL FÖR JÄGAREFÖRBUNDETS KRETSAR I följande dokument hittar ni information om hur ni administrerar er nya hemsida. Manualen går endast igenom grundläggande administration. För mer avancerad redigering
Läs merPageSpeed Insights. Att komprimera resurser med gzip eller deflate kan minska antalet byte som skickas via nätverket.
PageSpeed Insights 48 / 100 Hastighet Bör Fixas: Aktivera komprimering Att komprimera resurser med gzip eller deflate kan minska antalet byte som skickas via nätverket. Aktivera komprimering för följande
Läs merInstitutionen för datavetenskap Department of Computer and Information Science
Institutionen för datavetenskap Department of Computer and Information Science Examensarbete Design och utvärdering av anpassningsbara webbplatser: en fallstudie av Jasmin Krhan LIU-IDA/LITH-EX-G--15/008
Läs merPageSpeed Insights. Det finns 2 omdirigeringar. Omdirigeringar gör att det tar längre tid innan sidan kan läsas in.
PageSpeed Insights 56 / 100 Hastighet Bör Fixas: Undvik omdirigeringar från målsidan Det finns 2 omdirigeringar. Omdirigeringar gör att det tar längre tid innan sidan kan läsas in. Undvik omdirigeringar
Läs merWebbanalys för redaktörer. - en introduktion. Marcus Österberg, marcus.osterberg@vgregion.se
1 - en introduktion 2 Innehåll: Ordlista... 3 Vad är webbanalys?... 4 Hur fångas informationen in?... 4 Nyttan med att analysera en webbplats... 5 Eliminerade problem får din besökare att göra vad du önskar...
Läs mer