Welcome to Rise Forums

Join our fantastic community to connect with like-minded website owners, WordPress users, and online entrepreneurs.

Responsive web design challenges

Discussion in 'Design & Development' started by Zoe Schmidt, Jan 21, 2016.

Thread Status:
Not open for further replies.
  1. Hello guys! I'm a freelance photographer who's trying a hand in web design at the moment. I've got this client who wants to have a responsive website badly! And honestly I realize I have a lot to learn in this field, but don't want to miss out on the opportunity to get experience and profit! ;)
    So I've got a few questions for the design gurus here :)
    Is it difficult to code a responsive online resource without using frameworks such as Bootstrap or Foundation? Is there any good learning aides/books/anything to get the needed knowledge from that you could recommend?
    Many thanks in advance!
     
  2. Hello Zoe,
    My recommendation is use Bootstrap or Foundation. They will make your job easier and will rapid your development. They have lot of pre made component which will help you lot during development. Also community along these framework is very big and helpful.

    But if you still insist, you should start learning css3 media query first.
    Try http://www.w3schools.com/css/css3_mediaqueries.asp
    Or you can search google for responsive design tutorial. Its not that very tough to learn.
     
    Zoe Schmidt likes this.
  3. Hello Zoe, welcome to the wonderful world of web wreathing (took a little while to find anything close to "design" that began with a "w")! I'll address your questions by rebutting Sanjay :)

    If you don't have to use bootstrap (or any other framework for that matter), don't. Just because it's easy, doesn't mean you should necessarily do it that way. 15 years ago table-based web design was the easy way to go; it didn't make it right.

    There are two glaring issues for me regarding bootstrap: bloat and forward compatibility.

    Bloat is pretty straightforward: the CSS is a whopping 126KB out of the box. You can customize your download, pick out only what you need, of course - but if you're going through all that effort, can't you just write your own CSS? On top of that, you're required to use 29KB of JS - and as a purist, while JS is nice, it shouldn't be required for a website unless it is a true application.

    Forward Compatibility - Look at the differences between Bootstrap 1 and 2. Then 2 and 3. The changes are more than "We improved from absolute widths (that is, "780px width" for a style) to relative widths (using percentages)." Classes change. This means when Bootstrap goes to version 4, history says you won't be able to simply upload the new CSS to your server - you'll need to rewrite all of your existing HTML. Talk about a nightmare scenario! (and, for the record: I have had to deal with the upgrade from 2 to 3 before - so this isn't some hypothetical).

    CSS (and media queries) should be learned anyway, but NOT from w3schools. Here's one post (of many) as to why: http://gal.steinitz.com/blog/2013/07/21/why-w3schools-is-bad-for-the-internet/

    Documentation for Media Queries can be found on Mozilla's website at:
    https://developer.mozilla.org/en-US/docs/Web/CSS/@media

    While you should certainly learn all the options, your basic mobile media query will look like this:

    /* ... First, all your "base" styles, which we will assume were built for standard displays - no larger than 1280px ... */

    /* Tablet */
    @media screen and (max-width: 960px and min-width: 721px) {
    /* All your tablet styles go in here... */
    }

    @media screen and (max-width: 720px and min-width: 421px) {
    /* More styles for smaller displays, but not quite mobile-small */
    }

    @media screen and (max-width: 420px) {
    /* Mobile styles here */
    }

    Your media queries will undoubtedly get a little more complicated, as you can have retina displays and whatnot messing things up, but you get the gist.
     
    Zoe Schmidt likes this.
  4. Well, I agree
    But I think learning some basic from w3 school is not that bad. It has very easy interface and learning tools. I agree that it has some outdated section but still many of there part is good for beginner.
    I am self taught developer and I start learning from it, with time I find more better and advance tutorial but certainly w3school gave me comfortable start at beginning.

    Bootstrap and similar tools are meant to help developer speed the development time. I agree that using your own css and learning will help you right smaller and more flexible code.
    Not only this, you got lot of free starting templates, code snippets and component for these framework from internet that may take your lot of time if you will code yourself and may frustrate you sometime
     
    Zoe Schmidt likes this.
  5. Hello guys! Oh, wow, thanks very much for such detailed answers to my question!
    Firstly, how are you doin' Sanjay? :)
    Thanks for this useful piece of information! I figure that I have to update my CSS knowledge a lot, since I know some basic stuff, but I still have to go deeper into the responsive design thing. I've actually tried learning some of Bootstrap using a Bootstrap a W3Schools tutorial and, I basically got the idea. It's not as difficult as it might seem, and I absolutely agree that W3Schools resources are ok for starters because they put together all of the stuff which is cutting-edge now!

    Hello, k06mars!
    And thank you so much for such a detailed explanation on media queries and providing some learning aides.
    I will definitely check them out! So much information to process, wow :jawdrop:

    Anyway, the reason I've brought up this topic was because I have a website I've made for a friend, it's more of a learning project though. So while building it, I've used one of the free/public domain HTML/CSS templates as a basis, but modified it for the needs of my friend's business. And now I've faced a problem because he'd like to make it more mobile friendly as well as attach a CMS to it... It seems like a total nightmare to me because I know nothing of PHP and it's like rocket science to me. But I guess, I should start with media queries to figure out the responsiveness thing and as for the CMS... we'll see.

    Now I'm thinking that I might have been wrong from the very beginning... Shouldn't I have just convinced my friend to buy a theme from a site like
    TemplateMonster or other templates provider with all the possibilities they offer regarding the CMS compatibility and eCommerce plugins attachment (if he considers that in the future)? That of course would have been easier and less time consuming. But I guess there's no turning back.

    Sorry guys, I'm not allowed posting links for the time being, so I have to delete them from the quotes :(
     
  6. Hey guys! I've tried the links you've supplied me with over the weekend and tried to implement @media queries to the code of the resource I'm working on and everything worked well! Thanks again guys!!
     
    Sanjay Ojha likes this.
  7. I use bootstrap for responsive design and havent used anything else, bootstrap is a real good time saver.
     
Thread Status:
Not open for further replies.

Share This Page