I love to reverse engineer and see how things were built • Wordpress and me • Custom themes • The past, the present and the future • Blog/journal/notes/words • Professional diary Thursday, 28 March, 13
smaller bites. • Long term resource, both personal and public. • Accessibility. Here there and everywhere. • Setting constraints. • Growth, change and evolution (ease of use). • Future friendly. • Mobile first boilerplate focusing on readability. Thursday, 28 March, 13
Large responsive images and video • Progressive enhancement • Fully accessible • Fully tested and browser compliant • Mobile first • Wordpress cms • Iincludes: social media links • Swiping pages / nav on sides • Proportional Grid Project design notes Thursday, 28 March, 13
design. • “Content precedes design. Design in the absence of content is not design, it’s decoration.” - Zeldman • “Design processes—Everything depends on the context and the needs of the project. There are no absolutes. You do what needs to be done.” - Jbrewer • “Solutions have flaws. Not every flaw can or will be discovered before implementation. Keep experimenting, keep improving.” - Snook Thursday, 28 March, 13
What are my needs? What are my audiences needs? • What tools and resources are available? • What are skills and capabilities? • Should I push the limits and get out of the comfort zone? Thursday, 28 March, 13
• Planning, research, learning and data tools. • Sketching and concepts, generating ideas. • Design, photoshop, code. • Develop and implementing, database, theme, navigation etc. • Testing, browser testing, performance and optimization. • Deploy, share with the world. • Extend, learn from what you built and refine. Thursday, 28 March, 13
else, especially a skeletal support used as the basis for something being constructed. • A real or conceptual structure intended to serve as a support or guide for the building of something that expands the structure into something useful. • A set of tools, libraries, conventions, and best practices that attempt to abstract routine tasks into generic modules that can be reused. • Frameworks can come in different varieties. A css reset for example is a really a type of framework all it’s own. Other things css frameworks aim to build a structure for include: Thursday, 28 March, 13
learn CSS. • They provide code that you just don't need to write from scratch every time, like resets. • Enforce consistent design patterns. • Lends to design consistency. • They relieve cross-browser concerns. • Provides a more organized approach to css • Community support. • They encourage grid based design. • Lots of styling built-in. • It helps you build good habits. • They come with documentation. • Comparison: http://usablica.github.com/front-end-frameworks/compare.html Thursday, 28 March, 13
actually save time, you'll need to use one framework over and over. • It changes the way you write your HTML. • They can be bloaty. • You need time to fully understand the framework. • Could lead to a lack of understanding the underlying css. • Not all code is used. • Square peg in a round hole. • Laziness and dependency. • You might inherit someone’s bugs or mistakes. Thursday, 28 March, 13
framework should be speeding up your development process. • Your framework should make things look nice and presentable with minimal effort on your part. • Your framework should allow you to quickly wireframe or prototype sites, putting little focus on the actually styling. • Your framework should be responsive or at least include mobile alternatives. • Browser compatibility. Thursday, 28 March, 13
is to learn to use several instead of relying solely on one. • Choose the framework that works best with your own coding style and more importantly that works best with you current project. • And if you do use any regularly, spend some time looking through it to see if you can find a way to improve it or fix any issues you encounter and then contribute your fixes and improvements back to the framework for everyone to use. • Organize your own framework(s) for a starting point. Thursday, 28 March, 13
more style guide than rigid framework. SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. It is an attempt to document a consistent approach to site development when using CSS. And really, who isn’t building a site with CSS these days?! • Base — These are your defaults (html, body, h1, ul, etc) Layout — These divide the page into major sections Module — These are the reusable modular components of a design State — These describe how things look when in a particular state (hidden or expanded, active/ inactive) Theme — These define things like a color scheme or typographic treatment across a site Thursday, 28 March, 13
Parts of the HTML5 Boilerplate • CSS based on a typographic scale (em based layout) • Simple single column grid • Modernizr • Javascript • Typekit: FF Meta Serif Web Pro, FF Meta Web Pro and Ratio • Google Analytics Thursday, 28 March, 13
ease of use, speed and a great user experience. WordPress is blessed with an active community, which is the heart of open source software. • Awesome and easy • Strong community • Blank slate starting point • Themes • Starkers Thursday, 28 March, 13
be easily changed or adapted depending on my needs and available time to dedicate to updates. • Its strong, stable and dependable. • Its simple and solves my need for an online notebook. • It was fun! Thursday, 28 March, 13
http://csswizardry.com/2013/01/front-end-performance-for-web-designers-and-front-end-developers/ • Mobile First http://www.lukew.com/ff/entry.asp?933 • Designing With Context http://cennydd.co.uk/2013/designing-with-context • The Slow Web http://blog.jackcheng.com/post/25160553986/the-slow-web • A Dao of Web Design http://alistapart.com/article/dao • Front-end design principles http://clearleft.com/thinks/front-enddesignprinciples/ • A Front-end Engineer's Manifesto http://f2em.com/ Thursday, 28 March, 13
architexture
chriscoyier
cherdarchuk
eileencodes
ddemaree
iamctodd
zenorocha
nonsquared
schacon
zakiyama
jrom
