Transcript Front End Design

Front End Design
By Sylvester Ndung’u
Co-Founder – Slypix Media | Lead Designer – DataScience LTD | @ndungusly
Welcome
• Introduction
• Expectations
Definition
Front-end web development, also known as client-side development is
the practice of producing HTML, CSS and JavaScript for a website or Web
Application so that a user can see and interact with them directly.
•
UI
•
UX
•
IA
•
UxD
Why don’t Web users look for the best
choice?
•
We’re usually in a hurry. And as Klein points out, “Optimizing is hard, and it
takes a long time. Satisficing is more efficient.”
•
There’s not much of a penalty for guessing wrong. Unlike firefighting, the
penalty for guessing wrong on a Web site is usually only a click or two of the Back
button, making satisficing an effective strategy. (The Back button is the most-used
feature of Web browsers.) Of course, this assumes that pages load quickly; when they
don’t, we have to make our choices more carefully—just one of the many reasons why
most Web users don’t like slow-loading pages.
•
Weighing options may not improve our chances. On poorly designed sites,
putting effort into making the best choice doesn’t really help. You’re usually better off
going with your first guess and using the Back button if it doesn’t work out.
•
Guessing is more fun. It’s less work than weighing options, and if you guess right,
it’s faster. And it introduces an element of chance—the pleasant possibility of running
into something surprising and good.
Best Practices
•
Code concistency
•
Indentation
•
Readability
•
Third party libraries
•
Character encoding (UTF-8)
•
IDs vs Classes
•
Image optimization
CSS best practices
•Use a new line for every selector and every declaration.
•Use a single space before the opening brace in a set of rules.
•Use lowercase for elements and shorthand hex values, e.g., #aaa.
•Hyphenate class selector names; avoid underscores and camelCase
•Quote attribute values in selectors
•Use one level of indentation for each declaration.
•The closing brace of declaration goes in the same column as the first
character of the set of rules.
•Use a single blank line between sets of rules.
Cleaner CSS
Front end Frameworks
A package made up of a structure of files and folders of standardized
code (HTML, CSS, JS documents etc.) which can be used to support the
development of websites, as a basis to start building a site.
•
Bootstrap
•
Foundation
•
Material Design Lite
•
Skeleton
Tools
•
Photo editor




Photoshop
Fireworks
Sketch
Illustrator
 Code editor
 Dreamweaver
 Sublime text
 Notepad ++
Resources
www.css-tricks.com
www.awwwards.com
www.markdotto.com
More resources
www.slypixmedia.com/mhub-talk