Avatar billede Herman Praktikant
02. september 2023 - 10:34 Der er 5 kommentarer

Kan min hjemmeside vises ordentligt på en mobil?

Hej jeg er ved at bygge en lille hjemmeside. Jeg er lidt ny på wordpress, som jeg har fået anbefalet af familie og venner. Jeg læste lige at langt de fleste, jo browser på deres mobil, og derfor vil jeg gerne have min hjemmside også ser godt ud på en mobil. Sker det helt automatisk - eller skal man gøre noget særligt her? Når jeg selv kigger på min hjemmeside på mobilen, så synes jeg egentlig det ser meget godt ud. Men jeg har ikke rigtig gjort noget. Det drejer sig om: https://hermanogfruditte.dk/.

Som sagt ser det umiddelbart fint ud. Skal man bare stole på det?

Det er også fordi jeg har lavet min hjemmeside i to kolonner på PC'en, og de to kolonner kan jo ikke rigtig være der på mobilen.
Det er som om det ser anderledes ud på mobil. Hvordan styrer jeg, hvordan det skal se ud? På computeren står det i to kolonner mens det på mobilen kommer i en lang smøre, men jeg vil egentlig gerne have det til at stå i kolonner, hvis det kan lade sig gøre. Dbh Herman
Avatar billede Slettet bruger
02. september 2023 - 11:49 #1
Lige udmiddelbart ser det fint ud via mobilen.

Det er godt, at du bruger WordPress, fordi det har mange temaer og plugins, der kan gøre din hjemmeside responsiv. Det betyder, at din hjemmeside automatisk tilpasser sig til forskellige skærmstørrelser og enheder.

Men du kan også gøre nogle ting selv for at forbedre din hjemmesides udseende og brugervenlighed på mobilen. Her er nogle tips:

Brug en zoom-faktor på 100% i din browser, så din hjemmeside ikke bliver for lille eller for stor på mobilen (1).
Brug flydende elementer i dit design, så de kan skifte størrelse og placering afhængigt af skærmen (1). For eksempel kan du bruge procentværdier i stedet for faste pixelværdier til at angive bredden og højden af dine elementer.
Optimer dine billeder, så de ikke er for store eller for tunge at indlæse på mobilen (1). Du kan bruge plugins som Smush eller EWWW Image Optimizer til at komprimere og ændre størrelsen på dine billeder automatisk.
Brug design-specifikke breakpoints til at ændre dit layout på forskellige skærmstørrelser (1). For eksempel kan du bruge media queries i CSS til at vise eller skjule visse elementer eller ændre deres stil på mobilen. Du kan også bruge plugins som Elementor eller Beaver Builder til at oprette forskellige versioner af dit design til forskellige enheder.
Brug responsiv menu, så dine besøgende nemt kan navigere på din hjemmeside på mobilen (1). Du kan bruge plugins som Responsive Menu eller WP Mobile Menu til at oprette en mobilvenlig menu, der kan foldes ud eller ind.
Du kan finde flere oplysninger om, hvordan du gør din WordPress-hjemmeside responsiv, i disse artikler:

How to Make A WordPress Site Mobile Responsive - WP Engine (1)
https://wpengine.com/resources/mobile-responsive-wordpress-sites/

Responsive Website Design: Tips for a Better User Experience - Go WordPress (2)
https://wordpress.com/go/web-design/responsive-website-design/

44 Best Responsive WordPress Themes (2023) - WPBeginner (3)
https://www.wpbeginner.com/showcase/best-responsive-wordpress-themes/

Responsive – WordPress theme | WordPress.org (4)
https://wordpress.org/themes/responsive/

Jeg håber, det hjælper dig med at gøre din hjemmeside mere mobilvenlig. Hvis du har flere spørgsmål, så tror jeg gerne andre kan bidrage noget bedre.👍 Jeg hopper af her 🙃
Avatar billede Herman Praktikant
02. september 2023 - 13:39 #2
Megafedt, Jørgen. Tak for den store hjælp. Jeg dykker ned i det

Mvh Herman
Avatar billede bvirk Guru
03. september 2023 - 19:20 #3
Spugte for nyeligt en multimedia designer om han designede så det kunne bruges på alle mobiler. Han startede med at designe så det kunne gøre så på den mobil med mindste skærm og bevægede sig så opad mod telefoner med større skærme for tilsidst at designe så det kunne gøre sig på pc (hvad der heller ikke er entydigt)
I chrome på pc kan man vælge mobil - sikkert også i andre browsere.
Avatar billede a3-seo.dk Ekspert
11. december 2023 - 05:51 #4
Din hjemmeside er helt fin på mobil, dog med et par undtagelser, nævnes nederst.

Dit tema "Avia" er lavet så de 2 kolonner vises efter hinanden på mobil, det er fint. Blev de vist som 2 kolonner på mobil, ville det blive noget "gnideri", ikke alle har en storskærm på mobil, så det ville give helt andre problemer som tekststørrelse osv. osv.

Vedr. mobilvisning af forsiden kunne du med fordel gøre billedet mindre (kun på mobil), således at du får titlen med i første visning.

Det gør du ved at tilføje "Ekstra CSS" som dette:

---------------------------------------------
@media (max-width: 450px) {
.avia-slideshow li img {
    width: 70% !important;
  }
body .unit.alpha, body .units.alpha, body div .first {
padding-top: 0;}
ul.avia-slideshow-inner {
    height: 320px !important;
}
}
----------------------------
70% og de 320px, kan du så selv lege med ;-)

MEN du kunne også beskære billedet i toppen "Kappe vindues lysningen" lidt over dit hoved ...
Avatar billede a3-seo.dk Ekspert
11. december 2023 - 06:10 #5
Forøvrigt bør den viste CSS kun påvirke forsiden, så den skal være således istedet:
________________________________________
@media (max-width: 450px) {
.page-id-1246 .avia-slideshow li img {
    width: 70% !important;
  }
body .unit.alpha, body .units.alpha, body div .first {
padding-top: 0;}
ul.avia-slideshow-inner {
    height: 320px !important;
}
}
----------------------------
70% og de 320px, kan du stadigt selv lege med ;-)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Kurser inden for grundlæggende programmering

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester