SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Zealot ontargett's Avatar
    Join Date
    Oct 2013
    Location
    England, UK
    Posts
    162
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Responsive Design

    One of my projects in the future is to design a friends website, at the moment he uses one of these build your own websites which he pays monthly for. It is very basic and I have notice that the mobile version of this website is shoddy.

    I am intrigued to find out how a website is made responsive-without going into the nitty gritty as I will learn this in the future, but what is done? Are there two separate websites made or is there certain code that makes a website behave in a certain way when displayed on a tablet or mobile device?

    Thanks in advance

  2. #2
    SitePoint Wizard bronze trophy conradical's Avatar
    Join Date
    Jan 2005
    Location
    Atlanta
    Posts
    2,355
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ontargett View Post
    I am intrigued to find out how a website is made responsive-without going into the nitty gritty as I will learn this in the future, but what is done?
    It's most done with CSS. There are new features of CSS that set styles depending on the width of the screen, meaning you can style a layout appropriately for various screen sizes. Hence the "responsive" description.

  4. #4
    SitePoint Zealot ontargett's Avatar
    Join Date
    Oct 2013
    Location
    England, UK
    Posts
    162
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by conradical View Post
    Wow! Thanks very much for pointing out this article, after going through this article I understand how its done. I thought it was going to take me a while to grasp the concept of "media queries" but I can see how simple it is now. Would recommend anyone that has the same problem as me to read this.

    As I am intrigued to learn how a website is built, to aid my learning, I view a lot of the websites code to see how it works. I have come across the @media only screen code quite a few times now, and now I understand what the code executes.

    Thanks again!

  5. #5
    SitePoint Member
    Join Date
    Dec 2013
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So what would be the screen size I should set up in order for the css code to work on mobile phones?
    Thanks!

  6. #6
    SitePoint Addict
    Join Date
    Aug 2013
    Location
    New Zealand
    Posts
    305
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    I usually just use "device-width" size in the <meta viewport...> clause and then use css that allows the content to automatically resize. Sometimes I use @media queries to specify different css for different device widths.

  7. #7
    SitePoint Member
    Join Date
    Nov 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ontargett View Post
    Wow! Thanks very much for pointing out this article, after going through this article I understand how its done. I thought it was going to take me a while to grasp the concept of "media queries" but I can see how simple it is now. Would recommend anyone that has the same problem as me to read this.
    Wow, I am in the exact same boat!
    Have gotten pretty good at coding but was thinking responsive design was way out there.
    Searched and searched through tutorials that I couldn't even start to wrap my head around...discouraging.

    Then found this:
    Create a Responsive Website Using HTML5 and CSS3 - Video Tutorial
    http://www.1stwebdesigner.com/css/cr...ideo-tutorial/

    And I was like whaaaaa? That's such a simple concept!
    Quite fun as well once you get the gist.

    Hope this helps as well, the guy urges you to type along with him which I recommend, as it is also an excellent refresher course on building a basic page.

  8. #8
    SitePoint Zealot ontargett's Avatar
    Join Date
    Oct 2013
    Location
    England, UK
    Posts
    162
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Awesome, thanks for that link, will have a go at it in the near future. It looks a lot easier than what I first thought!

  9. #9
    Non-Member
    Join Date
    May 2014
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Add meta view port name and content in the header position of html file.


    <meta name="viewport" content="width=device-width, initial-scale=1.0">



    and then add the media query for you devices.

    @media screen and (max-width: 980px) {
    /* css coding for responsive*/
    }

    and
    @media screen and (max-width: 480px) {
    /* css coding for responsive*/
    }


    if you want change the width size based on your device.

  10. #10
    SitePoint Wizard
    Join Date
    Apr 2007
    Posts
    1,401
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ontargett View Post
    One of my projects in the future is to design a friends website, at the moment he uses one of these build your own websites which he pays monthly for. It is very basic and I have notice that the mobile version of this website is shoddy.

    I am intrigued to find out how a website is made responsive-without going into the nitty gritty as I will learn this in the future, but what is done? Are there two separate websites made or is there certain code that makes a website behave in a certain way when displayed on a tablet or mobile device?

    Thanks in advance
    Kind of surprise that no one mentioned to use Bootstrap to make responsive design.

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by sg707 View Post
    Kind of surprise that no one mentioned to use Bootstrap to make responsive design.
    We are much too kind to do that to him.

  12. #12
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,259
    Mentioned
    245 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by sg707 View Post
    Kind of surprise that no one mentioned to use Bootstrap to make responsive design.
    I don't know what we were thinking... although this thread is old, it is not that old!

  13. #13
    SitePoint Zealot ontargett's Avatar
    Join Date
    Oct 2013
    Location
    England, UK
    Posts
    162
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    So what's the problem with Twitter Bootstrap, have used it in the tutorial as mentioned above, does it have problems?

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ontargett View Post
    So what's the problem with Twitter Bootstrap
    Nothing, per se. I just don't like frameworks, because I like to start with a blank canvas and I don't want to try to mess with a bunch of pre-written code. But that's just me, I guess.

  15. #15
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,237
    Mentioned
    194 Post(s)
    Tagged
    2 Thread(s)
    Not just you.

    I usually avoid frameworks because they tend to necessitate a "convention" and I am used to, and hence prefer, more liberty.

    But - I think if you are more intrested in RAD then learning a framework that works for you will save you time in churning out websites.

  16. #16
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Mittineague View Post
    learning a framework that works for you will save you time in churning out websites.
    I don't like the idea of having lots of tools between me and the product—tools that you have to learn and that are always changing, updating, doing out of date etc. Lots of sites are build on Bootstrap, WordPress etc... and then they have extra layers of complexity/breakage each time there's an update. Just seems a crazy, unnecessary mess to me.

    It's hard enough keeping up with core technologies, without having to keep up with the ever-changing array of unnecessary tools.

  17. #17
    SitePoint Zealot ontargett's Avatar
    Join Date
    Oct 2013
    Location
    England, UK
    Posts
    162
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Right ok fair points.

    Just starting out in web design I've found them useful. But will look into starting from
    A "blank canvas" in the future. You don't know of any tutorials or websites where I can see this is action, from
    Start to finish?

  18. #18
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ontargett View Post
    You don't know of any tutorials or websites where I can see this is action, from
    Start to finish?
    There are tons of books, video courses, YouTube vids etc. on CSS, which cover how to construct a layout from scratch. Really any CSS learning resource should do the job.

    It's not for me to say you shouldn't use a framework, but I'd advise at least learning how layout works before relying on a crutch like Bootstrap. You may find (like me) that you are better off without something like this.

  19. #19
    SitePoint Zealot ontargett's Avatar
    Join Date
    Oct 2013
    Location
    England, UK
    Posts
    162
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I've seen a lot of tutorials, the amount of them is overwhelming when looking through them.

    I have tried learning from books but find online tutorials a lot more effective. Didn't know if there was a popular youtube channel or website that most people tend to use


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
  •