SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot ontargett's Avatar
    Join Date
    Oct 2013
    Location
    England, UK
    Posts
    122
    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,354
    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
    23,585
    Mentioned
    411 Post(s)
    Tagged
    6 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
    122
    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
    274
    Mentioned
    4 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
    122
    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!


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
  •