Universal languages allow you to design across browsers.
It pre-dates PHP, Java and the W3C. It’s the foundation of Foundation. Front-end code the lingua franca — not of the web, but of web browsers.
The opposite of front-end code is back-end code — files that web servers run, but they’re part of the same process. Servers use back-end code to generate front-end code. A developer may write a single loop in PHP, for example, to create a long list in HTML. The server might run this code …
… to generate this …
The Design Advantage
This is good news for designers who want to learn the web as a medium. While an understanding of Ruby, PHP, SQL and other server-side languages help, front-end code is a clear first step. Some people may choose to never worry about back-end code. There’s plenty a front-end savvy designer can do:
- Responsive design: Being able to change layouts per device requires a working knowledge of HTML media queries and CSS floats.
- Plan for tomorrow: Web technologies evolve quickly. Websites based on proven code techniques last longer than fly-by-night tricks.
- Impress friends: Not to mention potential employers. Graphic skills alone don’t always get the job.
- Shift more work to the browser: Understand which visual techniques do not have to be downloaded, thus saving bandwidth and improving load time. For example, you don’t need JPG files to create gradients — WebKit-based browsers render shades automatically. (In fact, WebKit is surprisingly capable.)
Front-end languages are sets of rules no one is required to follow. But you can’t just invent new tags because browsers ignore tags they don’t recognize. An <img/> is an <img/> by common consent. But it wasn’t always that way.
Microsoft Internet Explorer 6 interpreted the W3C’s rules differently than other browsers of its day. With more than 80% of users surfing the web in IE6 in the late 1990s, Microsoft’s interpretation of HTML/CSS was effectively the rule. Tomayto, tomahto — designers found themselves writing different sets of front-end code for each exception.
Microsoft wasn’t the only offender. Early versions of Netscape Navigator followed rules of its own, sometimes to notorious results. Luckily, that’s changed. Recent versions of Explorer follow same rules as Chrome, Firefox and Safari. Today’s compatibility challenge is more about device sizes.
A Front-End Future
Knowing front-end code wasn’t just important to how we created Foundation and our apps — it helped us reach a wider audience than compiled apps ever could. Android? iOS? Windows? Mac? We reach them all. Anything with a browser can read front-end code generated by a web server. The web is our platform.
Front-end is code the lingua franca of web design. Its strength lies in the common ground: browsers’ willingness to obey the rules. Your strength lies in your ability to apply them.
You can test whether your audience comprehends what you’ve coded up. Helio’s test template below makes it easy!