New to responsive design

HTML & CSS
1

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

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

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

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

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

6

You could start with something like this:


<!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

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

Here’s some more reading matter :slight_smile:

http://www.smashingmagazine.com/2013/03/01/logical-breakpoints-responsive-design/