2

I designed my website several years ago. I quite like it but have noticed it is not optimal for mobile devices.

http://isometricland.net/homeworld/homeworld.php

I am thinking the text links in the left column of the tables are too narrowly spaced, but spreading them out looks bad. Does anyone have any advice on how to make these links work better on mobile touch screens, or mobile advice in general?

Would it be better if I designed a separate version of my site entirely just for mobile devices?

Thanks.

Improve this question

1 Answer 1

Reset to default
2

You can use the hamburger menu for the navigation of

and on the below links like the facebook, search and donate now.

just like here

enter image description here

and then put all of your content into the middle using any grid(preferably bootstrap). In the content, you have two and three CTAs put them aligned just after the related data.

e.g. in News,

paragraph - I ported my Play Balancing Mod to Homeworld Remastered, and am currently in the process of generating a new Ship vs. Ship Odds spreadsheet for HWRM.

link

in Tools,

paragraph - An HTML form that generates a branching tree of resources that you can then copy and import into HW1. The amount and frequency of branching, as well as the number of intervals between branchings, may be specified. (The screenshot kind of looks like a pair of antlers.)

IMAGE

link

and hence proceeds in the same way.

Improve this answer
8
  • 1
    I like the hamburger menu suggestion, but for his second question this here might be interesting too: nngroup.com/articles/mobile-vs-responsive
    – Big_Chair
    Aug 17, 2016 at 7:23
  • What is a bootstrap? What are CTAs?
    – posfan12
    Aug 17, 2016 at 8:51
  • 1
    Bootstrap is a CSS based framework which is very good and responsive - It used to be called Twitter Bootstrap. CTA is Call to Action(s) and is typically the primary button that triggers the feature, e.g. Save button is a CTA.
    – SteveD
    Aug 17, 2016 at 9:24
  • Are you familiar with responsive?
    – SteveD
    Aug 17, 2016 at 9:38
  • 2
    You need to make the tap region bigger around each link using CSS. Typically at least 44 pixels tall. Responsive grid based frameworks like Bootstrap use browser window breakpoints to apply different CSS rules to objects like links. Obviously you get all this for free with Bootstrap.
    – SteveD
    Aug 17, 2016 at 10:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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