SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2003
    Location
    scarborough
    Posts
    140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    New to responsive design

    I am new to responsive design. Where is a good starting point.

    I particularly want to learn how to create a site for phones so the text appears readable straight away. I would rather detect the usable width of the browser rather than the width of the device

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by hairybobby View Post
    I am new to responsive design. Where is a good starting point.
    Perhaps start with a seminal article like this one, which got the ball rolling: http://alistapart.com/article/responsive-web-design/

    I would rather detect the usable width of the browser rather than the width of the device
    On mobiles, that's basically the same thing. The browser fills the screen. Media queries (the bread and button of responsive design) work off the screen width.

  3. #3
    SitePoint Zealot
    Join Date
    Mar 2003
    Location
    scarborough
    Posts
    140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that Ralph. I am really after a very very simple template which I can understand which would have the following

    1. It would be text only content (it would have a title)
    2. Max width 1500 px . With big screen sizes 1900 pixels then the design would center
    3. The width of the page would adjust to the width of the browser on the fly

  4. #4
    SitePoint Zealot
    Join Date
    Apr 2010
    Location
    West Kent, UK
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Take a look at Twitter Bootstrap and/or Zurb Foundation.

    You might not want to use them but they are both very widely regarded (an implemented). They come with plenty of documentation that has helped me to understand responsive design.

    Martin

  5. #5
    SitePoint Zealot
    Join Date
    Mar 2003
    Location
    scarborough
    Posts
    140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When I say text only... I mean that the content of the webpage would just be an essay with a title which continually adjusts itself to the width of the screen. With any js and css included in the webpage itself..

    I just want this most basic of templates so I can learn and build
    Last edited by hairybobby; Jan 31, 2014 at 08:40. Reason: clarify

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by hairybobby View Post
    Thanks for that Ralph. I am really after a very very simple template which I can understand which would have the following

    1. It would be text only content (it would have a title)
    2. Max width 1500 px . With big screen sizes 1900 pixels then the design would center
    3. The width of the page would adjust to the width of the browser on the fly
    You could start with something like this:

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Untitled Document</title>
    <style>
    /* for IE8+ use border box */
    *, *:before, *:after {
      -webkit-box-sizing: border-box; 
      -moz-box-sizing: border-box; 
      box-sizing: border-box;
    }
    /*  */
    html, body {
    	margin:0;
    	padding:0;
    }
    body {
    	background:#666;
    	color:#fff;
    	font-size:100%;
    	line-height:1.5;
    	padding:30px 5px;
    }
    .wrap {
    	max-width:1500px;
    	padding:20px;
    	margin:auto;
    	background:#f9f9f9;
    	color:#000;
    	border:1px solid #000;
    }
    h1, p { margin:0 0 1em }
    h1 {
    	font-size:2em;
    	text-align:center;
    }
    p { font-size:0.9em }
    </style>
    </head>
    
    <body>
    <div class="wrap">
    		<h1>The most basic page</h1>
    		<p>Astonishment. Tesseract, rings of Uranus Orion's sword cosmic fugue! Corpus callosum. Shores of the cosmic ocean? A mote of dust suspended in a sunbeam. Vanquish the impossible hundreds of thousands something incredible is waiting to be known. Bits of moving fluff great turbulent clouds! Jean-François Champollion Tunguska event as a patch of light, tendrils of gossamer clouds. Two ghostly white figures in coveralls and helmets are soflty dancing encyclopaedia galactica quasar cosmic fugue! Quasar hearts of the stars, cosmic fugue Orion's sword, decipherment tingling of the spine muse about birth, hundreds of thousands.</p>
    		<p>Corpus callosum! Ship of the imagination Rig Veda. Prime number with pretty stories for which there's little good evidence tesseract, radio telescope at the edge of forever Vangelis Orion's sword something incredible is waiting to be known, Rig Veda. Flatland the sky calls to us, cosmic fugue network of wormholes courage of our questions great turbulent clouds! Hundreds of thousands, dispassionate extraterrestrial observer preserve and cherish that pale blue dot. Hydrogen atoms dream of the mind's eye courage of our questions muse about concept of the number one brain is the seed of intelligence, Cambrian explosion galaxies, how far away tendrils of gossamer clouds brain is the seed of intelligence, rogue Rig Veda the carbon in our apple pies?</p>
    </div>
    </body>
    </html>
    The viewport meta tag tells the mobile not to scale the page to fit otherwise it will assume a 980px width and shrink to fit. With the viewport meta tag in place the text will not be shrunk and the layout will wrap to the smaller mobile device.

    The nest step would be to add media queries if you are using design elements that don't fit into smaller devices and then adjust the layout to suit.

  7. #7
    SitePoint Zealot
    Join Date
    Mar 2003
    Location
    scarborough
    Posts
    140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul O'B

    I quite like that. I was just asking for a simple basic page to help me learn. But there is something about a minimalistic approach with designs. I particularly like the grey background.

  8. #8


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
  •