A lot of confusion surrounds the concept of block and inline elements, and its not unusual for this confusion to persist indefinitely. I’m hopefully going to clarify this tiny but influential difference for everyone in just a few images and with one CSS property.
The first image is a screen capture of the HTML and CSS I’ve used. Note how everything is behaving according to it’s default properties. The headers create line breaks, the anchor tag doesn’t.
One of the reasons that HTML standards are so important is because HTML is a language that has historically been written with a lot of errors and now has many different versions. One of the rules that has been generally agreed upon by browser makers is “don’t break the web”. This means that all new browser versions have to be able to work with all the older standards and handle errors in code in a meaningful way.
Brief (but required) history lesson:
Back when IE had 90% or so of the market share, browsers were essentially an enigma. It was hard to know exactly how things worked. Now that open source browsers have a significant part of the market share and there is competition between them in terms of functionality, how the browser works is coming into the light.
There are a lot of rules that front end engineers follow and consider standard, but a lot of F2E’s don’t know why we do some things. It’s crucial that you be able to justify to your clients or your boss why you take the time to follow best practices, and to make decisions based on all of the facts.
The language of the modern web is HTML5. It’s a great thing. You probably don’t understand why yet, but you will.
Our most basic page:
That’s really boring, you might say. Well yes, it is. If you opened it in a browser it would be a blank page. But it is important because before we get into actually having stuff on our page, we should probably figure out what is going on here.
We’ve saved the file as a .html file. You can do this from any editor, including Notepad, TextEdit or Word (i do not recommend using word under any circumstances). All you have to do is write .html after your file name. This tells the browser, “hey! this ones for us! let’s render it” and starts the whole process of displaying your web page.
Accessibility isn’t always about ARIA roles and text to speech, it’s often about simply good design. There is a range of disabilities that need to be considered when working with the web. We often just think about blindness, but we should remember to consider the other things that make surfing the web difficult for people. Even under “visual” there are different kinds of disabilities, including color blindness and issues with low contrast visuals. Without going into detail about which disabilities need exactly which changes to make the web easier for them to use, let’s take a bird’s eye view and concentrate on good design. Design standards are considered “good” because of their time proven and well tested concepts. Some of these may seem obvious, but it’s easy to forget the core concepts when working on a design.
Use of a…
Designing for responsive layouts has been a big topic lately. I’ve been reading up on it a lot, and have officially been won over to a side. I believe that starting small and working upwards in size is most often the best way to create websites these days. We should start with the mobile design first.
Designing mobile first forces the content and functionality to be considered from a “what is most important” standpoint. Designing for mobile also outlines colors, general shapes, the feel of the website; all while restricting the design to its most basic elements. This starting point will help organize the site and fixing user experience problems at this size will help prevent them showing up later, when things are more complex. Architecting the user profiles at this stage will only serve to be the foundations of the…
HTML5 Video is a great thing. There is a built in player in all of the major browsers, and ideally, it should be to throw a video on the page with the new video tag. No more outside hosting or struggling to get your flash player working inside your frames. Of course, the browsers still are all implementing this feature in different ways. Simple is coming. but we’re not quite there yet. It’s still not as difficult as it used to be.
On Tuesday, November 9th, Krish Mandal, Eric Fitchett, Paul Hurlock and I attended an event in New York called HTML5 Live. My intentions going into this were to get a better understanding of HTML5, where it is now, and where it’s going.
I actually got more out of the conference than I had anticipated. I was pleasantly surprised with some of the tools that were demonstrated, and some of the HTML5 features that were shown, particularly native validation and the enhancements to Adobe’s Creative Suite. As I expected, the general sentiment was that HTML5 is going to be big, but it is only practical to develop it right now in a controlled browsing environment. Progressive enhancement is certainly possible, but with all the uncertainty around video and audio codecs, and how other native features will be handled in a standardized way…