SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Mobile website rendering

    What is the best way to render a mobile website should I include a media type (such as media="handheld") to use an entirely new css file or should I use JavaScript/PHP to test which type of browser is visiting the site.

  2. #2
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    A few things to be cleared up.

    A mobile website means a different content, a different style, a variant for a website. An entirely different CSS means the same content, one single variant, just presented in a different way.


    <hr>


    Media types and browser sniffing may or may not be part of the answer. Browser sniffing in particular is surrounded by a lot of controversy.

    One thing that has been quite successful was building a mobile site version, like m.sitepoint.com, i.e. a whole different content and a whole different set of resources: images, CSS etcetera.

    Another thing that is quite successful is not building a different version for mobile, i.e. not a mobile website, but building a responsive design for the same content. Which means a unified CSS file, not a new CSS file for mobile, a new for tablet, a new CSS file for desktop.

    And more recently, efforts are put towards combining the two concepts: the same basic content, yet some resources, such as images, be served in different flavors, but not for mobile and desktop, but for high bandwidth and low bandwidth.

    Most of the times, a completely different mobile website is not needed. You just build a responsive design, based on media queries.

    You can do that by gathering the common style rules in a base section in your unified CSS file, and then by adding different @media sections to slightly adjust things when needed.

    What remains true, is the question about the other resources, like images, and whether you have to offer a low bandwidth version to that regard.

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well the majority of my site is fluid yet it still appears small on my mobile phone. That is why I need some tips to improve its look on smaller devices.

  4. #4
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Responsive webdesign is the way. Media queries are the technical means to follow that path.

    Put simply, you'd just drop columns going down the display size:

    Code:
    screen.css
    ------------
    [...]
    @media screen and (max-width: 800px) {
    
      #sidebar {
        float: none;
      }
    
    }
    [...]

  5. #5
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what is the difference between responsive and and a fluid layout then?

  6. #6
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Responsive is the dynamic part that was missing from CSS side, but was found on HTML side.

    Fluid relies on floats dropping, sometime, somewhere, but fluid can't float/unfloat on command, for example. By the time they "unfloat" your design already looks squashed.

    Responsive can unfloat, based on what a media query returns. A media query for which you are responsible, that you command, under very precise circumstances.

    Fluid can't change font size if screen size is bellow or above a certain dimension. Responsive can dynamically make font size bigger for big screens and smaller for normal screens.

    Fluid will cram all the stuff in the screen (zooming it down), as is, while responsive allows you to completely rearrange the stuff and thus present it at 100% normal size.

    You won't pray and hope a float will drop to the next line, like with fluid, with responsive you will decide the exact circumstances when a float drops to the next line.

    Which will make the whole stuff bigger, at 100% zoom by default, not zoomed down, like for fluid. Which is what you're complaining of.

    Fluid means breathing for your life in a limited space. Responsive means jumping and running free.

  7. #7
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it sounds great and i want my page to run free so are there any tips and tricks to achieve this with my current site ?

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by skelleex View Post
    should I include a media type (such as media="handheld") ...
    Some mobiles ignore that anyway, so it's pretty much useless now.

    Quote Originally Posted by skelleex View Post
    are there any tips and tricks to achieve this with my current site ?
    Of curse, but for specific advice that applies to you we'd need to see the site in question.

  9. #9
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Some mobiles ignore that anyway, so it's pretty much useless now.



    Of curse, but for specific advice that applies to you we'd need to see the site in question.
    The site is www.webapp-testing.com I am hopeful to have a decent menu and the center content always fully visible on any mobile device

  10. #10
    SitePoint Evangelist Scott.Botkins's Avatar
    Join Date
    Dec 2004
    Posts
    598
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The responsive vs a separate mobile website is still being established as there are pros and cons to both. This will probably be argued for the next 3-5 years too as the mobile market is still young.

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by skelleex View Post
    The site is www.webapp-testing.com I am hopeful to have a decent menu and the center content always fully visible on any mobile device
    It looks like this site is designed purely for mobiles anyway, so you don't really need to worry about media queries and so on. Just basically get the styling you want and you're done.

  12. #12
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    It seems like you're using jQuery mobile to build a mobile version for http://www.outlish.com/.

    The design for http://www.outlish.com/ it's Wordpress-based and it's mostly a fixed one. You have a min-width 960px and a max-width of 1195px.

    I'd recommend you a responsive theme design for Wordpress: http://wp-themes.com/responsive/?TB_...600&height=400

  13. #13
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Scott.Botkins View Post
    The responsive vs a separate mobile website is still being established as there are pros and cons to both. This will probably be argued for the next 3-5 years too as the mobile market is still young.
    There is no responsive design versus mobile websites. It's apples and oranges. Responsive it's purely style, mobile websites it's content.

    Even if you opt in for a mobile website, you'd make sure it has a responsive design since mobile nowadays goes from 320px to 1024px.

    But mobile websites are no longer enticing. It's high bandwidth versus low bandwidth, with each being responsive.

  14. #14
    SitePoint Evangelist Scott.Botkins's Avatar
    Join Date
    Dec 2004
    Posts
    598
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by itmitică View Post
    There is no responsive design versus mobile websites. It's apples and oranges. Responsive it's purely style, mobile websites it's content.

    Even if you opt in for a mobile website, you'd make sure it has a responsive design since mobile nowadays goes from 320px to 1024px.

    But mobile websites are no longer enticing. It's high bandwidth versus low bandwidth, with each being responsive.
    I agree, however the industry seems to believe there is a war between the two. http://mobile.smashingmagazine.com/2...bile-websites/ is a good read on why not to do a separate mobile website. If you google mobile vs responsive websites you'll get plenty of others.

  15. #15
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry guys wrong site that site I showed yall was actually a test app I was developing for phonegap the actual site is www.webapp-testing.com/hangars. Sorry about the mix up but keep the discussion and suggestions coming its a really interesting read

  16. #16
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh and the site I showed yall in error was actually pure html no jquery mobile was used. I tried jquery mobile once but had some issues in implementing ajax queries within it as I could no longer move back and forth as smoothly. My lack of knowledge of how to manipulate the hashtags was the reason for this

  17. #17
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by skelleex View Post
    Sorry guys wrong site
    No probs! That site looks like a good candidate for @media rules. In otter words, change the styles depending on with width of the viewport. Here's a handy guild to targeting different devices:

    http://css-tricks.com/snippets/css/m...ndard-devices/

  18. #18
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Actually, this one, from css-tricks, is from the old 320andup.

    There's a new and improved 320andup: http://www.stuffandnonsense.co.uk/blog/about/320_and_up

    If you're looking for more places to start, or for inspiration, you can check out H5BP and MH5BP:
    http://html5boilerplate.com/, http://html5boilerplate.com/mobile


    Quote Originally Posted by Scott.Botkins View Post
    I agree, however the industry seems to believe there is a war between the two.
    Yeah, I confess to this sin also, war.

    But, says me, I was fighting the good fight:
    - let everyone be aware the two, RWD and MWS, are completely different things, so it's not a question of vs
    - let everyone be aware that responsive fits all kinds of websites, mobile or tablet or desktop, so it's smart to think responsive before anything else

    Personally, I got over this war, and took a step forward: http://www.netmagazine.com/tutorials...g-started-ress

    I have to say here that I have the outmost respect for LukeW, amongst others like Nicolas Gallagher, Jonathan Neal or Paul Irish. They give without asking money or loyalty.

  19. #19
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    if you want your site to be good looking on mobile and bigger screens - i can reccomend using skeleton framework.

    From their site :

    Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone.
    Check it out, hope it helps.

  20. #20
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all the help will be looking at the responsive templates frameworks.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •