fullstackpython.com/web-design.html at pre-jan-content-reorder · pythonthings/fullstackpython.com

History

206 lines (205 loc) · 13 KB

Raw

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

<!DOCTYPE html>

<title>Web Design - Full Stack Python</title>

<!--[if lt IE 9]>

<![endif]-->

<style>

.toc-indent {padding-left: 25px;}

.toc-more-indent {padding-left: 37px;}

</style>

var _gaq = _gaq || [];

_gaq.push(['_setAccount', 'UA-19910497-7']);

_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> </head>

<body>

<span class="logo-title"><a href="/">Full Stack Python</a></span>

</div>

</div> <div class="row">

<h1>Web Design</h1>

<p>Web design is the creation of a web application's style and user interaction

using CSS and JavaScript.</p>

<h2>Why is web design important?</h2>

<p>You don't really expect users to use your 2014 web application if it looks

like this, do you?</p>

<p>Creating web pages with their own style and interactivity so users can easily

accomplish their tasks is a major part of building modern web applications.</p>

<h2>Responsive design</h2>

<p>Separating the content from the rules for how to display the content allows

devices to render the output differently based on factors such as screen size

and device type. Displaying content differently based on varying screen

attributes is often called <em>responsive design</em>. The responsiveness is

accomplished by implementing

<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries">media queries</a>

in the <a href="/cascading-style-sheets.html">CSS</a>. </p>

<p>For example, a mobile device does not have as much space to display a

navigation bar on the side of a page so it is often pushed down

below the main content. The

<a href="http://getbootstrap.com/examples/blog/">Bootstrap Blog example</a>

shows that navigation bar relocation scenario when you resize the browser

width.</p>

<h2>Design resources</h2>

<ul>

<li>

<p>The <a href="http://bootstrappingdesign.com/">Bootstrapping Design</a> book is one of

the clearest and concise resources for learning design that I've ever read.

Highly recommended especially if you feel you have no design skills but

need to learn them.</p>

</li>

<li>

<p><a href="https://kuler.adobe.com/create/color-wheel/">Kuler</a> is a complementary

color picker by Adobe that helps choose colors for your designs.</p>

</li>

<li>

<p>If you want to learn more about how browsers work behind the scenes,

here's a

<a href="http://limpet.net/mbrubeck/2014/08/08/toy-layout-engine-1.html">blog post series on building a browser engine</a>

that will show you how to build a simple rendering engine.</p>

</li>

</ul>

How do I implement the design with CSS?

</p>

</div>

</a>

How should I host static content such as my CSS files?

</p>

</div>

How do I create dynamic browser interaction with JavaScript?

</p>

</div>

</div> <div id="mc_embed_signup">

<h4>Interested in major updates to this site or an alert when a complete Full Stack Python book with detailed example code is released? Sign up here and you'll an occasional email only when there's big news to report.</h4>

</div>

</div>

</form>

</div>

<h3 class="panel-head"><a href="/table-of-contents.html" style="color: #fff;">Table of Contents</a></h3>

</div>

<a href="/introduction.html" class="list-group-item smaller-item ">Introduction</a>

<a href="/web-frameworks.html" class="list-group-item smaller-item ">Web Frameworks</a>

<a href="/django.html" class="list-group-item smaller-item ">Django</a>

<a href="/flask.html" class="list-group-item smaller-item ">Flask</a>

<a href="/bottle.html" class="list-group-item smaller-item ">Bottle</a>

<a href="/morepath.html" class="list-group-item smaller-item ">Morepath</a>

<a href="/other-web-frameworks.html" class="list-group-item smaller-item ">Other Web Frameworks</a>

<a href="/deployment.html" class="list-group-item smaller-item ">Deployment</a>

<a href="/servers.html" class="list-group-item smaller-item ">Servers</a>

<a href="/platform-as-a-service.html" class="list-group-item smaller-item ">Platform-as-a-service</a>

<a href="/operating-systems.html" class="list-group-item smaller-item ">Operating Systems</a>

<a href="/web-servers.html" class="list-group-item smaller-item ">Web Servers</a>

<a href="/wsgi-servers.html" class="list-group-item smaller-item ">WSGI Servers</a>

<a href="/source-control.html" class="list-group-item smaller-item ">Source Control</a>

<a href="/application-dependencies.html" class="list-group-item smaller-item ">Application Dependencies</a>

<a href="/databases.html" class="list-group-item smaller-item ">Databases</a>

<a href="/no-sql-datastore.html" class="list-group-item smaller-item ">NoSQL Data Stores</a>

<a href="/web-design.html" class="list-group-item smaller-item active">Web Design</a>

<a href="/cascading-style-sheets.html" class="list-group-item smaller-item ">Cascading Style Sheets</a>

<a href="/javascript.html" class="list-group-item smaller-item ">JavaScript</a>

<a href="/continuous-integration.html" class="list-group-item smaller-item ">Continuous Integration</a>

<a href="/code-metrics.html" class="list-group-item smaller-item ">Code Metrics</a>

<a href="/configuration-management.html" class="list-group-item smaller-item ">Configuration Management</a>

<a href="/static-content.html" class="list-group-item smaller-item ">Static Content</a>

<a href="/caching.html" class="list-group-item smaller-item ">Caching</a>

<a href="/task-queues.html" class="list-group-item smaller-item ">Task Queues</a>

<a href="/application-programming-interfaces.html" class="list-group-item smaller-item ">Application Programming Interfaces</a>

<a href="/api-integration.html" class="list-group-item smaller-item ">API Integration</a>

<a href="/api-creation.html" class="list-group-item smaller-item ">API Creation</a>

<a href="/logging.html" class="list-group-item smaller-item ">Logging</a>

<a href="/monitoring.html" class="list-group-item smaller-item ">Monitoring</a>

<a href="/web-analytics.html" class="list-group-item smaller-item ">Web Analytics</a>

<a href="/web-application-security.html" class="list-group-item smaller-item ">Web Application Security</a>

<a href="/best-python-resources.html" class="list-group-item smaller-item ">Best Python Resources</a>

<a href="/development-environments.html" class="list-group-item smaller-item ">Development Environments</a>

<a href="/about-author.html" class="list-group-item smaller-item ">About the Author</a>

<a href="/change-log.html" class="list-group-item smaller-item ">Change Log</a>

<a href="/future-directions.html" class="list-group-item smaller-item ">Future Directions</a>

<a href="/what-full-stack-means.html" class="list-group-item smaller-item ">What "Full Stack" Means</a>

<a href="/why-use-python.html" class="list-group-item smaller-item ">Why Use Python?</a>

<a href="/websockets.html" class="list-group-item smaller-item ">WebSockets</a>

<a href="/docker.html" class="list-group-item smaller-item ">Docker</a>

</div>

<div class="panel-heading"><h3 class="panel-head">Web Design</h3></div>

<a href="/">Full Stack Python</a> is an open book that explains

each Python web application stack layer and provides the

best web resources for those topics.

<hr/>

There's a work-in-progress

<a href="/full-stack-python-map.pdf">subjects map (.pdf)</a>

that visually lays out each chapter in addition to the table of

contents found below.

<hr/>

Need more detailed tutorials and walkthroughs than you see here?

<a href="/email.html">Sign up for an email alert when that content is created.</a>

<hr/>

<a href="http://twitter.com/mattmakai">Matt Makai</a> built

this site with greatly appreciated assistance from community

<a href="https://github.com/makaimc/fullstackpython.github.com/pulls">pull requests</a>.

</div>

</div></div>

<hr/>

<a href="http://www.mattmakai.com/" class="underline">Matt Makai</a>

2015

</div>

</body>

</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FilesExpand file tree

web-design.html

Latest commit

History

web-design.html

File metadata and controls