Website geschikt maken voor mobiel

Status
Niet open voor verdere reacties.
Gunneweg

Gunneweg

Verenigingslid
Lid geworden
22 okt 2002
Berichten
574
Besturingssysteem
Windows 10 22H2
Ik vraag me af of er een manier is zonder dure software te moeten aanschaffen om
mijn website geschikt te maken voor mobiel.
Ik gebruik CSS website is: www.aspartaam.nl
Wil wel graag sleutelen, maar weet niet waar te beginnen.
 
Hallo Gunneweg.
Een veel gestelde vraag. In de praktijk is het meestal beter (en sneller) om de layout opnieuw op te zetten. Je kunt deze dan gelijk waar nodig aanpassen aan html5 en css3.
Ik gebruik zelf tegenwoordig Bootstrap voor responisve mobile-first websites. Hiervoor kun je op internet veel info en voorbeelden vinden. Je zou kunnen starten met een gratis basis template. Google even voor meer gratis templates.
Bij websites die geschikt moeten zijn voor smartphones, tablets, laptops, en grote monitoren ontkom je niet aan een "responsive"weebsite. Dit betekent dat de pagina zich automatisch aan de schermbreedte aanpast. Met mobile-first wordt bedoeld dat je de website maakt voor een smartphone en daarna aanpast voor grotere scheermen. Het aanpassen voor grotere schermen doe je in de css met @media (min-width: ...px) { ....}

Veel suc6.
 
Inderdaad hier ook bootstrap. Vaak wel even zoeken hoe je wat aanpast, maar het resultaat is goed
 
Hallo Bron en Bosjesman78,

Ik heb de website bekeken van Bootstrap, maar dat leek me wel behoorlijk ingewikkeld.
Zal me er denk ik goed in moeten verdiepen.
Kan ook niet zo goed vinden waar de CSS zich bevindt die bij het voorbeeld staat met: "Hello World"
Ik zal het denk ik ook bij mijn host moeten uploaden om er zo wie zo wat mee te kunnen doen.
Dan is het ook belangrijk om de CSS en de JS te kunnen downloaden.
 
Je kan ook een lokale webserver draaien, zoals XAMPP.
 
De basis html vind je bij Getting started
Code: 
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- De 3 regels hierboven *moeten* als eerste in deze volgorde in je head -->
<title>Welkom bij onze website</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="jouw-stylesheet.css">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>

<!-- hier komt alle html van je website -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
- In de eerste stylesheet staat alle css die voor Bootstrap nodig is.
- Na de Bootstrap css komt jouw stylesheet(s).
- De beide <script> regels zijn alleen nodig bij sommige onderdelen van Bootstrap (dit staat dan bbij het onderdeel aangegeven).
- In iedere website geldt dat de performance het best is als de scripts vlak boven </body> staan.
- Als je Bootstrap (css en script) van maxcdn.bootstrapcdn.com haalt (zie boven) is de performance ook beter.
- Als je IE8 niet meer ondersteunt, dan kun je de 4 regels <!--[if lt IE 9]> t/m <![endif]--> weghalen.

Suc6.
 
@php4u,
Ik heb al eens de lokale webserver XAMPP gedraaid, maar ik vond dat toch wel lastig i.v.m. het plaatsen van de files.
Ligt ws aan mij zelf, maar ik vind het simpeler om het op een apart gedeelte van mijn website te zetten.

@Bron,

Bedankt voor de tip over css en js. Dat was hetgeen dat ik zocht en niet zo snel kon vinden. Ik neem aan dat het goed werken is met Bootstrap?
 
Wat maakt XAMPP lastiger eigenlijk?
 
Waarschijnlijk maakt onbekend - onbemind.

Alles moest in een aparte directory en zodra het overgezet moest worden naar de website, alle links aanpassen.
Maar nogmaals dat ligt idd aan mij. Alles op mijn C:// schijf terwijl ik altijd via mijn dataschijf werkt. Klinkt ws
niet zo overtuigend hoor, maar ik geef mijn mening voor een betere.
 
XAMPP is een lokale webserver, net als de webserver bij je hosting die openbaar is.
Als je alles goed bouwt dan zou je geen links hoeven aan te passen.
 
Waarschijnlijk maakt onbekend - onbemind
Klik om te vergroten...
Dat heb ik met spruitjes :p

Zelf ontwikkel ik ook in Xampp en dan zet ik het later over naar de webserver. Dit werkt makkelijk als...
- je in de <head> de volgende regel zet
<base href="http://localhost/submap/> (submap is de naam van het mapje waar je bestanden in staan)
- en als je elke url en src relatief maakt, dus zonder http://www.example.nl/
Als je het overzet naar de webserver dan hoef je alleen maar de <base> regel te veranderen.

Op w3schools vind je voor Bootstrap in de linker kolom alle mogelijkheden makkelijk bij elkaar met voorbeelden. Je hoeft bij deze html geen letter css te schrijven. Je kunt natuurlijk wel de opmaak wijzigen met je eigen css.

Suc6.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan