SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    Non-Member
    Join Date
    Nov 2013
    Posts
    4
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Responsive Web Design

    i want to design web site for Responsive which sizes i have to design?

  2. #2
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would think less about designing for specific resolution sizes, and instead design your site in a way that will function properly at any screen size. If you base your site around certain mobile screen sizes, and then a new phone/tablet comes out with a new unique size, then your site might suddenly break on that device.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    which sizes i have to design?
    All of them but none of them specifically.

    As mentioned above it should be the content that dictates the breakpoint for you media query and not the width of some yet unknown device. Create a fluid site that scales all the way up and all the way down and you will collect all devices on the way without knowing anything about them.

    http://www.zeldman.com/2011/12/29/st...d-breakpoints/
    http://marcdrummond.com/responsive-w...oints-are-dead
    http://mobile.smashingmagazine.com/2...y-breakpoints/
    http://teamtreehouse.com/library/bui...-breakpoints-2

  4. #4
    SitePoint Member
    Join Date
    Dec 2013
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi klevinparker123,

    I think you should have to watch some tutorials from Youtube or Lynda.com then you must be understand which sizes or every thing you are learned from these site's tutorials.

    Regards,
    Mamoon

  5. #5
    SitePoint Member acodez's Avatar
    Join Date
    Jan 2014
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try some online tuts, check these links too-

    Sizes: http://mobile.smashingmagazine.com/2...hysical-units/
    How to Approach: http://www.lukew.com/ff/entry.asp?1816

  6. #6
    Non-Member
    Join Date
    Oct 2013
    Location
    India
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    Responsive web design means ensure that your website work well in on both large and small devices.While responsive design always consider in mind images, quick navigation, less loading time, typography. So design your website in a way that it run in all resolution sizes

  7. #7
    SitePoint Enthusiast AndyGambles's Avatar
    Join Date
    Jul 2006
    Location
    Scarborough, North Yorkshire, United Kingdom
    Posts
    45
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by klevinparker123 View Post
    i want to design web site for Responsive which sizes i have to design?
    If you design to 30x30 then it should fit on any device

    In reality responsive means not designing for a size but building a site that automatically adjusts to the size of the display.

  8. #8
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    19
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    From what I've known responsive is supposed to fit all sizes. So if you're going to choose one size, how can it be called responsive?

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

    Had to change mention codes to direct it at forum user (smarties83)

    Hi @klevinparker123 I asked the same question about responsive design a few months ago and got some great help, heres the link: http://www.sitepoint.com/forums/show...00#post5601500

    The most useful piece of information I found from this was this tutorial: http://www.1stwebdesigner.com/css/cr...ideo-tutorial/

    I have been doing web design for a year now, so I don't have the most advanced skill set as of yet and I easily followed this video. Found it very simple to follow and was quite chuffed with myself for building a responsive website.

    I'm sure there are plenty of other great tutorials out there, as @Paul O'B has mentioned above (I'd definitely take a look at these as he has helped me out a lot over the last few months! But just found the tutorial I have mentioned very helpful.

    @Smarties83 In relation to your question:

    From what I've known responsive is supposed to fit all sizes. So if you're going to choose one size, how can it be called responsive?
    I think you're asking the question that I originally asked on the subject. When you've finished the main code for your page you add some additional code as media query, this tells the page to behave in a certain way when the window is a certain size, here is some code that I did in the tutorial, hope this gives some kind of explanation:

    Code:
     @media only screen and (min-width: 150px) and (max-width: 600px)
    {
    .body {
    	width: 90%;
    	font-size: 95%;
    }
    
    .mainHeader img {
    	width: 100%;
    }
    
    .mainHeader nav {
    	height: 160px;
    }
    
    .mainHeader nav ul {
    padding-left: 0;
    }
    
    .mainHeader nav ul li {
    	width: 100%;
    	text-align: center;
    }
    
    .mainHeader nav a:link, .mainHeader nav a:visited {
    	padding: 10px 25px;
    	height: 20px;
    	display: block;
    }
    
    
    
    
    
    .content {
    	width: 100%;
    	float: left;
    	margin-top: 2%;
    }
    
    .post-info {
    	display: none;
    }
    
    
    .topcontent {
    	background-color: #fff;
    	border-radius: 5px;
    	-moz-border-radius: 5px;
    	-webkit-border-radius: 5px;
    	padding: 3% 5%;
    	margin-top: 2px;
    	margin-bottom: 4%;
    	
    }
    
    .bottomcontent {
    	margin-top: 3%;
    }
    
    
    .top-sidebar, .middle-sidebar, .bottom-sidebar {
    	width: 94%;
    	margin: 2% 0 2% 0;
    	padding: 2% 3%;
    }


    As I said I am just a beginner, so bear with me if any of this is incorrect or pretty simple...jus thought it might help.
    Last edited by ontargett; Jan 14, 2014 at 08:37. Reason: Mention code incorrect

  10. #10
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Interested in learning how to make a responsive website also.. checking all the links provided.. Thanks
    IT Rush <my blog

  11. #11
    Non-Member
    Join Date
    May 2014
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you want to creating website for
    mobile view you can use
    Smartphone <480px

    for tablet:
    Tablets portrait <768px
    Tablets landscape >768px

    for desc top:
    Desktop >1024px

    This dimensions are not fixed one.
    If you want change the dimension based on your device.


    First of all you have to add meta viewport name and content in the header position of html.

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


    And then add the media query in your css styles page:

    @media all and (max-width: 420px) {
    /* CSS coding for your device*/
    }


Tags for this Thread

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
  •