Permalänk

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
Visa signatur

Computer: Windows 10, 64-bit, Intel i9 - 10850K, Asus Rog MAXIMUS XII HERO (WI-FI), 32GB RAM, Asus RTX3070

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

Permalänk
Medlem

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.

Permalänk

Jaja Men ack så viktig skillnad!

Visa signatur

Computer: Windows 10, 64-bit, Intel i9 - 10850K, Asus Rog MAXIMUS XII HERO (WI-FI), 32GB RAM, Asus RTX3070

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

Permalänk
Medlem

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/

Permalänk
Medlem

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.

Permalänk
Medlem

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.

Permalänk

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!?

Visa signatur

Computer: Windows 10, 64-bit, Intel i9 - 10850K, Asus Rog MAXIMUS XII HERO (WI-FI), 32GB RAM, Asus RTX3070

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

Permalänk
Avstängd
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

Visa signatur
Permalänk

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?!

Visa signatur

Computer: Windows 10, 64-bit, Intel i9 - 10850K, Asus Rog MAXIMUS XII HERO (WI-FI), 32GB RAM, Asus RTX3070

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

Permalänk
Medlem
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).

Permalänk
Medlem

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

Visa signatur

Corsair A850W
Intel I7-7700K Kaby Lake
Asus Z270H GAMING
16 gb RAM
msi 3080 suprim x

Permalänk
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

Visa signatur

Computer: Windows 10, 64-bit, Intel i9 - 10850K, Asus Rog MAXIMUS XII HERO (WI-FI), 32GB RAM, Asus RTX3070

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

Permalänk
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 !

Visa signatur

Computer: Windows 10, 64-bit, Intel i9 - 10850K, Asus Rog MAXIMUS XII HERO (WI-FI), 32GB RAM, Asus RTX3070

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

Permalänk
Medlem
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

Visa signatur

Corsair A850W
Intel I7-7700K Kaby Lake
Asus Z270H GAMING
16 gb RAM
msi 3080 suprim x

Permalänk
Skrivet av oqvist:

Vi håller alltså med varandra med andra ord

Absolut

Visa signatur

Computer: Windows 10, 64-bit, Intel i9 - 10850K, Asus Rog MAXIMUS XII HERO (WI-FI), 32GB RAM, Asus RTX3070

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

Permalänk
Medlem

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 /* }

Visa signatur

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

Permalänk
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

Visa signatur

Computer: Windows 10, 64-bit, Intel i9 - 10850K, Asus Rog MAXIMUS XII HERO (WI-FI), 32GB RAM, Asus RTX3070

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

Permalänk
Medlem

.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/

Visa signatur

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

Permalänk
Medlem
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

Permalänk
Medlem
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.

Visa signatur

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

Permalänk
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

Visa signatur

Computer: Windows 10, 64-bit, Intel i9 - 10850K, Asus Rog MAXIMUS XII HERO (WI-FI), 32GB RAM, Asus RTX3070

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

Permalänk

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

Visa signatur

Computer: Windows 10, 64-bit, Intel i9 - 10850K, Asus Rog MAXIMUS XII HERO (WI-FI), 32GB RAM, Asus RTX3070

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

Permalänk
Medlem
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?

Visa signatur

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

Permalänk
Medlem

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!

Permalänk
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?

Visa signatur

Computer: Windows 10, 64-bit, Intel i9 - 10850K, Asus Rog MAXIMUS XII HERO (WI-FI), 32GB RAM, Asus RTX3070

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

Permalänk
Inaktiv
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%;} }

Permalänk
Medlem

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?

Visa signatur

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

Permalänk
Medlem

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.

Visa signatur

Arch - Makepkg, not war -||- Gigabyte X570 Aorus Master -||- GSkill 64GiB DDR4 14-14-15-35-1T 3600Mhz -||- AMD 5900x-||- Gigabyte RX6900XT -||- 2x Adata XPG sx8200 Pro 1TB -||- EVGA G2 750W -||- Corsair 570x -||- O2+ODAC-||- Sennheiser HD-650 -|| Boycott EA,2K,Activision,Ubisoft,WB,EGS
Arch Linux, one hell of a distribution.

Permalänk
Medlem

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.

Visa signatur

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

Permalänk

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

Visa signatur

Computer: Windows 10, 64-bit, Intel i9 - 10850K, Asus Rog MAXIMUS XII HERO (WI-FI), 32GB RAM, Asus RTX3070

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