Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 48fa5571d7
Fetching contributors…

Cannot retrieve contributors at this time

128 lines (89 sloc) 4.985 kb
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<meta name=viewport content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
<title>Web design cheatsheet&mdash;Sam Penrose Design&mdash;Creative designer and graffiti artist based in Leeds, UK</title>
<link rel=stylesheet href=css/style.css>
<link rel="shortcut icon" href=favicon.png>
<link rel=apple-touch-icon-precomposed href=icon.png>
<link type=text/plain rel=author href=humans.txt>
<script src="http://use.typekit.com/eey0lsm.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
</head>
<body>
<div class=wrapper>
<a href=index.html class=logo><img src=img/logo.png alt="Sam Penrose design logo"></a>
<hr>
<ul class="nav main-nav">
<li><a href=index.html>Home</a></li>
<li><a href=about.html>About</a></li>
<li><a href=work.html>Work</a></li>
<li><a href=testimonials.html>Testimonials</a></li>
<li><a href=contact.html>Contact</a></li>
</ul>
<hr>
<div class=content>
<h1>Definitions of common web design terms</h1>
<dl>
<dt>Responsive web design</dt>
<dd>Designing sites using un-fixed widths and media queries so that it&rsquo;s fluid and adapts to any device. Fixed width sites can&rsquo;t work as nicely on an array of devices so make sure you define widths in percentages and let the page fill the available screen.</dd>
<dt>Mobile-first</dt>
<dd>Design for the smallest screen first; it&rsquo;s easier to make a site bigger than smaller. This also makes sure you concentrate on keeping the site lean, small and fast and focus on the content&hellip;</dd>
<dt>Content-out</dt>
<dd>Start with the content <em>first</em>. A site without content is totally pointless to pay this the most attention by starting with it.</dd>
<dt>Progressive enhancement</dt>
<dd>Browsers <strong>do not</strong> work the same, they never have and never will. Rather than trying to make everything look the same in every browser design for the lowest common denominator and <em>progressively enhance</em> the design for better browsers.</dd>
<dt>Designing in the browser</dt>
<dd>Photoshop <em>has</em> to work in pixels and at fixed sizes, this goes against responsive web design in that it is not fluid. Designing in the browser makes jobs quicker and means you aren&rsquo;t designing a fixed-width website.</dd>
</dl>
</div><!-- /content -->
<div class=sub-content>
<h2>Links</h2>
<h3>Responsive web design</h3>
<ul>
<li><a href=http://www.alistapart.com/articles/responsive-web-design/><cite>Responsive Web Design</cite></a>&mdash;article</li>
<li><a href=http://www.netmagazine.com/features/responsive-web-design><cite>Responsive Web Design</cite></a>&mdash;article</li>
<li><a href=http://www.abookapart.com/products/responsive-web-design><cite>Responsive Web Design</cite></a>&mdash;book</li>
</ul>
<h3>Mobile-first</h3>
<ul>
<li><a href=http://www.lukew.com/ff/entry.asp?933><cite>Mobile First</cite></a>&mdash;article</li>
<li><a href=http://www.netmagazine.com/features/mobile-first><cite>Mobile First</cite></a>&mdash;article</li>
<li><a href=http://www.abookapart.com/products/mobile-first><cite>Mobile First</cite></a>&mdash;book</li>
</ul>
<h3>Content-out</h3>
<ul>
<li><a href=http://www.markboulton.co.uk/journal/comments/a-richer-canvas><cite>A Richer Canvas</cite></a>&mdash;article</li>
</ul>
<h3>Progressive enhancement</h3>
<ul>
<li><a href=http://paulirish.com/2011/tiered-adaptive-front-end-experiences/><cite>Tiered, Adaptive Front-end Experiences</cite></a>&mdash;article</li>
<li><a href=http://24ways.org/2009/ignorance-is-bliss><cite>Ignorance is bliss</cite></a>&mdash;article</li>
</ul>
<h3>Designing in the browser</h3>
<ul>
<li><a href=http://csswizardry.com/2010/10/designing-in-the-browser-leads-to-better-quality-builds/><cite>Designing in the browser leads to better quality builds</cite></a>&mdash;article</li>
<li><a href=http://24ways.org/2009/make-your-mockup-in-markup><cite>Make your mockup in markup</cite></a>&mdash;article</li>
</ul>
<hr>
<a href=portfolio.html class=promo>
Like what you hear? <b class=go>Let me know&hellip;</b>
</a>
</div><!-- /sub-content -->
</div><!-- /wrapper -->
<div class=footer>
<p><small>&copy; 2011 Copyright Sam Penrose</small></p>
</div><!-- /footer -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-22110460-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.