Would like feedback on my site re: mobile use

Mobile
1

Hi,

hopefully in the correct place to ask but i was hoping some of you would have time to have a look at my site

on your mobile devices and provide a bit of feedback (positive or negative) and suggestions for improvement etc. I don’t personally use my mobile for web browsing so i’ve had to design on what i think works best and from what i’ve seen of others. Hopefully i’ve got at least a few bits right.

thanks

2

It is partly responsive, an does pass google’s test, but I think it still needs more work. I’m not testing on an actual mobile, but: on any screen less than 983px, you get horizontal scrollers, these grow as the screen gets narrower, until the media query kick in at 800px.
After that it’s much more fluid, but there is still a small horizontal scroller which should be eliminated. Probably a margin or something, I have not yet looked to identify it. Not a major flaw, but it would niggle me.
What I think you should do: Make the initial, wide screen layout more fluid so things squeeze in on smaller screens, avoid fixed unit widths/heights.
After the query, find and eliminate the thing making the scroller.

3

It is the #banner causing this. You have left:10px and width:100% making it 10px wider than the screen.
Remove both those from the selector, width should be auto to get the 10px gap back, add a 10px left margin.

4

I see your website in browser and also other devices screensize. Some Screen in proper view and but screen in not view perfect.

Website is not responsive. Today must need Website is working and view perfect in all devices.

I can essay to convert your website in responsive.

5

thanks for spending the time to look at that, that’s really useful. My thinking of the way i’d done it was that most people would either view at 1024 wide (landscape on an ipad) or bigger, or less than 800px wide (portrait on an ipad). Didn’t really think people would need it to scale it in between and wasn’t sure how to do that if that was the case as if i push the right hand column under the left i thought it would look weird, and scaling it would be a bit odd too. So not 100% sure how i’d do that. But certainly something to think about.

thanks

6

If you make the simple changes to the banner element as mentioned, it will be fine on screens smaller than 800px.
You still have a problem for sizes inbetween 983 and 800.
That may be a little more involved. You would start by losing the fixed width on the main left hand column.

7

cool thanks will definitely have a look at that (tomorrow as it’s home time now :slight_smile: )

thanks

8

Looking at the site there is a lot of width: ###px; a lot of that should be replaced by max-width: ###px; to allow elements to compress on a smaller screen.
But that is an over simplification. Some elements will want to maintain their width, pictures will need to maintain aspect. One element that will be tricky will be the slider, due to how it works.

9

I had a look at it on a Sony Xperia and had a few problems.

  • The beachwatch page has no viewport meta name, so is impossible to
    read. When this is inserted the page is wider than the viewport and
    needs to be scrolled sideways to see it all.
  • The UKSeas page is also too wide.
  • The Show Offer footer reduces the viewing area significantly, especially in landscape format. I know it can be removed, but it appears to be too intrusive.
  • The search box is not being positioned correctly and overlays other parts of the page.
    Hope this helps.
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.