Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
128 lines (89 sloc) 4.87 KB
<!DOCTYPE html>
<html lang=en>
<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=""></script>
<div class=wrapper>
<a href=index.html class=logo><img src=img/logo.png alt="Sam Penrose design logo"></a>
<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>
<div class=content>
<h1>Definitions of common web design terms</h1>
<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>
<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>
<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>
</div><!-- /content -->
<div class=sub-content>
<h3>Responsive web design</h3>
<li><a href=><cite>Responsive Web Design</cite></a>&mdash;article</li>
<li><a href=><cite>Responsive Web Design</cite></a>&mdash;article</li>
<li><a href=><cite>Responsive Web Design</cite></a>&mdash;book</li>
<li><a href=><cite>Mobile First</cite></a>&mdash;article</li>
<li><a href=><cite>Mobile First</cite></a>&mdash;article</li>
<li><a href=><cite>Mobile First</cite></a>&mdash;book</li>
<li><a href=><cite>A Richer Canvas</cite></a>&mdash;article</li>
<h3>Progressive enhancement</h3>
<li><a href=><cite>Tiered, Adaptive Front-end Experiences</cite></a>&mdash;article</li>
<li><a href=><cite>Ignorance is bliss</cite></a>&mdash;article</li>
<h3>Designing in the browser</h3>
<li><a href=><cite>Designing in the browser leads to better quality builds</cite></a>&mdash;article</li>
<li><a href=><cite>Make your mockup in markup</cite></a>&mdash;article</li>
<a href=contact.html class=promo>
Like what you hear? <b class=go>Let me know&hellip;</b>
</div><!-- /sub-content -->
</div><!-- /wrapper -->
<div class=footer>
<p><small>&copy; 2012 Copyright Sam Penrose</small></p>
</div><!-- /footer -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-22110460-1']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);