1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Different versions of a website for different screen sizes?

Discussion in 'HTML & Website Design' started by joliett89, Feb 25, 2012.

  1. #1
    I have a website, thats 900px in width, and I am sure it would loog good on a laptop, but I have a lot of space on both sides, when I look at it on a widescreen monitor. I was generally reading that it recommended etc, but is it not a little 2005 way of thinking etc? I think that websites at about 980px width (I am talking here about websites that are centered, margin: 0 auto; etc).

    My question would be, do people generally create different versions for different screen sizes, do detection (probably JavaScript) and load specific site based on the screen size etc, or is it generally too much work and people dont do that etc. What is the best way to go about that?

    I am mostly gonna be working on Wordpress blogs for now, so the question would be mostly related to this.

    Thank you.
     
    joliett89, Feb 25, 2012 IP
  2. comadmin

    comadmin Peon

    Messages:
    20
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Good question. There are several tricks to make responsive web page. There are some java and css hooks which resolve various screen resolutions. Just google responsive web design and you will get your answer. Nobody sane makes different versions for defferent screens.
     
    comadmin, Feb 25, 2012 IP
  3. SoftCloud

    SoftCloud Well-Known Member

    Messages:
    1,060
    Likes Received:
    28
    Best Answers:
    2
    Trophy Points:
    120
    #3
    I would just have the width of the main content section as a percentage, instead of a fixed pixel amount.
     
    SoftCloud, Feb 25, 2012 IP
  4. rdm.mehta13

    rdm.mehta13 Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    You need to make different stylesheets for different screen size..
    Here i made 3 stylesheets
    then add this in your html code like i have given below... :))

    If you need any other help, Then feel free to PM me :))
     
    rdm.mehta13, Feb 26, 2012 IP
  5. kangshao

    kangshao Peon

    Messages:
    40
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    In addition to that, you need to have your entire website optimized for mobile. Otherwise, entire web page will look distorted too!
     
    kangshao, Feb 29, 2012 IP
  6. trendint

    trendint Peon

    Messages:
    52
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Also look in to Modernizr as it helps with responsive/fluid designs
     
    trendint, Feb 29, 2012 IP
  7. mimo91

    mimo91 Peon

    Messages:
    30
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #7
    u can use percentage in your css or simply make different style sheet each one for a range of resolutions using javascript
     
    mimo91, Feb 29, 2012 IP
  8. jackburd

    jackburd Active Member

    Messages:
    396
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    73
    #8
    jackburd, Mar 13, 2012 IP
  9. martin grace

    martin grace Peon

    Messages:
    40
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    martin grace, Mar 22, 2012 IP
  10. Devitor

    Devitor Peon

    Messages:
    57
    Likes Received:
    2
    Best Answers:
    1
    Trophy Points:
    0
    #10
    most phones can handle the different sizes just fine. I personally don't worry about it.
    1020 - 1080px is a pretty normal width for most common websites. I really wouldn't worry about dynamic resizing, its really more trouble then its worth.
     
    Devitor, Mar 22, 2012 IP
  11. bluegel

    bluegel Member

    Messages:
    105
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    28
    #11
    Fluids layouts with css will be a good solution. But first decide on max. screen res. you need
     
    bluegel, Mar 29, 2012 IP
  12. amdadhbd

    amdadhbd Greenhorn

    Messages:
    84
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #12
    This is call Responsive site development. you can use mobile desive detection Javascript to show your site in mobile browser, only the css will matter Generaklly you can make your site 1200 PX width which looks really better. use percentage in CSS so that css can adjust with any computer screen.
     
    amdadhbd, Mar 29, 2012 IP