Mobile webdesign

+3 Franz Schmidt · January 31, 2016
I hardly know anything about webdesign on mobile devices. But I really would appreciate it if my websites also look nice on such devices since the current evolution is going in this direction more and more. I haven't found a tutorial from Bucky on something like that so I'm asking here if someone knows tutorials or webpages or may can give me tipps for develop mobile compatible websites.

Hope someone can give me some answers.
Greetings
Franz

Post a Reply

Replies

Oldest  Newest  Rating
+1 Jay Deshaun · February 1, 2016
For most of what I know/learned is that everything is controlled by the CSS
so basically you would need to use media queries.
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
http://www.w3schools.com/css/css_rwd_mediaqueries.asp

Example:
http://www.w3schools.com/css/css3_mediaqueries_ex.asp
+1 Franz Schmidt · February 1, 2016
Thank you very much Jay, but there is still something that bothers me about mobile development. Every site I know has this syntax:
e.g. m.facebook.com

There allways is the m subdomain before the main domain. I suspect it stands for mobile.
And this can't only be pure css it has to do something with redirection on your main site. Cause when I want to get to the main site I often get linked to a mobile homepage and how can I do this. Is this only a subdomain on my webhost or something else?

Hope you understand what I'm looking for :)
+1 Eddie Craw · February 2, 2016
Hey Franz,

Are you going to skill up for future promotion? Or just need to make one website to be responsive?
+1 Franz Schmidt · February 2, 2016
I'm just responsive since I want to improve my webdevelopment skills as much as I can in every possible direction :D
+1 Nicholas Eason · February 2, 2016
As far as I know, (using your example) m.facebook.com is a COMPLETELY different web page. The way Jay suggested, media queries (new with CSS3), is considered responsive web design, whereas the way the used to do it (m.whatever.com) I believe was done on a redirect whenever a user entered your website and met some requirement. Personally, I wouldn't do the whole "m.whatever.com" thing because it's out-dated. Now you have the availability to literally shift your website to where it looks good on the user's end.
+1 Franz Schmidt · February 3, 2016
Ok so you would suggest to stick with jays solution and handle everyting with javascript and css?
+1 Zoe Schultz · February 4, 2016
Why don't you go for a ready made solution for the first time? The advice above is pretty sound, but if this is a pressing matter you could use a mobile ready template and learn from the way it is laid out and coded... You can have a try of http://www.templatemonster.com/moto-cms-3-templates.php you can download lots of free samples and try them as an example / learning aide. It is good to learn from the people who have a niche in this industry, I think.
+1 Franz Schmidt · February 6, 2016
Ok thanks will try this for sure
+1 Dhruv Singhal · March 29, 2016
1) go and watch bucky's responsive web design tutorial.

2) in your webpage make media queries for these width RESOLUTIONS all are in px

200
240
320
400
480
600
640
720
768
800
852
854
864
900
960
1024
1050
1080
1152
1200
1280
1365
1400
1536
1580
1600
1680
1920
2048
2400
2560
2880
3000
3200
3840
4000
4096
4800
5120
6400
7680

3) define width of elements in unit %.

4) define height of elements in unit em.

5) try to locate everything from top-right corner (except something which you want to be in very right or very bottom)

working with all these 5 steps you will be able to make a website compatible with all screens
+1 Kartheyan Sivalingam · March 29, 2016
As Nicholas said redirecting to a different website, if the user is using a mobile device is out-dated. But, if you're interested in how this works
$( document ).ready(function() {      
   var isMobile = window.matchMedia("only screen and (max-width: 760px)");

   if (isMobile.matches) {
       window.location.replace("http://m.facebook.com");
   }
});

However, this method is out-dated and I strongly suggest you just use CSS3 media queries. Also, with the growth of mobile first CSS frameworks (like Bootstrap), developing websites for mobile is easy.
Good luck, hope I helped! 
  • 1

HTML / CSS / Web Design

106,946 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators