12. Advanced Front-End Techniques - Web Front-End
20
Advanced Front-End Techniques Performance, SEO, Accessibility Ivan Zhekov Telerik Software Academy academy.telerik.com Front-end Developer http:// joneff.info http://html5course.telerik.com
-
Upload
telerik-software-academy -
Category
Technology
-
view
3.625 -
download
3
Transcript of 12. Advanced Front-End Techniques - Web Front-End
Advanced Front-End Techniques
Performance, SEO, Accessibility
Ivan Zhekov
Telerik Software Academyacademy.telerik.com
Front-end Developerhttp://joneff.info
http://html5course.telerik.com
Table of Contents Performance
Sprites Caching Tools
Search Engine Optimization (SEO) Accessibility
2
Client-Side Performance
Techniques for optimizingHTML / CSS / JavaScript
Performance
Why care about performance
Why should anyone care? 80% of response time is spent on
the client Slow speed = less sales (Amazon) Faster websites = more users (= $$
$) (Google) Smaller page sizes = less bandwidth
(cut costs) Best practices guide you all the way Yahoo Best Practices on Web Perfor
mance YSlow and PageSpeed browser
plug-ins
4
Performance rule #1 Minimize HTTP requests
Each request is a round-trip to the server
How to minimize the request count? CSS and JS: Combine files Images
Use sprites
Consider embedding them with data: URIs
Content Delivery Network (CDN) - allows more simultaneous downloads by the browser
5
Sprites Combine multiple images into one
Use background-position to show only part of the composite image
Color considerations
6
Minimizing file size
CSS & JS: minify Tools: Uglify.js, YUI compressor,
Closure compiler Images
Use PNG8 where applicable Crush PNGs: PNGCrush, pngquant,
optiPNG Reduce the number of colors in a
GIF or the JPEG quality
7
Where to place CSS and JS
CSS goes in the <head> Because the page will be
progressively loaded JS goes before the </body>
Because loading and execution blocks the page load and rendering
Will keep you on a blank page if placed in the <head>, until they get loaded
8
CSS Performance Browsers evaluate CSS selectors from right to left .parentClass > .childClass { … }
Avoid (in order of importance) Universal selectors Type (tag) selectors Descendant selectors (prefer child
ones) Child selectors
http://snook.ca/archives/html_and_css/css-parent-selectors 9
HTML Considerations HTML is not cached, so its size should be taken care of as well. Things to avoid: Inline styles Inline JavaScript Long dynamic client IDs Excessive HTML Long class names if used a lot
10
Search Engine OptimizationGetting ahead in search
engines
Search Engine Optimization
Search engines use so-called “crawlers” to get the content of the page and index it
The crawlers weigh the data on the page <title>, page URL and headings
have great weight Links from highly valued pages to
your page increase its value (Google Page Rank)
Add alt text to images Use relevant keywords in the
content and <meta> tags
12
Search Engine Optimization (2)
Search engines love good content Learn to write for the web
Inverted pyramid (bottom line goes first)
Meaningful link text (no “click here”)
No SEO technique will replace good content "Content is king" "Build sites for people, not search
engines" https://www.google.com/support/webma
sters/
13
Accessibility“A person’s a person,no matter how small”
Dr. Seuss
Accessibility Craft content minding disabled users Blind - include text equivalents of
images, use labels in forms Colorblind - do not convey
information using color only Visually impaired - avoid small font
sizes Epileptic - avoid flashing content
(3Hz or more) Physical disabilities - avoid
functionality that relies only on the mouse or keyboard
15
Accessibility (2)
Why implement accessibility? Some accessibility features are
mandatory for government sites in some countries (US, NL, SW)
“Everyone gets visited by a very important blind user, named Google”
Some SEO and accessibility considerations overlap
16
Accessibility (3) Standards
Web Content Accessibility Guidelines (WCAG) - http://www.w3.org/WAI/intro/wcag
Section 508 - http://www.section508.gov
Tools Will never replace manual testing,
but may help WAVE - http://wave.webaim.org/
17
форум програмиране, форум уеб дизайнкурсове и уроци по програмиране, уеб дизайн – безплатно
програмиране за деца – безплатни курсове и уроцибезплатен SEO курс - оптимизация за търсачки
уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop
уроци по програмиране и уеб дизайн за ученициASP.NET MVC курс – HTML, SQL, C#, .NET, ASP.NET MVC
безплатен курс "Разработка на софтуер в cloud среда"
BG Coder - онлайн състезателна система - online judge
курсове и уроци по програмиране, книги – безплатно от Наков
безплатен курс "Качествен програмен код"
алго академия – състезателно програмиране, състезания
ASP.NET курс - уеб програмиране, бази данни, C#, .NET, ASP.NETкурсове и уроци по програмиране – Телерик академия
курс мобилни приложения с iPhone, Android, WP7, PhoneGap
free C# book, безплатна книга C#, книга Java, книга C#Дончо Минков - сайт за програмиранеНиколай Костов - блог за програмиранеC# курс, програмиране, безплатно
?
? ? ??
?? ?
?
?
?
??
?
?
? ?
Questions?
?
Advanced Front-End Techniques
http://academy.telerik.com
Exercises
1. Optimize given HTML and CSS code (see Advanced-Techniques-Homework.rar).
2. Apply a CSS style to given HTML page (see Advanced-Techniques-Homework.rar).
3. Combine given CSS files (see Advanced-Techniques-Homework.rar).
4. Create a sprite with set of icons (see Advanced-Techniques-Homework.rar).
5. Write and publish few SEO articles (see Advanced-Techniques-Homework.rar).
19
Free Trainings @ Telerik Academy
"Web Design with HTML 5, CSS 3 and JavaScript" course @ Telerik Academy html5course.telerik.com
Telerik Software Academy academy.telerik.com
Telerik Academy @ Facebook facebook.com/TelerikAcademy
Telerik Software Academy Forums forums.academy.telerik.com
