1. While you are free to lurk, we welcome you to register for a (free) account so that you will be able to participate in forum discussions.

Responsive Web Design

Discussion in 'Web Development' started by toradrake, Nov 13, 2014.

  1. toradrake Member


    According to Avatar New York in an article at Freshnews.com (<--- link to article) "As more consumers begin to browse the Internet and purchase products on mobile devices like smartphones and tablets, the need for responsive web design becomes more apparent. Sometimes websites can look different depending on the user's screen size and resolution. This can result in distorted images and illegible, misplaced navigation bars. Responsive development is the answer to that dilemma. When it come to intelligent web design, New York brands know that responsive development is the future. So, what is responsive web design?"

    What do you think?

  2. Shamzblueworld New Member


    Responsive web design is what adjusts to the screen size of the viewer accordingly, it does not distort or misplace anything. I also am a huge fan of this phenomenal new development, it is surely a need of the hour and definitely something to work on, with so many devices coming up now a days with different screen resolutions, it is the future.

  3. calebmelvern New Member


    What I find interesting is that some big sites don't use responsive designs at all. They do, however, usually compensate for this by having an app so their mobile users can still access their content with ease. But sometimes, I still prefer the desktop version while browsing on my phone. Some sites have the option of switching to their desktop site and mobile site.

  4. Shamzblueworld New Member


    It depends on what sort of mobile device you are browsing on, if it has a big enough screen resolution, then sure, full site is preferred, but on smaller screen phones, I'd prefer a mobile theme or a responsive theme.

  5. Billy New Member


    I did this to all of my sites a while back. I saw what they looked like on a mobile and had to change them immediately. No one would want to browse a site that wasn't meant to be viewed on mobile, it would be too frustrating.

  6. calebmelvern New Member


    Why is that? Was it that ugly? Or because it would make navigation worse?

  7. Billy New Member


    You cannot see the full screen, as you would be able to on a PC. You'd need to scroll around to see everything, which is extremely irritating.

  8. Shamzblueworld New Member


    What did you do actually? Did you made the design responsive?

  9. Billy New Member


    I just switched to a responsive theme. If you use Wordpress you can easily find a lot of free responsive themes to use. It takes a few minutes, that's all.

  10. Shamzblueworld New Member


    I know that and that's why I asked. Why is it irritating then? I mean the theme adjusts according to the screen resolution which is better than to look all screwed up without the responsiveness. Why didn't you like it then?
    I also have a responsive design at my blog here http://awebmastr.com and I like the fact that it can be viewed properly even on a smaller screen of a smartphone as well as on a big LCD.

  11. ducklord Member


    I've designed my own responsive theme for my own website 'cause I was bored of all the restrictions of existing themes. Some of the best looking ones had problems like, say, "only showing up to five words in posts titles", others were "too strict" with their design and it wasn't easy to change bits and parts of them without breaking the rest.

    So, I dived in code, learned the basics of HTML and CSS, how to properly... er... copy and paste PHP code (that's what's needed to create a simple WordPress theme) and, done, in two days I had my first theme ready.

    Now, about three years later, I can create any design you think of with HTML and CSS, can understand what's the PHP code I copy-paste (and can write bits of my own - but I'm still a total noob) and wondering why the heck I thought ready themes seemed like a good idea "back then".

    By knowing how to design your own theme, you're free to design your own site. You can "design your way around" existing plugins and make them seam a seamless part of the total experience and generally create a web presence that doesn't seem cookie-cutter. And I'm not talking blog-like designs here but of CNN and Verge style "complexity".

    And all this time not even once have I thought of creating a "static" and not "fluid", "dynamic", "responsive" design. I mean... Why? Why would you want to restrict the display of your site to a single and specific resolution, to a single and specific device? We're surrounded by devices with different screen sizes and, whenever possible, we should think of all of them as possible gateways to our sites.

    Restricting to one resolution (that's what the non-responsive, non-fluid, "old" way of design is) is exactly the same as shooting your own foot!

    I do have to confess that it's tempting, though, when you're a designer. As a designer. Treating it as a design problem. 'Cause working in a static space has different rules, different restrictions but, most importantly, different freedoms. As a site designer, it's something worth playing around with. As a site owner in the 21st century, though... Why?

  12. ockham New Member


    I totally agree. In fact, it's something I have been trying to teach myself recently. (I'm sort of getting the hang of it.) In concept it's really not that difficult a thing to do, but there are those out there who come up with some insanely complex methods for doing it. I'm looking at you, 960 Grid System.

    There are some sites that look completely different on mobile than they do a desktop browser. It's actually pretty cool seeing how CSS can do this via @media query. I remember one site I redesigned had something of a responsive design. The leftmost side of the screen had a menu, then the right had the content. Once the screen got small enough, the content would automatically pop to underneath the menu - perfect for the thinner screens found on mobile devices.

  13. Ray Active Member


    Your absolute best source for responsive design is getbootstrap.com

    You'll not only learn all about responsive design but you can even get the html, javascripts and css codes, necessary to build or convert your website.

  14. ducklord Member


    @Ray Er...eeh... Nope..! I confess that I haven't used Bootstrap, and it might be awesome. The reason I haven't used it, though, is the very reason why it shouldn't be used: it's Bootstrap.

    By this I mean that "it's a solution for a problem its creators recognized existed". But this "problem" was too general. Too far and wide. Bootstrap prides itself, and rightly so, that with it you can create any type of responsive site, for any device.

    The problem is that I'm creating ONE site each time. Not "any" site. ONE site.

    By using Bootstrap you bring with you code for "any" site. Not for "your" site. Then, you have to ADD to this MORE code, on your part, to truly customize it.

    Thus, instead of having, say, one HTML and one CSS file, both 128KBs in size, you have HTML + CSS + Bootstrap (and its HTML, its CSS, its JavaScript) that multiply the size to I don't know how much more.

    To those that say that with Bootstrap you can create beautiful responsive sites easily, well, the things actually required to build beautiful responsive sites easily in one hour more or less is a combination of Emmet-Less-Fontawesome in something like Sublime or Brackets. And a browser. :-D

  15. Ray Active Member


    I can't say that I understood everything you've said but..., it sounded a bit negative.

    Not being one who would even attempt to build a "beautiful" site, I'm more concerned with its functionality, specially when you have a directory script running the site. Maybe you'd like to pay a visit to my directory, and experience Bootstrap for yourself, from the user (visitor) side. Be sure to experience it in different browsers and screen sizes. Then come back and comment on your experience. I know I'll be the most benefited by your comments because it would help me identify possible needed improvements.

    Converse likes this.
  16. ockham New Member


    Bootstrap... been hearing about that for years. I should probably look into that eventually. Perhaps I'll try to find a WordPress theme that uses Bootstrap?

    Of course, Bootstrap is just one of several frameworks and libraries I should get familiar with.

  17. ducklord Member


    @Ray Saw your site. Could need a little touching up, but the main problem I find in it is the fact that, to be "responsive", you hide stuff. Why? I mean that, when the screen is smaller, some stuff doesn't show up. To see "live" your elements disappearing, grab your browser window and resize it to a smaller size.

    A better design would try to "fit" all your content in your pages, by "reflowing" it to different parts of the page. I do like the fact that elements change form, though - like the menu becoming a button so as to not take up much space.

    For now, it's good. Not awesome, not even really-really great, but good. "Perfectly acceptable" from a visitors point of view. I would, though, try to find a way to display "all stuff" for mobile users as well, it's a shame you're hiding it instead of "presenting it differently".

    As for "what I was saying, that didn't understand everything", well, to put it differently, think of Bootstrap as a platform, a "collection of code" on which you can build ANY site - from the PlayStation blog to CNN to the simplest of personal blogs. That means that "it contains code for ALL those purposes", but you need code only for YOUR site. So, by using it, you also bring on your site code intended for other projects. Code that is 'redundant" on your case, enlarging your project and possibly slowing down a bit your site.

  18. Ray Active Member


    @ducklord Thank you for visiting my site and offering these comments on your findings. I think that, almost all the websites out there could use "a little touching up", including this one, that's why I'm always looking for ways to improve it.

    As to "hiding stuff", you did not mentioned the actual page you looked at but, this is not only common practice in responsive design, its a necessity, in order to provide a better "Mobile" user experience by keeping the user from having to scroll excessively. So, the practical method is to show the critical content first, and limit the use of images and other stuff that do not contribute to the user needs when viewing the page from a mobile device.
    The only reason you'd notice the "hidden stuff", (like you just did) is if you went from a desktop screen and re-sized it to a smaller size, that is not how you'd normally arrive at a mobile web page, you'd do this from a mobile device.
    Try that same test by viewing, for example... webdirectoryforum.org site, and you'll see the same practice.

    Again, remember that you're looking at a web directory, not a blog. So, you're saying "A better design would try to "fit" all your content in your pages". Okay, lets say you're in your car, you're looking for information, and decide to visit my site from your mobile device to find what you're looking for. Are you really interested in seeing "all the content in my pages"? or you just want to see what's relevant to your search?

    I'll put that one on my WIN column, I thank you for the complement, and promise, I'll try to do better... Thank You!

    Last edited: Dec 24, 2014
    Converse likes this.
  19. ducklord Member


    @Ray Let me clarify that when I say "it's good" I don't mean "I'd design something better". I mean "it's as good as I'd design a site such as this" :)

    I never said "I'm an awesome designer". I'm just a "just-good" designer, and not even that, so your site is in some ways better than what I'd create.

    As for the "it's a shame to hide stuff", let me clarify a bit more: it's a shame hiding stuff you've already loaded, since that makes the page load more stuff than it displays. Except if I'm mistaken, and if your site is displayed in smaller screen, it doesn't actually load the stuff it hides. From a quick check (I refreshed the page while keeping Firefox's window small-ish and then enlarging it), it does.

    It would be better if you checked the resolution through Javascript and then load a different version of your site with only the stuff you want to display on mobile screens, than loading 100% of stuff and displaying 50% - 70% of it - the rest "gets lost" but loads anyway.

    I don't know JavaScript so I can't tell you how to do that. In my case, since as you mention my site - and other projects I created - aren't like yours, I never had to "hide" stuff. I did, though, present it differently in some cases, to win some space and keep the page simple. What I did was the same you may have seen with "spoilers", where if a screen was less-than-X, I "hid" the content in a box with a button that allowed the visitor to expand it at will - like you do with your menu. And not just at one point of the site, but as "lines" with "additional content" that "split" the rest of the stuff horizontally.

    The reason to do it this way is that if you "just hide" content from mobile users, it's almost the same as... charging them for something they didn't get! The reason? Mobile data is expensive and has way more restricted caps than desktop. If all sites "hid" 30% more content when we visited them from our mobile devices, we'd have to pay at least 30% more at the end of each month for "additional data charges"!

  20. Ray Active Member


    @ducklord I think you may have mistaken me for a "web designer", I did not intend to misrepresent myself as one.

    I'm just one of those guys that knows "Just Enough To Get In Trouble", when it comes to any of that web design stuff. All I'm concerned with is making the stuff work so that its half-way presentable, and it keeps Google happy, in terms of what they call "user experience", "page speed", usability and all that other stuff. I wish I had the time, and the capacity to learn all that stuff, as you have done.

    I'm sure that there are several different ways to accomplish responsive web design, including your methods, as well as the use of Bootstrap as I did. As for the other arguments you've presented, we all have our own opinions.
    Thank you for taking the time, maybe some one else here wants to continue this, I'm done.

    Last edited: Dec 26, 2014

Share This Page