Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 9 of 9
  1. #1
    Senior Member
    Join Date
    Jan 2011
    Posts
    148
    Member #
    26229
    Liked
    1 times
    Hey, I generally use a large image JPEG as the background to my sites, I centre them and build my site around them. Often I'll use photoshop to bild area's that once loaded I use divs to align content within. The problem that I am coming up against is that the sizes of my images are not consistant on mobile devices meaning that my sites make no sense on them (Overlay images are loaded in differing sizes and the position of text and links no longer make sense)

    Does anyone have any advice or know some good articles for optimising these kind of sites for mobile?

    As always all help will be greatly appreciated.

    Thanks,
    Jonny

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    You would probably get better all-around results if you slice the image up and use absolute positioning for the pieces.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Senior Member
    Join Date
    Jan 2011
    Posts
    148
    Member #
    26229
    Liked
    1 times
    Thanks for getting back, does this help specifically with mobile? it's just mobile sites don't take into account the pixel size of the images. If I split the image up would it do so then?

    Do you know any useful tutorials of how to optimise for mobile?

    Sorry for bombarding you with questions just keen to ensure my sites appear on mobiles and tables as they do on-line....

  5. #4
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    If you sliced the image so the pieces were the background of divs that have absolute sizes and positions, AFAIK smartphone browsers would render according to those rules. I can't speak for some of the toned down browsers on your basic flip phone, though.

    On another note, do you have an example site I could look at? I may be able to suggest a better way. You see, this is how I was doing things when I first started. But I learned to use different techniques over time that made me ditch that process.

    As far as optimizing for mobile, try this. It's a great tutorial on media queries.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  6. #5
    Senior Member
    Join Date
    Jan 2011
    Posts
    148
    Member #
    26229
    Liked
    1 times
    Hey tahnks for looking into this...

    Here's an example, it's in construction but it demonstrates the background problems I'm having perfectly.

    www.ddvdesigns.com

  7. #6
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    IDK, it lines up perfectly on my iPhone.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  8. #7
    Senior Member
    Join Date
    Jan 2011
    Posts
    148
    Member #
    26229
    Liked
    1 times
    Strange, I've just check and the Homepage is lining up now, which it certainly wasn't yesterday.
    Have a look on the projects or Design service tab though and you'll see what I'm talking about.

    Have you ever come across a site 'sorting itself out' before?

  9. #8
    Senior Member
    Join Date
    Jan 2011
    Posts
    148
    Member #
    26229
    Liked
    1 times
    Hey there,
    sorry to keep soming back to you but wondering if I could ask you one more question about this.
    As you pointed out the background appears to be working on a couple of mobile pages both which carry the same background image.
    The strange thing is that aside from the back-ground image destination all pages carry the same code for the body... can you think of any reason why there would be this anomaly? I've been through things a few times now and can't see anything strange in the html...

  10. #9
    Senior Member
    Join Date
    Jan 2011
    Posts
    148
    Member #
    26229
    Liked
    1 times
    Hi there,

    I've been looking to split my background image up into various images, in most cases what I am trying to either, have three separate images aligned across the top of the page and then a repated image below or I would like to have one centered banner with a repeared image to the left, right and below.
    Is this possible?

    I've been having a look at a few tutorials and it doesn't seem like it is?


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:01 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com