| Forum Home | ||||
| Press F1 | ||||
| Thread ID: 140407 | 2015-10-06 18:52:00 | Website design for mobile | Greg (193) | Press F1 |
| Post ID | Timestamp | Content | User | ||
| 1409510 | 2015-10-06 18:52:00 | For the first time I've been asked to create a site that will render properly on a mobile device. It's something of course which I should have looked into ages ago. Perhaps Webdevguy or someonecan point me where to start, please. | Greg (193) | ||
| 1409511 | 2015-10-06 19:05:00 | First you'll want to start off with this <meta> tag so that browsers know it's mobile optimised. <meta name=viewport content="width=device-width, initial-scale=1"> From there on it's similar to a desktop website, only the screen is smaller. |
pcuser42 (130) | ||
| 1409512 | 2015-10-06 22:27:00 | Hi Greg, I'm not sure of the level of your website coding skills but I would suggest that you start by downloading a responsive website template http://html5up.net/ There are lots of free options for responsive templates. Also before you get started with any coding I would suggest that you do a series of mockups for what you want each page to look like on mobile, on tablet and on desktop because those are the devices that people view websites on and each device is a different screen size and there fore a different layout. You will be building your website in HTML5 and CSS3 rather than the old XHTML4 and CSS2 code. |
Webdevguy (17166) | ||
| 1409513 | 2015-10-06 22:28:00 | First you'll want to start off with this <meta> tag so that browsers know it's mobile optimised. <meta name=viewport content="width=device-width, initial-scale=1"> From there on it's similar to a desktop website, only the screen is smaller. You need a bit more code than that to make things work. The CSS also needs to be CSS3. |
Webdevguy (17166) | ||
| 1409514 | 2015-10-06 22:33:00 | There are two ways of doing it. Remake tour existing website with special responsive software, the new site will adapt to the device resolution. Because I have several websites, and I didn't want the hassle of converting large sites, I chose the alternative of making a condensed website which loads if the resolution of the device is below a certain figure. Place a script in the <head>:- <script type="text/javascript"> <!-- if (screen.width <= 700) { window.location = "gardeningaids.co.nz } //--> </script> In this example any screen resolution below 700px will load from the "mobile" folder on the Gardening Aids site. This setting allows for Tablets and later smart phones. You can see the code at http://www.gardeningaids.co.nz Ctrl+U |
mzee (3324) | ||
| 1409515 | 2015-10-06 23:58:00 | Thanks heaps guys. | Greg (193) | ||
| 1409516 | 2015-10-07 00:09:00 | Thanks heaps guys. Just remember that there is no right or wrong way to do want you want to do. It just depends on what you want the viewers browsing experience to be. If you want it to be a good one then it will require more planning and coding. If you just want the website to show up in Google search results then a quick and dirty fix will suffice. |
Webdevguy (17166) | ||
| 1409517 | 2015-10-07 00:17:00 | You need a bit more code than that to make things work. The CSS also needs to be CSS3.Not necessarily ;) | pcuser42 (130) | ||
| 1409518 | 2015-10-07 00:35:00 | Not necessarily ;) It does if you want responsive calls ;) |
Webdevguy (17166) | ||
| 1409519 | 2015-10-07 01:03:00 | Thanks heaps guys. What does the current website look like? |
Webdevguy (17166) | ||
| 1 2 3 | |||||