Pro CSS for High Traffic Websites ppt

Kennedy de León US $49.99 Shelve in Web Design / HTML User level: Intermediate–Advanced www.apress.com SOURCE CODE ONLINE RELATED BOOKS FOR PROFESSIONALS BY PROFESSIONALS ® Pro CSS for High Traffic Websites Pro CSS for High Traffic Websites gives you inside information from the profes- sionals on how to build and maintain CSS websites receiving thousands of unique visitors per day. This book includes tips and tricks, as well as down-to-earth best practice infor- mation, to make sure that everything runs quickly and efficiently with the minimum amount of fuss or developer intervention. Although web standards-based websites can scale effectively—and basic CSS will give you basic results—there are consid- erations and obstacles that high traffic websites must face to keep your develop- ment and hosting costs to a minimum. Pro CSS for High Traffic Websites shows you the development processes you need to smoothly set up an easy-to-maintain CSS framework across a large-vol- ume website, and how to keep the code reusable and modular. You’ll also examine the business challenges of keeping branding consistent across a major website, and how you can sustain performance at a premium level through traffic spikes— and across all browsers. Defensive coding is also considered for any sites you’re working with that involve third-party code or advertising requirements. Pro CSS for High Traffic Websites also gives you techniques you can use to keep CSS accessible for all viewers, and you’ll discover some advanced dynamic CSS techniques here. The book finishes by walking you through the creation of a high-end CSS framework that you can use either to build upon, or as a model to build your own framework from scratch in the future. www.it-ebooks.info For your convenience Apress has placed some of the front matter material after the index. Please use the Bookmarks and Contents at a Glance links to access them. www.it-ebooks.info  CONTENTS AT A GLANCE iii Contents at a Glance  Foreword xvii  About the Authors xviii  About the Technical Reviewer xix  Acknowledgments xx  Preface xxi  Background Information xxii  Chapter 1: The Value of Process 1  Chapter 2: CSS Style Guide 37  Chapter 3: Fundamentals 67  Chapter 4: Frameworks and Integration 101  Chapter 5: Brand Implementation 137  Chapter 6: CSS and Accessibility 165  Chapter 8: Performance 223  Chapter 9: Dynamic CSS 261  Chapter 10: Testing and Debugging 301  Chapter 11: Creating Your CSS 331  Appendix 1: CSS Standards Guide 361  Appendix 2: Accessibility Guidelines 369  Appendix 3: Browser Support Guidelines 373  Appendix 4: Development Process 377  Index 383 www.it-ebooks.info  BACKGROUND INFORMATION xxii Background Information This book assumes certain pieces of knowledge on the reader’s part. This section aims to ensure that you are aware of these pieces of information, and explain what you can get out of this book. Seasoned developers or anyone who has been working in the web industry for a reasonable amount of time should be able to safely skip to the first chapter. Who Is This Book For? Although we will be providing examples of CSS code to demonstrate techniques and subjects we are covering, these are not to demonstrate the latest selectors or properties, but instead to demonstrate how to format, comment, and model your code to keep it sane and follow best practices in your processes. To that end, this book is about the entire team as much as it is about the developer and should be of value to all of its members. This book is for the following: • Anyone working on a high-traffic website. This is any website expecting upward of 10,000 unique visitors per day, or with occasional spikes of traffic higher than this amount. • Anyone working on a very large website one with perhaps upward of 2,000 individual pages or with more than 30 minisites. • Anyone working on websites in companies with large amounts of staff modifying the same codebase, with upward of 30 developers working on the CSS. • Anyone working for a company with the capacity to become a very large company and wanting to build a good basis for its web development processes. • Developers without previous experience of working in large teams. However, the practices involved are best practices for websites of any size. What Will I Learn? Throughout the course of this book, you will learn the following: • The value of process • How to share knowledge among staff and teams www.it-ebooks.info  BACKGROUND INFORMATION xxiii • How to quickly get new CSS developers up and running • How to incorporate CSS into builds and deployments • How to write reusable and modular CSS • How to maximize performance of your website(s) • How to keep branding consistent • Best practices for cross-browser and accessible CSS • Dynamic CSS techniques The final chapter provides a simple CSS framework we developed specifically for this book that demonstrates many of the things that we touch upon, as well as the process we have followed to build it. The four appendices provide concrete examples of guides and processes that you should find useful. Why Is This Book Different From Others? Before embarking on the writing of this book, we did much investigation into which alternative resources were available. A plethora of books on learning the basics of CSS, advanced CSS techniques, CSS3 selectors/properties, and different CSS design patterns are all easily obtainable. This book does not compete with or replace these titles. This book instead explores the challenges of working in large teams or among large numbers of individual teams, on sites with many pages or subsites that receive considerable traffic. This book is not about using the latest and flashiest techniques for image replacement or cross-browser rounded corners; rather, it is focused on making it easy for newcomers to teams to easily comprehend and add to existing code, and for CSS within your infrastructure to be considered from the outset and built in a sane and performant manner. Even though this book is aimed at both beginners and experts alike, we assume that you are comfortable using HTML and CSS, or are at least familiar with their syntax. We will be discussing the usage of modular, reusable code that is both robust and practical throughout the chapters in this book. Separation of Concerns Separation of concerns is an important concept to understand when writing CSS. Many different architectures for applications and systems exist. The justifications and benefits of them are far beyond the scope of this book; however, it is worth giving a very simple explanation of multitier architecture since the logic behind it is easily applicable to CSS and the browser application model. A multitier architecture approach is a design that separates logic, data, and presentation. 1 This usually describes a client-server system, where there is a client application and a server application. The majority of the processing takes place on the server, and the client is concerned with displaying the information and giving the user an interface to manipulate it. The multitier approach applies as such: • Client application: presentation • Application: logic 1 Model View Controller (MVC) is an example of this. www.it-ebooks.info  BACKGROUND INFORMATION xxiv • Server: data Separating the tiers in this way gives clear ownership of any particular piece of code, function, or task. It also keeps everything reusable and easily maintainable. This is how more traditional client-server applications would typically behave. This approach obviously applies to a web browser, web server, and database, but the code that runs in the web browser can also be broken down this way. We typically write our front-end code in three "languages": HTML, CSS, and JavaScript. It is possible for our code to be all jumbled up together, much like the following example: <a id="clickableAnchor" href="#" style="color:blue;" onclick="alert('clicked!');">Click me</a> Technically there is nothing wrong with this; the text will be blue, and the JavaScript will run when it is clicked. However, there are several reasons why this kind of code is bad practice: • There is no clear separation of the different types of code. When CSS developers want to change the color of the text, they cannot do so without modifying that page. When JavaScript developers want to change the text in the alert box, they cannot do so without modifying that page. • There is no way this code can be reused. If all our code was written like this, and it was decided that all anchor text should be red, we would have to modify the code in every single place where there was an anchor. • The more code there is on the page, the larger the file to download. In a way, this is restating the previous point because reusable and external code need be downloaded only once. This, however, also has implications for search engine optimization (SEO). • Fewer types of code in a document make it easier to read, parse, and edit. A more appropriate solution would be the following: In the head: <style> #clickableAnchor {color:blue;} </style> <script> $('#clickableAnchor').click(function(){ alert('clicked!'); }); </script> 2 2 We have used jQuery for this example to keep things simple. We are not advocating jQuery over any other JavaScript library or framework. www.it-ebooks.info  BACKGROUND INFORMATION xxv In the body: <a href="#" id="clickableAnchor">Click me</a> This method breaks our three languages apart; it is much tidier, but there’s an even better solution: In the head: <link rel="stylesheet" href="/css/screen.css" /> <script In the body: <a href="#" id="clickableAnchor">Click me</a> This solution finally separates our three tiers; it creates separation of concerns. Now these files can be easily shared across many pages and cached for better performance. Our tiers relate in the front- end realm like so: • HTML: data • CSS: presentation • JavaScript: behavior Let's touch on these in a little more detail. Data For the purposes of websites, we usually refer to this as content rather than data. You will often hear the phrase "Content is king," and this is good advice. Your markup should be semantic and well structured; on its own, it should read as a valid and sensibly ordered document. This ensures that machines as well as humans have a good chance of understanding both the intent of the content within the document and the words. If a piece of content is a heading, it should be marked up as such (instead of being marked up as, for example, a paragraph set in bold); if it is clearly a list of items, it should also be marked up as such (as opposed to a succession of divs or some other less relevant element), and so on. When machines understand our intent, they have the ability to do the following: • Understand what a page is about and which parts are more/less important— this is especially important for search engines and assistive devices. • Display the page in different ways without affecting legibility (for example, by using user style sheets). This also means that your website can degrade gracefully in older browsers and display your content in a way that does not impede comprehension. www.it-ebooks.info  BACKGROUND INFORMATION xxvi • Allow access to the data in a nonlinear fashion, which is, again, particularly useful to assistive devices. Presentation This layer concerns itself only with how the page looks. Anything superficial or purely decorative goes here. If you are choosing the font, laying out a page, or changing colors, this is the appropriate layer. If your branding calls for text to be in lowercase or for very small headings, we can do that in CSS without ruining the semantics of the “true” content in our page. Behavior This is sometimes called the Logic, Business, or Business Logic layer. Where we are interacting with the page in nonstandard ways—for example, dragging and dropping, or making Asynchronous JavaScript Across XML (AJAX) requests (a method of fetching information from the server without requesting an entirely new page), the JavaScript is the part responsible for this. Front-End Development Is Full of Exceptions Although the resulting benefits of the tiered approach are clear, it is never as clear-cut as we have just made it seem. Expressions can reside in CSS files, making calculations (although we do not advocate it). JavaScript can be responsible for presentation (such as the appearance/animation of menus). Sometimes JavaScript is responsible for adding new content to the page. There are many other examples. However, intending and attempting to separate the layers in this manner gives us a good starting point, and approaching web development in this way can often result in new and clever ways to avoid duplication of content and maintain high performance. With these basic pieces of information under our belt, we’re ready to get started. The first chapter will introduce you to the importance of process. Although not strictly a CSS subject, it is an important base to build your projects upon. www.it-ebooks.info C H A P T E R 1    1 The Value of Process In this chapter, we aim to focus on how processes in your team and company can help rather than hinder your productivity. Many of these topics are not specific to CSS (Cascading Style Sheets), but to write CSS that is scalable and shared among many teams or websites it is vital to have solid processes and consistency. We willtalk about development methodologies, how to ensure consistent code styles, source control, tools, and naming conventions. Because we aim to give you useful practical examples, we will present an example process at the end of this book. In this chapter, we will look at: • The team and its parts • Scaling a business • Dealing with loss of staff • Consistency of code • Tools • Version control • Backup • Prototyping • Development methodologies The Team Arguably, the most important element in CSS development is the team that supports the developer. Every team is different, not just the personalities of the members or the sizes of the teams but also the disciplines and skills within it. Some teams include a few server-side developers and a single front-end developer, some include the entire skillset required to build a web solution: designers, front-end developers, server-side developers, database specialists, testers, and so on. A team this size has the benefit of rapid communication between its component parts but has the disadvantage of size; larger teams are slower to respond to requirements for various reasons. The primary reason for this is something researchers call “diffusion of responsibility.” This means that in larger teams, members assume that someone else is doing any given task at any given point rather than taking it upon themselves to do it. Without clear guidelines in place, it can be difficult to be sure of who is or should be responsible for unexpected problems or tasks, so even though these issues are noticed, they are forgotten. In smaller teams, besides communications being more immediate and effective, more attention is on each individual, and members will assume responsibility and be more proactive. www.it-ebooks.info CHAPTER 1  THE VALUE OF PROCESS 2 This issue, however, can be overcome with good project management. If you have all your tasks mapped out with clear areas of responsibility, there is no room for confusion.  NOTE: There are many terms that describe people that write CSS: front-end developers, client-side developers, web developers, and web designers are just a few. The processes within your company change dramatically depending on the type of team you have. For teams that do not include designers, if the requirements fed to your team already include complete designs and specifications, there is little room or time to feed back any issues to the designers or information architects and the development is more siloed away from the requirement creation process. If the teams do not include testers, and the user testing process is outside of your team, errors or problems they find are fed back to you after you have finished developing, which is the least efficient time to fix them. It also makes a big difference who writes your CSS. If it is written by web designers (hopefully the same people who made the designs for what you are developing), then as long as they are good at what they do they will have taken into account things like accessibility, usability, and templating. If the designers are separate from your team, you may find the designs they provide do not intrinsically consider these things. The worst case is where the CSS is written by those who don’t specialize in front- end code at all because they are not expert in what they are doing, and may do more harm than good. CSS is deceptively simple, and it is easy to write inefficient bloated code that quickly becomes legacy code. However, companies’ processes are often based in legacy and not that easy to change. The project manager is responsible for getting the most out of the team and dealing with these issues. One of the most important pieces of a process is defining areas of responsibility. These areas need to be mapped out clearly before a team is even put together, so you know who to include in the team. A simple example is as follows: • Project Manager: The project manager is responsible for representing his team to the business (as well as the business to the team), ensuring that everything is recorded correctly, facilitating meetings, and making sure that the members of his team know what they should be doing and have everything they need to do it (including helping to remove any obstacles that prevent them from doing it). As far as the team goes, the buck stops here; if a project fails, it is likely to be the project manager that is held accountable. • Team Lead/Technical Lead: Team leads are responsible for the technical delivery of the product. They need to ensure they understand the general direction the project is going in as well as the methods being used to address technical challenges, and to communicate with members of their team to find any potential risks or pitfalls, and suggest ways to resolve them. • Developer: The term developer is a broad term. For the sake of this example, the developer is the person undertaking the actual tasks within the project (writing the CSS). He is responsible for giving estimates and details necessary to record the tasks, feeding back technical issues to the team lead and logistical issues to the project manager, and completing the tasks. With these roles clearly defined, it becomes obvious who should be doing what. With regular meetings any problems should be located and dealt with quickly. www.it-ebooks.info [...]... Platform-independent • Previous revisions of documents are not lost It is very easy for a wiki to get out of control Ensure someone is responsible for owning the wiki, enforcing a sensible, structured taxonomy, and performing housekeeping Many examples of wiki software exist Some are hosted, some you can host yourself, many are free, many are paid for They employ many different languages for formatting.2... not use !important,1 but there may be situations where it is the most appropriate thing to do) However, we do recommend some form of guidelines exist Here is an example of a section of a CSS formatting guide: • All related blocks of CSS should be prefixed with a comment in this format to aid visual scanning and searchability of the CSS document: /*========================================================================... sake of this nomenclature Once you have your team planned out, it is easy for your company to begin using that template for every team you have and for every project you have We encourage you to continue to consider how your team is formed on a project-by-project basis Although strict processes are a good thing, if you don’t change them on occasion you may never discover better ways to run your development... icons ie8 .css has an exclamation mark next to it, which indicates it is currently in conflict But three brand-new files have appeared, too: • ie8 .css. r313 • ie8 .css. r312 • ie8 .css. mine Each of these files has a purpose: • ie8 .css. r313 is the latest version of this file in the repository • ie8 .css. r312 is the version of the file we downloaded from the repository when we last updated • ie8 .css. mine is... talk about in Chapter 4 If the process of implementing your own CSS framework requires complicated build scripts and makes debugging difficult, perhaps the solution is being over-engineered We are not suggesting at all that build scripts (which you can read about in Chapter 9) should not be employed for reasons of performance and efficiency, but the process should be simple CSS developers typically work... be in hexadecimal format (#123456) • All CSS selectors and rules should be on a single line to save space and to fit more selectors on a screen simultaneously These points serve as an example, not necessarily steps that we recommend you take We will present you with an example CSS formatting guide at the end of this book For this guide, it is useful to employ MoSCoW (a common method for prioritization)... and RGBA gives us a capability we did not have before (notably alpha transparency), so we want to add it to our CSS Formatting Guide and amend our previous recommendation Again, this is an example, not our suggestion Before, we had this line: • All colors should be in hexadecimal format: #123456 We can now amend it like so: • All colors should be in RGB format: rgb(100,100,100) • Where colors need to... VALUE OF PROCESS often flicking between their text editor and a browser many times a minute Any processes required to get your code to run should be implemented in an unobtrusive manner A build process that hinders that has a much larger hit on the developer’s efficiency than many might think Entering a CSS debugging mode should be just as simple, so in the case of CSS being minified upon reaching production,... to find a setup that improves upon this, but (for larger teams) it is not cheap, or easy to administer, install, and maintain.4 Agilo Agilo (www.agile42.com/cms/pages/agilo/) is based upon and supports integration with Trac to provide a full-featured solution for SCRUM (an agile development methodology) A free alternative is available as well as a paid for version Installers are provided, as well as... English slang Linus Torvalds, the creator of Git, said, “I’m an egotistical bastard, and I name all my projects after myself First Linux, now git.” 7 GitHub (http://github.com/) provides free public repositories that might be appropriate for your projects 15 www.it-ebooks.info CHAPTER 1  THE VALUE OF PROCESS Graphical User Interfaces Almost all version control systems ship with command-line interfaces, . ONLINE RELATED BOOKS FOR PROFESSIONALS BY PROFESSIONALS ® Pro CSS for High Traffic Websites Pro CSS for High Traffic Websites gives you inside information from the profes- sionals. costs to a minimum. Pro CSS for High Traffic Websites shows you the development processes you need to smoothly set up an easy-to-maintain CSS framework across