Trädvy Permalänk
Medlem
Plats
Helsingborg
Registrerad
Jan 2009

Webbutveckla - Responsiv

Hej

Vi ska göra en hemsida och min första tanke är att göra en responsivt hemsida, någon bra ide, tror jag vet svaret redan:)

Kan få det på fler sätt, enligt mig:
1.) Göra en med layout som ändras efter vad man surfar med.

2.)
Göra en mall för de olika plattformarna man surfar med och kanske för varje webbläsare? Sedan bestäms bakgrund. färger m.m. med hjälp av CSS?

Har läst en del om PHP och om funktioner och man kan göra väldigt mycket med även php. Jag har en uppfattning om att det är bättre att dela upp kod i fler filer än att ha allt i en fil?

Mvh Fredrik

Använde fel yttryck

Computer: Windows 10, 64-bit, Intel I74 4820k, Asus X79-Deluxe, 16GB RAM and Asus GTX1080

Game control: Razer Nostromo, Keyboard, Saitek Pro Flight X-56 Rhino H.O.T.A.S.

Trädvy Permalänk
Medlem
Registrerad
Nov 2010

Tror uttrycket du letar efter är "responsivt" och inte plattformsoberoende. Plattformsoberoende betyder att det skulle kunna köra på vilket system som helst. Responsivt betyder att content anpassar sig för klienten.

Trädvy Permalänk
Medlem
Plats
Helsingborg
Registrerad
Jan 2009

Jaja Men ack så viktig skillnad!

Computer: Windows 10, 64-bit, Intel I74 4820k, Asus X79-Deluxe, 16GB RAM and Asus GTX1080

Game control: Razer Nostromo, Keyboard, Saitek Pro Flight X-56 Rhino H.O.T.A.S.

Trädvy Permalänk
Medlem
Registrerad
Nov 2010

PHP kommer inte hjälpa dig göra sidan responsivt. Val av backend-programmeringsspråk påverkar bara hur du hämtar och manipulrerar data, inte hur du presenterar den. För att göra sidan responsiv vill du använda dig av något befintligt framework, exempelvis http://getbootstrap.com/

Trädvy Permalänk
Medlem
Registrerad
Jul 2011

Finns mängder CSS/JS frameworks du kan använda för att få sidan responsiv. Det mest populära är väl ändå bootstrap som ovanstående nämnde, men du har även Skeleton boilerplate, Less framework, Blueprint, gumby etc etc etc.

Bäst är väl att göra lite googlesökningar och hitta ett som du tror kommer passa ditt projekt bäst för alla ramverken är till för olika saker.

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Nov 2010

Det finns 2 typer av responsiv design.

1) Fluid - alltså att element anpassar sig i procentuell relation till fönsterstorlek.

2) Fixed - du låter brytpunkter styra hur element ska skala på olika fönsterstorlekar.

Alla ramverk jag jobbat med är fluid med brytpunkter som bestämmer hur många kolumner sajten ska ha.

Skulle rekommendera Zurb Foundation eller Skeleton istället för Bootstrap. Man ser direkt när en sajt är byggd i Bootstrap, tidigare nämnda ramverk är lite mer öppna för din egen style. Samt att markupen i Foundation är relativt enkel att lära sig och förstå.

Att ha olika style beroende av plattform skulle jag inte rekommendera, väldigt opålitligt samt att ju mindre skript som körs vid inladdning destå bättre.

| Moderkort: MSI Z87-S02 | CPU: i5 4670K @4GHz | RAM: 16GB Corsair Dominator Platinum @2400MHz | GPU: R9 280X OC 3GB | PSU: Corsair TX750 | Chassi: Fractal Design Define R4 | Mus: Steelseries Rival | Tangentbord: CM Storm QuickFire Rapid-i Brown

Trädvy Permalänk
Medlem
Plats
Helsingborg
Registrerad
Jan 2009

Hmm mycket att fundera på?

Vi har one.com och vad jag sett har dem någon typ responsiv design redan. Vad jag läst kan man glömma deras egen editor, om man ska jobba med responsiv hemsida?

Går det att lägga in ett kod element och programmera sidorna som man vill ha det. Vad dem har sagt är att one.com har bara support för php med CSS!?

Computer: Windows 10, 64-bit, Intel I74 4820k, Asus X79-Deluxe, 16GB RAM and Asus GTX1080

Game control: Razer Nostromo, Keyboard, Saitek Pro Flight X-56 Rhino H.O.T.A.S.

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Dec 2003
Skrivet av brittaan:

Skulle rekommendera Zurb Foundation eller Skeleton istället för Bootstrap. Man ser direkt när en sajt är byggd i Bootstrap, tidigare nämnda ramverk är lite mer öppna för din egen style. Samt att markupen i Foundation är relativt enkel att lära sig och förstå.

Att ha olika style beroende av plattform skulle jag inte rekommendera, väldigt opålitligt samt att ju mindre skript som körs vid inladdning destå bättre.

DU kan välja att enbart dra in grid-bitarna från Bootstrap

Trädvy Permalänk
Medlem
Plats
Helsingborg
Registrerad
Jan 2009

I början har jag kommit fram till att göra en mall för de vanligaste storlekarna: PC för 1280 + en mindre mall, mobil och surfplatta. Gemensamt för de är att formateringen styrs av css mallar!

Jag är inte så hemma på responsiv webbdesign än?!

Computer: Windows 10, 64-bit, Intel I74 4820k, Asus X79-Deluxe, 16GB RAM and Asus GTX1080

Game control: Razer Nostromo, Keyboard, Saitek Pro Flight X-56 Rhino H.O.T.A.S.

Trädvy Permalänk
Medlem
Registrerad
Jul 2011
Skrivet av freddehboy:

I början har jag kommit fram till att göra en mall för de vanligaste storlekarna: PC för 1280 + en mindre mall, mobil och surfplatta. Gemensamt för de är att formateringen styrs av css mallar!

Jag är inte så hemma på responsiv webbdesign än?!

Varför skriker du för? Du borde se över ditt användande av utropstecken.

Du bör läsa mer om webdesign och vad som skiljer språken åt. PHP är backend och styr hur servern hanterar data. CSS, HTML och JavaScript är front-end (finns även JavaScript för back-end men det är överkurs i ditt fall). Front-end läses av clienter dvs Chrome eller FireFox etc, så det är inget "servern" behöver ha stöd för.

Istället för att treva i mörker som du gör nu, börja från början. Köp en bok och börja från sidan ett eller gå igenom W3schools guider (det duger som en början).

Trädvy Permalänk
Medlem
Registrerad
Dec 2001

Skriker gör man väl lämpligast i CAPS :). ! används väl i upplysningssyfte att han använder CSS mallar.

Corsair A850W
Intel I7-7700K Kaby Lake
Asus Z270H GAMING
16 gb RAM
Palit Jetstream X 1080 ti

Trädvy Permalänk
Medlem
Plats
Helsingborg
Registrerad
Jan 2009
Skrivet av beejac:

Varför skriker du för? Du borde se över ditt användande av utropstecken.

Du bör läsa mer om webdesign och vad som skiljer språken åt. PHP är backend och styr hur servern hanterar data. CSS, HTML och JavaScript är front-end (finns även JavaScript för back-end men det är överkurs i ditt fall). Front-end läses av clienter dvs Chrome eller FireFox etc, så det är inget "servern" behöver ha stöd för.

Istället för att treva i mörker som du gör nu, börja från början. Köp en bok och börja från sidan ett eller gå igenom W3schools guider (det duger som en början).

Hmmm jag får tagga ner lite. Jag läser W3schools, väldigt bra läsning

Frågan var istället om hur vida skapandet av mallar var en bra metod vs göra en mall responsiv.

Mvh

Computer: Windows 10, 64-bit, Intel I74 4820k, Asus X79-Deluxe, 16GB RAM and Asus GTX1080

Game control: Razer Nostromo, Keyboard, Saitek Pro Flight X-56 Rhino H.O.T.A.S.

Trädvy Permalänk
Medlem
Plats
Helsingborg
Registrerad
Jan 2009
Skrivet av oqvist:

Skriker gör man väl lämpligast i CAPS :). ! används väl i upplysningssyfte att han använder CSS mallar.

Att SKRIKA är oftast med stora bokstäver. Utropstecken kan vara det också men man trycker extra mycket på en sak om man använder utrop !

Computer: Windows 10, 64-bit, Intel I74 4820k, Asus X79-Deluxe, 16GB RAM and Asus GTX1080

Game control: Razer Nostromo, Keyboard, Saitek Pro Flight X-56 Rhino H.O.T.A.S.

Trädvy Permalänk
Medlem
Registrerad
Dec 2001
Skrivet av freddehboy:

Att SKRIKA är oftast med stora bokstäver. Utropstecken kan vara det också men man trycker extra mycket på en sak om man använder utrop !

Vi håller alltså med varandra med andra ord

Corsair A850W
Intel I7-7700K Kaby Lake
Asus Z270H GAMING
16 gb RAM
Palit Jetstream X 1080 ti

Trädvy Permalänk
Medlem
Plats
Helsingborg
Registrerad
Jan 2009
Skrivet av oqvist:

Vi håller alltså med varandra med andra ord

Absolut

Computer: Windows 10, 64-bit, Intel I74 4820k, Asus X79-Deluxe, 16GB RAM and Asus GTX1080

Game control: Razer Nostromo, Keyboard, Saitek Pro Flight X-56 Rhino H.O.T.A.S.

Trädvy Permalänk
Medlem
Plats
Sundsvall
Registrerad
Dec 2006

Hur mycket kan du om HTML & CSS?
Det är det enda du behöver, och alla webbsidor på nätet använder det, eftersom.. ja, alla webbsidor byggs på HTML & CSS.

CSS styr stilen på din webbsida, och där kan du även sätta brytpunkter för olika skärmstorlekar.
Ex: När webbläsaren går under 768px bredd ändras storleken på dina element på sidan för att passa den nya skärmstorleken.

Exempel på koden:

@media all and (max-width: 768px) { */ Allt här inne träder i kraft vid denna brytpunkt/bredd /* }

Canon 70D | 2x Dell Ultrasharp 24" | i7 3770k | 16B | GTX 780

Trädvy Permalänk
Medlem
Plats
Helsingborg
Registrerad
Jan 2009
Skrivet av Florrpan:

Hur mycket kan du om HTML & CSS?
Det är det enda du behöver, och alla webbsidor på nätet använder det, eftersom.. ja, alla webbsidor byggs på HTML & CSS.

CSS styr stilen på din webbsida, och där kan du även sätta brytpunkter för olika skärmstorlekar.
Ex: När webbläsaren går under 768px bredd ändras storleken på dina element på sidan för att passa den nya skärmstorleken.

Exempel på koden:

@media all and (max-width: 768px) { */ Allt här inne träder i kraft vid denna brytpunkt/bredd /* }

Det jag kan har jag fått läsa in den senaste månaden. HTML och CSS är inte så svårt att förstå sig på

Om HTML, har jag läst guiden här på forumet och CSS läser jag på: http://www.w3schools.com bra läsning

Jag behöver en tydligare förklaring ang: http://www.w3schools.com/css/css_rwd_grid.asp

Kod och förklaring:
The columns inside a row are all floating to the left, and are therefore taken out of the flow of the page, and other elements will be placed as if the columns does not exist. To prevent this, we will add a style that clears the flow:
CSS:
.row:after {
content: "";
clear: both;
display: block;
}

Mvh Fredrik

Computer: Windows 10, 64-bit, Intel I74 4820k, Asus X79-Deluxe, 16GB RAM and Asus GTX1080

Game control: Razer Nostromo, Keyboard, Saitek Pro Flight X-56 Rhino H.O.T.A.S.

Trädvy Permalänk
Medlem
Plats
Sundsvall
Registrerad
Dec 2006

.row:after { content: ""; clear: both; display: block; }

När man använder float på ett element så "flyter" den automatiskt åt höger eller vänster. Så om du har flera element med float: left; kommer dessa lägga sig bredvid varandra. Det kan också skapa problem med att det förstör element utanför dessa flytande element. Koden ovan är till för att "inhägna" de flytande elementen innanför containern "row".

Har själv byggt ett ramverk för att lära mig, men inte blivit helt klar, du kan ta en titt på det så kanske du förstår principen. Testa även att förminska webbläsaren så ser du vad responsivt är.

http://fredrikw.se/work/grid/

Canon 70D | 2x Dell Ultrasharp 24" | i7 3770k | 16B | GTX 780

Trädvy Permalänk
Medlem
Registrerad
Feb 2009
Skrivet av Florrpan:

.row:after { content: ""; clear: both; display: block; }

När man använder float på ett element så "flyter" den automatiskt åt höger eller vänster. Så om du har flera element med float: left; kommer dessa lägga sig bredvid varandra. Det kan också skapa problem med att det förstör element utanför dessa flytande element. Koden ovan är till för att "inhägna" de flytande elementen innanför containern "row".

Har själv byggt ett ramverk för att lära mig, men inte blivit helt klar, du kan ta en titt på det så kanske du förstår principen. Testa även att förminska webbläsaren så ser du vad responsivt är.

http://fredrikw.se/work/grid/

Måste bara fråga, är det där best practice för att hålla float element innanför en div tex? Jag har alltid använt endast:

.row { overflow: auto; }

Skickades från m.sweclockers.com

Trädvy Permalänk
Medlem
Plats
Sundsvall
Registrerad
Dec 2006
Skrivet av llxt:

Måste bara fråga, är det där best practice för att hålla float element innanför en div tex? Jag har alltid använt endast:

.row { overflow: auto; }

Skickades från m.sweclockers.com

Ingen aning vad som är best practice. Har googlat en del och del kommer upp några alternativ. Tror att det kan vara kompatiblet med fler webbläsare med det andra alternativet.

Canon 70D | 2x Dell Ultrasharp 24" | i7 3770k | 16B | GTX 780

Trädvy Permalänk
Medlem
Plats
Helsingborg
Registrerad
Jan 2009
Skrivet av brittaan:

Det finns 2 typer av responsiv design.

1) Fluid - alltså att element anpassar sig i procentuell relation till fönsterstorlek.

2) Fixed - du låter brytpunkter styra hur element ska skala på olika fönsterstorlekar.

Alla ramverk jag jobbat med är fluid med brytpunkter som bestämmer hur många kolumner sajten ska ha.

Skulle rekommendera Zurb Foundation eller Skeleton istället för Bootstrap. Man ser direkt när en sajt är byggd i Bootstrap, tidigare nämnda ramverk är lite mer öppna för din egen style. Samt att markupen i Foundation är relativt enkel att lära sig och förstå.

Att ha olika style beroende av plattform skulle jag inte rekommendera, väldigt opålitligt samt att ju mindre skript som körs vid inladdning destå bättre.

Hemsidan ska också fungera med mobiler och surfplattor m.m. och tänkte anpassa hemsidan med antingen 1 eller två ovan. Varför inte båda?

Vad är det för fördel att jobba med antingen 1 eller 2? Det kanske är vilket som?

Mvh Fredrik

Computer: Windows 10, 64-bit, Intel I74 4820k, Asus X79-Deluxe, 16GB RAM and Asus GTX1080

Game control: Razer Nostromo, Keyboard, Saitek Pro Flight X-56 Rhino H.O.T.A.S.

Trädvy Permalänk
Medlem
Plats
Helsingborg
Registrerad
Jan 2009

Hej

Har nu arbetat med hemside kodning under hela hösten och det går väldigt bra
Har dock ett problem:

Har fått förtroendet att bygga upp hemsidan för föreningen/företaget där hemsidan måste fungera för mobiler också. Jag ska använda mig av brytpunkter dvs Media queries vilket fungerar på på PC men inte i min mobil.

Test sidan har: <meta name="viewport" content="width=device-width">
Mins att det är initial också. Har vart fall testat med det också dock utan resultat
Css mallen har @media …… men har testat allt utan framgång!

Behöver hjälp//
Mvh Fredrik och Gott Nytt År

Computer: Windows 10, 64-bit, Intel I74 4820k, Asus X79-Deluxe, 16GB RAM and Asus GTX1080

Game control: Razer Nostromo, Keyboard, Saitek Pro Flight X-56 Rhino H.O.T.A.S.

Trädvy Permalänk
Medlem
Plats
Sundsvall
Registrerad
Dec 2006
Skrivet av freddehboy:

Hej

Har nu arbetat med hemside kodning under hela hösten och det går väldigt bra
Har dock ett problem:

Har fått förtroendet att bygga upp hemsidan för föreningen/företaget där hemsidan måste fungera för mobiler också. Jag ska använda mig av brytpunkter dvs Media queries vilket fungerar på på PC men inte i min mobil.

Test sidan har: <meta name="viewport" content="width=device-width">
Mins att det är initial också. Har vart fall testat med det också dock utan resultat
Css mallen har @media …… men har testat allt utan framgång!

Behöver hjälp//
Mvh Fredrik och Gott Nytt År

Du får nog försöka visa vad du har gjort...
Låter som du har skrivit all kod innanför queries?

Canon 70D | 2x Dell Ultrasharp 24" | i7 3770k | 16B | GTX 780

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Aug 2006

Hej!
Låter som du är på helt rätt spår, däremot vill jag tipsa om att det finns ganska smidiga lösningar man kan använda för att skynda på processen. Jag själv gillar Bootstrap.

Prova gärna att ändra storleken på fönstret för följande exempel:
http://getbootstrap.com/examples/jumbotron/

Du har allt du behöver i källkoden, men här är en mer formell hjälp för att komma igång med bootstrap:
http://getbootstrap.com/getting-started/

Kanske kan det hjälpa dig att snabbare komma igång med responsiva webbsidor? Lycka till!

Trädvy Permalänk
Medlem
Plats
Helsingborg
Registrerad
Jan 2009
Skrivet av Florrpan:

Du får nog försöka visa vad du har gjort...
Låter som du har skrivit all kod innanför queries?

Indextest:

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width"> <! Bestämmer att jag använder teckentabellen: "UTF-8"> <meta charset="UTF-8" /> <! Hemsidenamnet på fliken i webbläsaren > <TITLE>Huvudsida</TITLE> <! Inkludera CSS mallar > <link rel='stylesheet' type='text/css' href='data/css/sidstruktur.css'> </head> <body> <div class="row"> <div class="col-12"> Test!4retfege </div> </div> </body> </html>

CSS filen:

@media (min-width: 450px) { body {background-color: black;} .col-12 {width: 50%;} }

Har provat enligt:
http://www.w3schools.com/css/css_rwd_mediaqueries.asp

Några ideer varför det inte fungerar?

Computer: Windows 10, 64-bit, Intel I74 4820k, Asus X79-Deluxe, 16GB RAM and Asus GTX1080

Game control: Razer Nostromo, Keyboard, Saitek Pro Flight X-56 Rhino H.O.T.A.S.

Trädvy Permalänk
Medlem
Plats
Lund
Registrerad
Nov 2008
Skrivet av freddehboy:

Indextest:

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width"> <! Bestämmer att jag använder teckentabellen: "UTF-8"> <meta charset="UTF-8" /> <! Hemsidenamnet på fliken i webbläsaren > <TITLE>Huvudsida</TITLE> <! Inkludera CSS mallar > <link rel='stylesheet' type='text/css' href='data/css/sidstruktur.css'> </head> <body> <div class="row"> <div class="col-12"> Test!4retfege </div> </div> </body> </html>

CSS filen:

@media (min-width: 450px) { body {background-color: black;} .col-12 {width: 50%;} }

Har provat enligt:
http://www.w3schools.com/css/css_rwd_mediaqueries.asp

Några ideer varför det inte fungerar?

Nu är jag nyvaken och tänker inte helt ok (inte fått koffein i kroppen än) men testa ändra CSS koden till

@media screen and (max-device-width: 450px) { body {background-color: black;} .col-12 {width: 50%;} }

Fractal Design XL | GeForce GTX 970 SOC | ASRock P67 Extreme4 | Samsung EVO 850 1TB SSD | Samsung 1tb hdd | Kingston HyperX 16GB 1600Mhz | Intel i7 2600K 3.4GHz (4.2OC) | Noctua NH-U9B SE2 | Fractal Design Newton R2, 1000W modulär |

"There's no such thing as real life. Only AFK."

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Maj 2004

vad är det som "inte fungerar"? det du postar fungerar som jag förväntar mig iaf; är bredden på fönstret större än 450px, så blir bakgrunden svart, samt att diven blir 50% bred (vilket iofs inte syns eftersom texten är lite kort...).

Skrivet av freddehboy:

Några ideer varför det inte fungerar?

as far as we can tell, the massacre went well...

Trädvy Permalänk
Medlem
Plats
#Archlinux
Registrerad
Jun 2007

Jag skulle kört agent detection i js och sedan applya rätt css utöver det. Nya mobiler kommer med 1920x1080 skärmar eller högre vilket gör media queries värdelösa.

Arch - Makepkg, not war -||- Asus Crosshair Hero VI -||- GSkill 16GiB DDR4 15-15-15-35-1T 3600Mhz -||- AMD 1600x @ 4.1GHz -||- nVidia MSI 970 Gaming -||- Samsung 850 Pro -||- EVEGA G2 750W -||- Corsair 570x -||- Asus Xonar Essence STX -||- Sennheiser HD-650 -||
Arch Linux, one hell of a distribution.

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Maj 2004

fast agent detection är ju inte riktigt tillförlitligt. Till exempel så säger IE på Windows Phone 8 följande;

Mozilla/5.0 (Mobile; Windows Phone 8.1; Android 4.0; ARM; Trident/7.0; Touch; rv:11.0; IEMobile/11.0; NOKIA; Lumia 520) like iPhone OS 7_0_3 Mac OS X AppleWebKit/537 (KHTML, like Gecko) Mobile Safari/537

om jag inte har fattat fel, så är det just på grund av att en del kör agent detection som man säger att man är allt, för då får man allt också...

media queries tar väl hänsyn till pixel ratio också, så den fysiska upplösningen spelar ju mindre roll, eftersom det räknas fram en "logisk" upplösning som enheten använder när den tolkar eventuella media queries.

as far as we can tell, the massacre went well...

Trädvy Permalänk
Medlem
Plats
Helsingborg
Registrerad
Jan 2009

Finn det någon tillförlitligt om inte "media queries" eller "agent detection" är värt mödan? Vilken av dessa två är mest tillförlitligast?

Hmm efter lite testande så verkar mitt gå med media..., sidans cash strulade till det

Computer: Windows 10, 64-bit, Intel I74 4820k, Asus X79-Deluxe, 16GB RAM and Asus GTX1080

Game control: Razer Nostromo, Keyboard, Saitek Pro Flight X-56 Rhino H.O.T.A.S.