0

I want to create a mobile version of my site:

http://isometricland.net/games/games.php

Basically, the only differences I want are that the far left column with my logo and social media links be omitted (or hidden?), and that the middle scrolling area fill the entire browser window.

I know how to generate the HTML markup and CSS, but how do I organize my site, and how do I get the server to detect the different browsers and feed them the correct version of my site?

Thanks.

closed as off-topic by Evil Closet Monkey, plainclothes, Michael Lai, SteveD, Mayo Aug 23 '16 at 10:44

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions about Implementation are off-topic because this site is for User Experience design questions, not questions around how to implement these designs. Therefore, questions around the use of programs like Photoshop or languages such as CSS or JavaScript are off topic." – Evil Closet Monkey, Michael Lai, SteveD, Mayo
If this question can be reworded to fit the rules in the help center, please edit the question.

1

Sounds like you're looking for media queries! These allow you to have certain CSS rules only apply on specific platforms and screen widths.

The HTML is the structure of your webpage, that shouldn't need to change. What you are changing is the style, how the browser will layout and display your content.

I have a few suggestions of CSS rules you may want to add for mobile:

  • Sections: At the moment you are using a <b> tag for the title of each project. Consider using a header tag for this, as it will be easier to target styles for mobile (and matches what the text functions as). Remember that their are six levels of heading tags, maybe use <h1> for "Games", <h2> for "Individual Pages" and "Projects," and <h3> for the title of each project.
  • Headings: More importantly, the projects might be easier to distinguish on mobile if the header is above each section, as opposed to being in line with the content.
  • Left sidebar: You mentioned hiding your logo and social media links. You might consider keeping your title and logo at the top. The Google custom search might also fit well at the top. You can move your social media links to the very bottom (after your projects).
  • Navigation bar and background: Keep in mind how these will look on a smaller screen. You may want to increase the size of your navigation bar to make the links easier to tap. Also, the background image might make the text hard to read. Make sure your text is large enough and clearly separated from the background.

Good luck!

  • I have had some success with media queries as per your suggestions. (Refresh the page to look.) However, on my Lumia using UC Browser in general the page looks too "zoomed out". The fonts are tiny, I can barely read them. Do you have any CSS tips on fixing this problem? – posfan12 Aug 23 '16 at 0:48
  • Same thing in Internet Explorer actually. – posfan12 Aug 23 '16 at 0:58
  • @posfan12 Hm, I see what you mean. Try adding a font-size rule to the media query selector. Definitely experiment with using ems instead of absolute pixel values – seth10 Aug 23 '16 at 1:34
  • I am using ems, which is what confuses me. – posfan12 Aug 23 '16 at 1:56
  • Take a look at the link I had in my last comment if you didn't notice it's blue. ems areused for relative font sizing. 1 em is whatever the device decides standard body text should be (though you might not agree). 2 ems would be twice as large, 3 ems is three times, etc. – seth10 Aug 23 '16 at 2:40

Not the answer you're looking for? Browse other questions tagged or ask your own question.