How To Make a Web Site the Modern Way. Part 0: Introduction
by Rob Larsen
Well, I leaked it earlier this week, so I might as well get started.
Welcome to How to Make a Web Site the Modern Way, a blog series outlining, to the best of my ability. how to build an HTML page using today’s best practices. The focus won’t be on specific coding techniques, although there will be some of that, it will be on how the pieces fit together. Without experience, it’s tough to know how the pieces of a web page fit together in the best way. I’ve got some of that experience and I’d like to share it with people. So at the end of all of this, I’m hoping this series will serve as a one stop shop for people looking to understand the big picture.
First up: The Anatomy of an HTML Page .
Some basic principles:
- Fast: I want pages to be as fast as possible by default.
- Findable: This isn’t really the same as SEO, but it’s kind of like a cousin to it. I want to make pages spiderable, human scannable, computer readable and generally information rich.
- Standards compliant: I’m not a standards zealot, but I try my best to follow web standards wherever possible.
- Accessible: I try to make pages as accessible as possible.
- Usable: Usability is a deep topic, but there are things you can do, by default that will enhance the usability of your site.
- Intuitive: I want developers to look at the stuff I do and say “hey, that makes sense.” I also want it to make sense to me when I return to it in six months
- Breakable: Which is a funny way of saying “graceful degradation,” a concept that colors a lot of what I try to do. The idea being- if something’s going to break, or not work as expected, make sure that it’s not totally screwed up
The Rest of the Series
- Javascript: Parse Domain Name out of a String
- Code : Javascript : Turn a block into a clickable link area.
- Need/Want to Hide Internet Explorer 6 Specific JavaScript from IE7?
- Cross Browser PNG Transparency: Part 2
- The joy of... JavaScript's getElementsByTagName()
- Javascript: getElementById() for XML fragments and arbitrary XML documents + getElementsByAttribute()
- Mad Science... Flash for a page background using JavaScript and CSS
- Answering Google- Passing a Random Number to a Div id in Javascript
- Cross Browser Opacity using CSS and Internet Explorer filters
- CSS Attribute Selectors. I'd like to be able to use them.
- Display: inline-block is the bee's knees. CSS 2.1
- JSON Feeds For Fun and Profit, Part One- Del.icio.us makes it easy
- JSON Feeds For Fun and Profit Part 2 - Callbacks with Twitter
- The difference between javascript's getElementById() and getElementsByName()
- Automatically Track Outgoing Links in Google Analytics with Javascript
- Did you know- 8 Bit PNG transparency is just like an old school transparent Gif
- A Three Column CSS Layout Using Just an Unordered List
- Belt and Suspenders- Flash Embed With SWFObject and Conditional Comments
- JSON Feeds For Fun and Profit Part 3- wherein Eval() kind of bums me out
- Why Did I Never Try this Before? CSS Font-Size : 0 Hides Input Button Text
- Setting Far Future Expires Headers For Images In Amazon S3
- YSlow Performance Grades for 200 Top Web Sites
- Acid3 Test Released. I Took Some Screen Captures. Lots of Fail.
- Yahoo! Posts an Interesting Illustration of the Lang Attribute.
- Using overflow:auto to Clear Floated Content in CSS
- Best Lightweight Web Server for Serving Static Content?
- Say Hello to JavaScript's Native getElementsByClassName
- Some Internet Explorer Innovations You Probably Forgot About While Waiting for IE6 To Die
- Code I Like: Using Apache's .htaccess and mod_rewrite to Redirect All Traffic to "www"
- Twitter Search Results With JSON and Callbacks
- Code I Like - Link Prefetching
- Two Easy Ways to Get Set Up With Amazon's CloudFront
- Why Front End Performance Matters to Everyone, Not Just the High Traffic Giants
- Code I Like: Batch Subversion Rename (Replace Underscore with Hyphen), Bash Script
- A JavaScript Curiosity Regarding addEventListener
- What This is All About
- Google Releases Page Speed (and I add a few lines to my to-do list)
- HTML5 I'm Using Today- Custom Data Attributes
- On My Radar This Week- Cufon, Event Tracking, Steve Souders' New Book
- I Think I'm Going to Start Dreaming in Wordpress
- Tom Okeefe, Interviewed at Fireworks Designer
- I'm Presenting at the Center for Digital Imaging Arts at Boston University, July 14
- In Case You Missed It- Google Talks Web Performance
- YUI 3.0.0 beta 1 Available for Download
- The Wait For the Palm WebOS SDK
- Recent Reading (HTML5, CSS Fonts, JavaScript, rel=nofollow, Google Analytics)
- getElementsByTagName Namespace Prefix Strangeness in Safari/Chrome/WebKit
- Of Interest- the Google Chrome Operating System
- getElementsByTagNameNS. Now I Know. And Knowing is Half the Battle.
- I Don't Care About Developers. I Care About Users.
- Presentation Done. Thanks to all Who Attended.
- The Palm webOS SDK is Now Open To All. Get Your Mojo On!
- Fun With the :Hover Pseudo Class and Code Samples
- I'm Happy That This One is Live
- Sometimes, Dreamweaver Surprises Me- Great Accessibility Enhancement
- JavaScript Library Showdown. Video of my CDIA Presentation is Live. Check It Out!
- While Twitter is Down...
- Webinar: Increase the Performance of Your Website With Amazon CloudFront
- Even Faster Web Sites (Review)
- How Difficult Is It To Avoid Expensive CSS Selectors?
- Setting Up My Own URL Shortening Service
- An Update on My URL Shortener
- JavaScript Perfromance Tip- Don't Test Against obj.length. Test Against a Local Variable.
- HTML 5 Notes: In Case a Client Asks... No Full Screen Video
- HTML 5 Notes: The Video Element Rocks
- As If URL Shorteners Alone Weren't Bad Enough, Now They've Mated With URL Hijacking Frames
- HTML5 Notes: My First Time Using the Canvas Element
- File Under Cool Tools: Record Page Load Video With WebPageTest
- HTML5 Demo: Tracking Video Progress With Google Analytics
- Why I Dumped Tweetdeck For Brizzly
- HTML5 With Modernizr... Come on in! The Water's Fine.
- I Love You, border-radius. You Too, box-shadow. No, I Didn't Forget About You, rgba Color!
- I'm Finally Building a WebOs App
- Google Chrome Frame- I'll Be Taking Advantage Of It
- I, For One, Welcome Our New CSS3 Overlords. As Long As They Bring box-sizing With Them.
- Thirteen Web Development Tools I Can't Live Without
- More Numbers On the Effect of Page Performance on the Bottom Line
- My Bookshelf. Books on JavaScript, Python, Linux, WebOS, etc.
- Sample HTML Markup Used To Style Common Text Elements
- Default HTML Rendering in 81 Browsers Visualized
- I'm Excited About the New Google Analytics Engagement Goals Feature
- Bing Launches Twitter Search (and I'm Writing About the Real Time Web Over At AWiderNet)
- Have I Mentioned That The HTML5 DOCTYPE Makes Me Smile?
- The JavaScript NodeList and You. Watch Where You Point That Thing, Soldier
- Jscript Versions Reported By Major Versions of Internet Explorer (For Use With Conditional Compilation)
- Netscape's Javascript Documentation From 1999 (document.layers!)
- Playing Around With Twitter Lists
- Google's Sitelinks vs. Bing's Deep Links + D-Card
- Want to Test Your Site Without a Mouse For Accessibility's Sake? These Keyboard Shortcuts Will Help
- Great New Google Webmaster Tools Feature - "Site Performance"
- What I Read This Week (jQuery's live(), algorithms, IE8 + VPN, Chrome )
- Microsoft's CSS Filters, Could The Syntax Be Any Uglier?
- I'm Presenting at WordCamp Boston January 23, 2010
- Browser Size, a Simple But Useful Tool From Google
- If I Lived in The Bay Area, I'd Go To These
- A New Site I Made is Live- AWiderNet.com (HTML5 + CSS3 + Wordpress)
- I'm Resolute
- In Case You Missed It...
- Recent Reading (30 Style Tags?, YUI 3, GodMode, Git, Jira)
- Rethinking the "How To Serve IE-Specific CSS" Question
- I'm Messing Around With an HTML5 Version of the Default Wordpress Theme
- Recent Reading (JavaScript Library CDNs, User-Agent Strings, Hacks, Hacks and Hacks)
- Two Front End Development Interview Questions No One Has Been Getting Recently + One I'm Afraid to Even Ask
- HTML5 + Wordpress Resource Links From my WordCamp Boston Presentation
- Some Photos From WordCamp Boston Posted to Flickr
- Short Notice- I'm Presenting at the Boston JavaScript Meetup This Thursday, January 28, 2010
- My Personal View of Browser Market Share is Pretty Sweet- Firefox Rules, Chrome is Massive, IE6 is Nearly Dead
- Video of My HTML5 + Wordpress Presentation From WordCamp Boston
- My Presentation From Last Night's JavaScript Meetup
- Starter Assets
- How To Make a Web Site the Modern Way. Part 0: Introduction
- How To Make a Web Site the Modern Way. Part 1: The Anatomy of an HTML Page
- Let Me Direct You to the Quote of the Week.
- How To Make a Web Site the Modern Way. Part 2: The Head
- Recent Reading (Analytics, WordPress Short Codes, Jira, JavaScript Videos, Protocol Relative URLS, Facebook)
- I'm on TV. WordPress.TV That Is.
- How To Make a Web Site the Modern Way. Part 3: A Quick Aside on Organizing Files
- How To Make a Web Site the Modern Way. Part 4: The Body
- DrunkenFist.com Redesign Launched. More HTML5 Goodness.
- How To Make a Web Site the Modern Way. Part 5: The Body - How To Structure Your Markup
- I'm Going to be Speaking on Front End Performance in May
- Recent Reading (node.js, P3PC, Event Delegation, Twitter)
- How To Make a Web Site the Modern Way. Part 6: Best Practices for Common HTML Elements (IMG, A)
- A Quick Examination of the Memory and Perfomance Ramifications of CSS Sprite Dimensions
- How To Make a Web Site the Modern Way. Part 7: Best Practices for Lists (UL, OL, DL)
- You Probably Didn't Notice - This Site is Now HTML5
- How To Make a Web Site the Modern Way. Part 8: Tables!
- How To Make a Web Site the Modern Way. Part 9: Tag (and Attribute) Soup
- How To Make a Web Site the Modern Way. Part 10: Forms
- In Case You Missed It:
- How To Make a Web Site the Modern Way. Part 11: The New HTML5 Elements
- Reminder- I'm Presenting on Front End Performance Next Week (May 19)
- Downloads From Last Night's Presentation
- Front End Performance for the Common Man: Practical Strategies to Speed Up Your Site
- Why Do I Like Web Performance? For One Thing, it's Easier to Measure Success
- Performance Tip: When Linking to JavaScript on the Google Ajax Library CDN, Use a Specific Version Number
- I Didn't Make it to Velocity, So Hours of Web Video Will Have to Do
- Required Reading: Yahoo Research on Mobile Cache Size
- I'm Going to Enjoy Writing Code for Internet Explorer 9 (I Can't Believe I Just Typed Those Words)
- Book Review: High Performance JavaScript
- I'm Presenting on CSS in October
- I Added Keyboard Navigation to my Site
- An Ant Task to Comment Out console.log Calls from JavaScript Files
- How To Make a Web Site the Modern Way. Part 12: Cascading Style Sheets
- How To Make a Web Site the Modern Way. Part 13: The Cascade/CSS Specificity
- I'm Going to be Presenting at Design Camp Boston
- HTML5: What You Should Be Using Right Now
- How To Make a Web Site the Modern Way. Part 14: Formatting, Shorthand, Resets and Organization
- Me, Talking About HTML5, Flash, and the Cloud as Part of the Isobar 50