12. Advanced Front-End Techniques - Web Front-End


Published on

Advanced techniques for optimizing client-side performance, SEO and accessibility
Telerik Software Academy: http://html5course.telerik.com
The website and all video materials are in Bulgarian

Table of contents:
1. Performance - Techniques for optimizing HTML/CSS/JavaScript Performance
- Sprites
- Caching
- Tools
2. Search Engine Optimization (SEO) - Getting ahead in search engines
3. Accessibility

Published in: Technology, Design

12. Advanced Front-End Techniques - Web Front-End

  1. 1. Advanced Front-End Techniques Performance, SEO, AccessibilityIvan ZhekovFront-end Developerhttp://joneff.infoTelerik Software Academyacademy.telerik.com
  2. 2. Table of Contents Performance  Sprites  Caching  Tools Search Engine Optimization (SEO) Accessibility 2
  3. 3. Client-Side Performance Techniques for optimizingHTML / CSS / JavaScript Performance
  4. 4. 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 Performance  YSlow and PageSpeed browser plug-ins 4
  5. 5. 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
  6. 6. Sprites Combine multiple images into one Use background-position to show only part of the composite image Color considerations 6
  7. 7. 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
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11. Search Engine OptimizationGetting ahead in search engines
  12. 12. 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
  13. 13. 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/webmasters/ 13
  14. 14. Accessibility“A person’s a person,no matter how small” Dr. Seuss
  15. 15. 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
  16. 16. 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
  17. 17. 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
  18. 18. Advanced Front-End Techniques курсове и уроци по програмиране, уеб дизайн – безплатно BG Coder - онлайн състезателна система - online judge курсове и уроци по програмиране – Телерик академия форум програмиране, форум уеб дизайн уроци по програмиране и уеб дизайн за ученици ASP.NET курс - уеб програмиране, бази данни, C#, .NET, ASP.NET http://academy.telerik.com програмиране за деца – безплатни курсове и уроци ASP.NET MVC курс – HTML, SQL, C#, .NET, ASP.NET MVC безплатен SEO курс - оптимизация за търсачки алго академия – състезателно програмиране, състезаниякурсове и уроци по програмиране, книги – безплатно от Наков курс мобилни приложения с iPhone, Android, WP7, PhoneGap уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop Дончо Минков - сайт за програмиране free C# book, безплатна книга C#, книга Java, книга C# Николай Костов - блог за програмиране безплатен курс "Качествен програмен код" безплатен курс "Разработка на софтуер в cloud среда" C# курс, програмиране, безплатно
  19. 19. Exercises1. 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
  20. 20. 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