Learn to how to make fixed-width images fluid and how to add them to your fluid grids to build a site that responds to the size of the viewport without sacrificing aesthetics. We are delighted to present an excerpt from Ethan’s new book, (and the fourth title from A Book Apart), Responsive Web Design.
Topic: HTML
CSS Floats 101
The float property is a valuable and powerful asset to any web designer/developer working with HTML and CSS. Tragically, it can also cause frustration and confusion if you don’t fully understand how it works. Test or refresh your knowledge as Noah Stokes explores float theory and behavior, and guides us through common float-related coding pitfalls.
Cross Platform Scalable Vector Graphics with svgweb
Pity Scalable Vector Graphics. It’s been an official standard since before IE6 was released yet has never found much of an audience on the web, certainly not the one it deserves. Just as SVG was starting to establish some browser support, along came the canvas tag, stealing the thunder of dynamically generated client-side images. Yet despite all the attention being paid to canvas, there’s still a place for SVG, particularly for developers looking to replace plug-ins like Flash for data visualization. Unlike canvas or other script-only approaches, SVG can be easily divided into design and code elements, with just a little code to add interactivity. It even works on devices like the iPad and iPhone. And now, thanks to svgweb and a clever use of Flash, it works on older platforms no one could have ever imagined supporting SVG. Jim Ray shows how.
CSS Positioning 101
If you’re a front end developer or a designer who likes to code, CSS-based layouts are at the very core of your work. Designer slash developer Noah Stokes scrutinizes the CSS position property to show how you can use it to create standards-compliant, table-free CSS layouts. Test or refresh your knowledge of static, relative, absolute, fixed, and inherited positioning, and how they work together to create any web layout the mind can conceive.
Forward Thinking Form Validation
When users complete a form to buy your product or sign up for your service, you want to reduce mistakes and guide them to success. Now, with HTML5 form input types and attributes, you can set validation constraints to check user input. With CSS3’s new UI pseudo-classes, you can style validation states to make form completion quick and effortless.
Apps vs. the Web
There’s an app for that, and you’re the folks who are creating it. But should you design a web-based application, or an iPhone app? Each approach has pluses and minuses—not to mention legions of religiously rabid supporters. Apple promotes both approaches (they even gave the web a year-long head start before beginning to sell apps in the store), and the iPhone’s Safari browser supports HTML5 and CSS3 and brags a fast JavaScript engine. Yet many companies and individuals with deep web expertise choose to create iPhone apps instead of web apps that can do the same thing. Explore both approaches and learn just about everything you’ll need to know if you choose to create an iPhone app, from the lingo, to the development process, to the tricks that can smooth the path of doing business with Apple.
Taking Advantage of HTML5 and CSS3 with Modernizr
Years ago, CSS browser support was patchy and buggy, and only daring web designers used CSS for layouts. Today, CSS layouts are commonplace and every browser supports them. But the same can’t be said for CSS3 and HTML5. That’s where Faruk Ateş’s Modernizr comes in. This open-source JavaScript library makes it easy to support different levels of experiences, based on the capabilities of each visitor’s browser. Learn how to take advantage of everything in HTML5 and CSS3 that is implemented in some browsers, without sacrificing control over the user experience in other browsers.
A Brief History of Markup
Hot off the presses! In his brand new, brief book for people who make websites, HTML5 For Web Designers, Jeremy Keith cuts through the confusion surrounding the web’s new markup language and presents what every accessibility- and standards-focused web designer and developer needs to know about it—from semantics to strategy. Not only is HTML5 For Web Designers a great, fast read, it is also our first A Book Apart publication. To celebrate, A List Apart proudly presents all of “Chapter One: A Brief History of Markup.” Enjoy!
Design Patterns: Faceted Navigation
Faceted navigation may be the most significant search innovation of the past decade. It features an integrated, incremental search and browse experience that lets users begin with a classic keyword search and then scan a list of results. It also serves up a custom map that provides insights into the content and its organization and offers a variety of useful next steps. In keeping with the principles of progressive disclosure and incremental construction, it lets users formulate the equivalent of a sophisticated Boolean query by taking a series of small, simple steps. Learn how it works, why it has become ubiquitous in e-commerce, and why it’s not for every site.
Web Standards for E-books
E-books aren’t going to replace books. E-books are books, merely with a different form. More and more often, that form is ePub, a format powered by standard XHTML. As such, ePub can benefit from our nearly ten years’ experience building standards-compliant websites. That’s great news for publishers and standards-aware web designers. Great news for readers, too. Our favorite genius, Joe Clark, explains the simple why and how.
