So right now I am designing a website, and first I am doing the desktop version and publishing it before the mobile version, as that seems like the best way of doing it. I am slightly worried though, about how I am going to go about designing/coding a mobile/tablet version.
First off, I want 3 versions. A phone, tablet, and desktop.
Obviously I am starting with the desktop as I can just cut down the website to display on tablets, and then even smaller for phones. But I am worried about how I will make it. Right now, I haven’t made a mobile/tablet friendly site, and the only thing I know about it is how you can make different stylesheets apply to different screen sizes, such as:
<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800pxstylesheet.css" />
And that’s all I know of. I have seen, though, that when I go on twitter on my mobile phone, it says in the url bar “mobil.twitter.com” or something like that. Is there a way of completely detecting what device they are on?
I feel like, before you begin any sort of headway into this path, you need to read this article of mine.
The premise is that you don’t have “separate” sites for each device/resolution. Rather, a fluid site with very few breakpoints (when/IF needed) and you will essentially have a device-agnostic website.
You shouldn’t worry about having “tablet” displays or “mobile” displays, per say. You should take your browser window, and make it smaller/bigger. Once that is 100% perfect, you can now say your website is perfect in tablets/mobile. You’ll have to test in them still just to see behavior, etc. But 99% of the time, testing from a desktop browser is enough.
You should also note that your example uses device-width, and this article also explains why to avoid that. Basically, use that meta tag in the article, and then get your website fully fluid / perfect as you make it smaller/bigger. THAT is responsive. Forget devices exist. Just forget about it until you get that done .
The mobile version won’t have the slideshow, it wont have the responsive buttons/circles on the right. How is this possible by just editing the CSS and making it responsive?
Forgive me If I basically just ignored something you said and didn’t realise it.
Quite possible, and in fact, you should be doing so!
The two designs you give are possible. Simple media queries can change the layouts of pages dramatically. Just get a desktop (or mobile if you wanna start there) and work your way to the other end.
You have a desktop view already set, so I’d just get a desktop view set up. We can go from there.
Keep the HTML structure in mind though. Envision how you imagine you’ll rework those elements to give you your mobile display. Maybe have a hidden hamburger icon until you get to mobile size (display:none and show display:block). etc.
.
