SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 42
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Making a site mobile by resizing -how does it work?

    I'm looking into the various solutions to make a site work on both desktop and mobile platforms and understand from reading about it that the most failsafe solution is to have it automatically rearranges itself depending on the screen size.
    A neat example I came across which does this is Creattica.

    I'm trying to learn more CSS but could someone please explain to me the general concept of how the mentioned site does this? It works without Javascript, but it won't even let you in with cookes disabled so I'm wondering if that has anything to do with it or if it's all in CSS.

  2. #2
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    What Creattica is doing is just floating the ARTICLEs. That automatically makes it wrap so that it doesn't become too big on mobile or smaller screen sizes. An efficient way, to be sure, but probably not the best.

    What you're looking for is Responsive Web Design (the author, Ethan Marcotte also wrote a book on the topic, found here. Really what it is is a website that responds to the user. Meaning, as you described, whatever the user is using (be it a 27" desktop, an 11.5" laptop, a netbook, or a mobile phone) will make the website respond to it and therefore suit it better.

    There are many ways to do this. Fluid web layouts, CSS Media Queries, and Auto-resizing images. These all help to adapt the website to the user.

    One way to make this quite simple is to build for Mobile First as suggested by Luke W. But, of course, that would be something to consider when you fully grasp the concept. I'd recommend reading those articles first.

    ~TehYoyo

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Impressive, but a lot of it is over my head (I've quickly read through all the above links). I still don't fully understand how the box model works although I now grasp the concept of DIVs being invisible "boxes" next to each other (but don't understand how they relate to each other's placement). The grid system which is referred to in those articles seems overly complex to me, so is it really necessary to go that route in order to build a working website which works on multiple devices, or is that mostly for very complex and advanced sites?
    I'm still in the process of deciding a layout for my site, so at this stage I'm open for all sorts of ideas, but based on my content I'm aiming for a 2-column design where the site navigation fixed (regardless of where you scroll) is at the top of the rightmost column. And of course a header and footer. Simple and functional.

    Back to the Creattica site; so it's basically a fluid design which when resized smaller stacks the DIV boxes on top of each other? It seems to work fine but you say it's probably not the best way to make a site responsive -is this because the images should auto-resize, which it doesn't seem to do?

  4. #4
    SitePoint Member doni's Avatar
    Join Date
    Apr 2012
    Location
    TN
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are many free html grid systems that can do this for you. This is just one of many: http://getskeleton.com/

  5. #5
    SitePoint Member michaeljcalkins's Avatar
    Join Date
    Apr 2012
    Location
    Issaquah, Washington, United States
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Check out http://cssgrid.net it's a responsive grid and it works quite wonderfully. There are many of these out there though I hear.

  6. #6
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So these are grid templates and all I do is add the HTML content (and tweak the CSS to my liking if needed)?

    But as a novice I'm having trouble understanding the principle or basic idea of a grid. Is it really just a bunch of DIV "boxes" in a fluid setup which when resized shift places? And does a grid setup work with any design idea (such as my idea for a 1 or 2 column site with header and footer) or will the site look completely different?

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,208
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by pyxxel View Post
    So these are grid templates and all I do is add the HTML content (and tweak the CSS to my liking if needed)?
    The site you linked to has a number of layouts, depending on the width of the screen. This is controlled by a bit of advanced CSS called @media queries, which determines different settings for different screen sizes.

    Before jumping in too deeply here, start with your content. What's the best way to organize and present your content to users? That's the question to be asking. Then, from that, work out an appropriate layout—perhaps for desktop to start out with, but it could be mobile if you like. (The advantage of the latter is it helps to avoid unnecessary, decorative junk.) Either way, work out your ideal layouts, then look at how they can be constructed—first with HTML, and then with a layer of CSS styling. We can help you with the layout if you like. But it is best to plan a site carefully and deliberately, like a house. A lot of people rush in without clear plans, and the whole thing ends up falling into a messy heap.

  8. #8
    SitePoint Member michaeljcalkins's Avatar
    Join Date
    Apr 2012
    Location
    Issaquah, Washington, United States
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Absolutely jump in! Use the example and play around with how it works. It's responsive to the screen it's on and looks really good on a mobile device.
    I use it on my pet project <snip> because I barely have to do anything to make it work.

    The best way to learn is to use. Use it and anything. Check out teamtreehouse's responsive tutorials: http://teamtreehouse.com/library/des.../media-queries

    never the less cssgrid.net is ready to go.
    Last edited by TechnoBear; Apr 27, 2012 at 12:33. Reason: Unnecessary link removed

  9. #9
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by pyxxel View Post
    So these are grid templates and all I do is add the HTML content (and tweak the CSS to my liking if needed)?

    But as a novice I'm having trouble understanding the principle or basic idea of a grid. Is it really just a bunch of DIV "boxes" in a fluid setup which when resized shift places? And does a grid setup work with any design idea (such as my idea for a 1 or 2 column site with header and footer) or will the site look completely different?
    I, personally, don't find grids super helpful. In my eyes, what they really are are just pre-design tools. They're something to consider when you're making your website. I consider "grids" to be an integral part of developing and designing a website. For instance, if I give you a grid that divides the webpages into 3rds (by percent, although that's impossible to accomplish w/ a fixed grid - more to come later), and you make a "DIV" (in your mockup) that is inside of one of those thirds, all your really doing is saying to yourself, "I want to make this section of content 33% wide. This should be something that you think about anyways.

    One of the things that I think gets confusing for people is that there are grids that claim to be responsive but are fixed (meaning, in pixels). For instance, if I download 960.gs, I get a grid that is 960px. If I want to make my website responsive (see my above post), then I shouldn't use a fixed width of 960px. Some grids say that their boxes are defined by percentages, meaning, that they are, say, 10% of the page. This gets confusing as they end up just being 96px (in our case). You have to interpret what you put down. When you make something 96px, know that it really means "10%" in your CSS.

    I hope that didn't get too confusing.
    ~TehYoyo

  10. #10
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    The site you linked to has a number of layouts, depending on the width of the screen. This is controlled by a bit of advanced CSS called @media queries, which determines different settings for different screen sizes.

    Before jumping in too deeply here, start with your content. What's the best way to organize and present your content to users? That's the question to be asking.
    I think a 2 column + header/footer layout such as this this example) will fit my content the best. A single column might even work, depending on if some content should be available from any page or not... I have lots of usability questions like that.

    Can I use a grid for a layout such as this, or are they just for web designs consisting of many columns (such as used in newspapers) side by side?

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,208
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by pyxxel View Post
    Can I use a grid for a layout such as this, or are they just for web designs consisting of many columns (such as used in newspapers) side by side?
    You can indeed, but before rushing into grids, ask it it's really necessary. They ted to introduce a lot more complexity that you need, and can make life more difficult in the end. IMHO, nothing beats building pages yoursefl from scratch. Then you really understand how they work, and there's no unnecessary stuff getting in the way.

  12. #12
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You can indeed, but before rushing into grids, ask it it's really necessary.
    Well, as I can see my audience using mobile devices in addition to desktop computers this seemed to be a solution. Would designing the website using the standard box model and relying on separate stylesheets for different platforms be the easier solution?
    Any downsides compared to a "collapsable" grid solution?

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,208
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by pyxxel View Post
    Would designing the website using the standard box model and relying on separate stylesheets for different platforms be the easier solution?
    It depends on how large your site is, but in general, it's not hard at all to set up your site so that on smaller viewports the elements can rearrange themselves. This doesn't require separate style sheets, but simply some extra styles within the main style sheet that cater for smaller screens, using @media rules. A lot of sites are doing this now, and it's not very complicated at all. TehYoyo's first link in post #2 lays out how it works nicely.

    This kind of responsive design is all the rage now, but whether it will last is another matter. Some people don't like seeing something different on smaller devices (or when they resize their desktop browser window). Some smart phones let you zoom in and out with a simple tap, and in a way, that can be a nicer experience.

    Also, have a look at this slideshow, which presents another way of approaching the whole issue. The web was nice and responsive when it was first invented, and it's only CSS practices that have stopped it from being so. The point of that slideshow is to give all devices a basic, functional layout, and add in extra styles, where appropriate, for various devices.

  14. #14
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    There is a problem with media queries that few seem to bring up. The device, browser, whatever. Will download the stylesheet regardless if it is for it or not. So you better be carful when using them.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  15. #15
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by logic_earth View Post
    There is a problem with media queries that few seem to bring up. The device, browser, whatever. Will download the stylesheet regardless if it is for it or not. So you better be carful when using them.
    I see this as a feature.

    You should remember that mobile portrait can swiftly change to mobile landscape. You wouldn't want to wait for additional resources to download, as a user.

    Even more, there shouldn't be so much more CSS added to all media queries code than the base code, so it's pretty much a non issue.

  16. #16
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by itmitică View Post
    I see this as a feature....
    Yet downloading the full CSS for the desktop would be fine on limited and expensive data connections? Not everyone has unlimited data you know. The reason one would want to send a mobile device a different stylesheet is not only for a smaller screen, but also to send it a smaller CSS file. That however, becomes futile because media queries do not do that.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  17. #17
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    I don't grasp your concept of a big CSS load, but I'll play along. I'm not sure you even try to make a valid point, since you don't give out any *viable* alternative solution, but...

    Quote Originally Posted by logic_earth View Post
    but also to send it a smaller CSS file.
    To minimize data traffic, you suggest something like this: browser sniffing/device width detection and sending just enough CSS (along with "just enough" from other resources) for one page alone. This, following your smaller CSS file logic further.

    When the user switches from portrait to landscape or vice-versa, bad UX: waiting for additional resources to download, render again.

    When the user goes to another page, bad UX: waiting for distinct additional resources to download, along with the content, render again.

    Can you spot a bad pattern here? You're thinking distinct pages, when you should be thinking entire websites.

    Also, media queries are not for traffic control, are they? Why would you hold that against them beats me! Reusable, cached resources make for inexpensive traffic and good UX.

    As a side note, CCs were not adopted across UAs for a reason. There is no need for them. Aside the "repair me" reason for bad UAs.

    <hr>

    ... or you could build a m.* version for a your page. This is the only other *viable* (really?) solution we have. You're pro that?

    <hr>

    Let the user worry about data plans. You worry about things that regard you: reusable, cached, well thought resources... and the best UX (which means media queries also).

    A CSS file being so big that you have to worry about data traffic means you have a bad CSS, not that the user has a cheap data plan. This goes for images, JavaScript code, markup also. Meaning it's not the fault of media queries!

  18. #18
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pyxxel View Post
    Well, as I can see my audience using mobile devices in addition to desktop computers this seemed to be a solution. Would designing the website using the standard box model and relying on separate stylesheets for different platforms be the easier solution?
    Any downsides compared to a "collapsable" grid solution?
    Grids and responsive design are two different things.

    <hr>

    Grids try to do for the blank canvas that is the browser windows, what the graph paper does for blank paper: it sets detailed and precise guidelines for positioning. Too detailed for my taste, in some grids.

    <hr>

    Media queries try to do for the empty space that is the browser window what the movers do with the furniture placement in their trucks: try to fit it all in a given space, without leaving anything hanging out.

    <hr>

    There are grids that follow the responsive design concept, there are grids that don't, and there are media queries based designs possible without grids.

    If you feel like you have to control positioning down to microscopic level, grids may help you do that. In return, they'll ask you to conform to their naming rules inside your markup and CSS.

    On the other side, media queries will ask from browsers to know of them in order to work. This means that older browsers, legacy IE (IE8-) are left out.

    <hr>

    Responsive design and mobile first approach in particular, is a shift in concept you'll only get by actually doing it. Doing it... the right way! Thinking mainly desktop or letting past conditions in web design still dictate your present state of mind will not help you with this shift.

    Responsive design is not a fad. At the very least is a stepping stone towards something even better. Skipping the practical part and looking from the sidelines, only makes for a superficial understanding.

  19. #19
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by itmitică View Post
    To minimize data traffic, you suggest something like this: browser sniffing/device width detection and sending just enough CSS (along with "just enough" from other resources) for one page alone. This, following your smaller CSS file logic further.
    I don't suggest anything. I said nothing about device/browser sniffing. Nor do I suggest an alternative, because I don't have one myself yet.


    When the user switches from portrait to landscape or vice-versa, bad UX: waiting for additional resources to download, render again.
    Right because a slim mobile CSS stylesheet cannot be flexible, must be ridged! You know it is a lot easier making a flexible style sheet for a phone, right? God forbid, you merge the mobile stylesheet for both portrait and landscape into one. Did ya know, you can embed media queries! Easier just making your mobile stylesheet fluid and flexible.

    When the user goes to another page, bad UX: waiting for distinct additional resources to download, along with the content, render again.
    No cached resources? Very easy to make dynamic content cacheable.

    Can you spot a bad pattern here? You're thinking distinct pages, when you should be thinking entire websites.
    No, you are thinking distinct pages.

    Also, media queries are not for traffic control, are they? Why would you hold that against them beats me! Reusable, cached resources make for inexpensive traffic and good UX.
    Because it would have made sense not to download this stylesheet for a much larger device that it will never use. Why spend the time downloading it, then caching it into the small amount of RAM or taking up precious storage space while reducing the life of the Flash drive for something it is never going to use.

    Mobile devices, are slow, limited resources CPU, battery, RAM, storage. Slow data connections (not Wifi), limited, expensive that can charge per-MB for overuse. You should be designing you site with those in mind. Not throwing the whole of Fort-Knox at it.

    Let the user worry about data plans.
    You are joking...YOU MUST BE JOKING. Let the user of your site worrying about their data plans when your sites is sucking it down like crazy downloading all this guff?! Really?
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  20. #20
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by logic_earth View Post
    I don't suggest anything. I said nothing about device/browser sniffing. Nor do I suggest an alternative, because I don't have one myself yet.
    You are though.

    Quote Originally Posted by logic_earth View Post
    The reason one would want to send a mobile device a different stylesheet is not only for a smaller screen, but also to send it a smaller CSS file. That however, becomes futile because media queries do not do that.
    The only way to determine a mobile device is by sniffing. And you forget that mobile devices, smartphones and tablets, can have bigger *resolutions* than some netbooks or desktops.

    <hr>

    Quote Originally Posted by logic_earth View Post
    Right because a slim mobile CSS stylesheet cannot be flexible, must be ridged! You know it is a lot easier making a flexible style sheet for a phone, right? God forbid, you merge the mobile stylesheet for both portrait and landscape into one. Did ya know, you can embed media queries! Easier just making your mobile stylesheet fluid and flexible.
    Rant. No logic. And again, you're saying mobile CSS stylesheet. This means you're pro m.* variant. Good luck with that.

    <hr>

    Quote Originally Posted by logic_earth View Post
    Because it would have made sense not to download this stylesheet for a much larger device that it will never use. Why spend the time downloading it, then caching it into the small amount of RAM or taking up precious storage space while reducing the life of the Flash drive for something it is never going to use.

    Mobile devices, are slow, limited resources CPU, battery, RAM, storage. Slow data connections (not Wifi), limited, expensive that can charge per-MB for overuse. You should be designing you site with those in mind. Not throwing the whole of Fort-Knox at it.

    You are joking...YOU MUST BE JOKING. Let the user of your site worrying about their data plans when your sites is sucking it down like crazy downloading all this guff?! Really?
    Have you even tried responsive design? It seems to me that you're just talking.

  21. #21
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,208
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Off Topic:

    Remember to keep to the topic guys. No need to get personal. These are really interesting topics, so just argue your case as honestly as you can. That makes for much better reading.

  22. #22
    SitePoint Wizard
    Join Date
    Apr 2007
    Posts
    1,401
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Not that I have any experience in making mobile web design... but if it were up to me then I make a completely separate view code. Meaning separate CSS/HTML/possibly even javascript libraries. The reason is that UI for mobile and desktop UI are completely different. For example, goto youtube.com using your smartphone. It looks nothing like desktop youtube.com. I'm sure they don't reuse css/html/etc... Personally, I hate browsing desktop UI on my phone... so much dragging/resizing/etc... To me, I focus more on reuse of the business logic then presentation logic.

  23. #23
    SitePoint Wizard
    Join Date
    Apr 2007
    Posts
    1,401
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Let the user worry about data plans.
    I agree w/ this statement..if you're worried about data usage for downloading CSS then you are clearly missing the big picture. CSS also gets cached after being downloaded as well. I have bigger fish to fry then slimming CSS.

  24. #24
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sg707 View Post
    Personally, I hate browsing desktop UI on my phone... so much dragging/resizing/etc... To me, I focus more on reuse of the business logic then presentation logic.
    Responsive design is a direct response for the said problem. It uses media queries to improve exactly this: UX.

    One must understand this about MQs, that they're not CCs for controlling resource download.

    <hr>

    Quote Originally Posted by sg707 View Post
    For example, goto youtube.com using your smartphone. It looks nothing like desktop youtube.com. I'm sure they don't reuse css/html/etc...
    It's what I've already said a couple of times: http://m.youtube.com

    As a side note, youtube has an unfair advantage. It knows its users will have javascript enabled due to the nature of its content.

    <hr>

    Quote Originally Posted by sg707 View Post
    Not that I have any experience in making mobile web design... but if it were up to me then I make a completely separate view code. Meaning separate CSS/HTML/possibly even javascript libraries.
    Try that. You'll soon change your mind. Very soon. Completely separate it's not viable. Somewhat different, on the other hand, it is.

    <hr>

    Quote Originally Posted by sg707 View Post
    The reason is that UI for mobile and desktop UI are completely different.
    They're somewhat different. Completely different they're not.

    For example, take a look at Surface: www.microsoft.com/surface/

    It's desktop OS but it's not classic desktop, it's closer to mobile touch screen.

  25. #25
    SitePoint Wizard
    Join Date
    Apr 2007
    Posts
    1,401
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I still don't get it... so you use this "media queries" that defines CSS definition using the same HTML content. While this sounds very good but this reminds me of false impression of i18n. For example, in united states the name order is

    first_name middle_name last_name

    in other countries it's

    last_name first_name middle_name

    another is that zip code is typically the first field of address instead of street address like u.s. Imagine if they put i18n on a Japanese book that reads right to left... Yeah it's translated to English but reading from right to left will annoy the heck out of you and probably burn the book eventually.

    Trust me.. i18n solution does squat to address this problem.

    What I'm saying is that... I don't believe same HTML content should be delivered to desktop ui and mobile ui. For example, let say I have wizard based forms. If it's desktop UI then I may display about 20 input fields per page and display the error on the of the form. On mobile, I will limit the fields to be 5 per page to reduce scrolling. So how's media queries going to help in this case?


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
  •