During the course of this article we will take a big leap into front-end development and see how it fits into our broader picture. Here’s what we’re going to cover:
Development for Designers: Understanding the Front-End
- Understanding the front-end stack
- Limitations of the DOM
- Understanding events, states and responsiveness
Understanding the Front-End Stack
When I’ve tried to explain the Front-end Stack to students in the past, I’ve always found it useful to reference the human body. Considering that we’re talking within the context of Atomic Design, this coincidently carries my metaphor over!
HTML: HyperText Markup Langauge
HTML is your skeleton. It determines your structure and your posture. A certain level of meaning can be derived from such a structure. Your head always comes first, neck, rib-cage, hips, legs, feet, all the way down to your phalanges.
The order of elements I’ve just described is your typical human. It may be different for a whale or a tiger. Thus, HTML can be different for blogs, commerce stores or platforms. HTML is all about meaning, and describing to a web browser in a meaningful way what a page is about. It has become quite a science of late as Google’s algorithm essentially reads this structure and derives from itwhat the page is actually about.
Takeout: Keep in mind that HTML provides a structure for your web experience.
CSS: Cascading Style Sheet
CSS is how you look. Hair colour, eye colour, skin tone, hairy, long arms, muscular, toe nail length etc. It’s even the way you style your hair, or the makeup you put on to make you look like you.
Its only purpose is to style what would otherwise be very plain and boring HTML. If we were all walking around in just our skeletons, attraction would be a problem. The same applies to web experiences.
Limitations of the DOM
CSS employs a concept called the Box Model. The Box Model comprises the following properties:
- Content: the actual content area, filled with text perhaps.
- Padding: extra padding that surrounds the content area and increases the background.
- Border: a border, beyond the padding.
- Margin: pushes the shape itself away from other elements.
Here’s a diagram that explains it a bit better.
When designing a shape such as a square, the real estate it takes up comprises the above elements.
“The odds are never in your favor“
Yes, five column grids don’t bode well for developers. It’s generallyeasier to work with evens than odds. Developers tend to use front-end frameworks like Bootstrap or UIKIT that come with pre-calculated grids containing ten columns, twelve columns, or perhaps more. It’s a really good idea to ask a developer what framework they plan to use, if any, in order to align your design more appropriately with the HTML and CSS
Water, Not Ice
Gone are the old days of web. Due to the fact that the majority of website are moving towards responsiveness, the need for fluid layouts has become very apparent. Grids are now worked out with percentages (10%, 30%, 50%) of containers, whichthen collapse at certain breakpoints a developer can specify.
Fonts Are Not Your Friends
Fonts on websites work very differently to print. While you are building a website on your own computer, you can use any font you have installed on your system. This isgreat for you, but as soon as those files move to another computer, the source code can’t reference the font that you have installed on your own computer any more, as it has no connection to it.
There are many ways to get around this dilemma, but you’ll often hear a developer ask designers to use Google Fonts. Google Fonts are a set of fonts hosted on a CDN (Content Delivery Network) which can be accessed by any computer that has an active connection to the Internet, meaning that even if I don’t have the specific font installed on my own computer it can still render on my website. Be aware of this. Some fonts are also not designed for rendering on web engines. They mightlook drastically different when viewed in, say, Photoshop, compared to a web browser. Each program renders fonts with different rendering engines.
Events, States and Responsiveness
Now that we have covered some fundamentals, let’s take a look into some issues that designers tend not to consider in their designs but are really important for user experience.
From a designer’s perspective, it’s paramount to understand what happens to certain elements or sections on your website once a user has acted upon them. What happens when a button is clicked, for instance? Or is there an animation applied to a modal window when it closes on click? These are questions you need to provide answers for, especially if your project has a pre-defined scope. Depending on the budget and the timelines, “Interaction Design”, as it’s dubbed in the web communities, can take precious time out of a project.
After an event has occurred, elements are left in “states”. A common example being links. Links have a number of states: active, focus, hover. What do your links look like when they have been clicked on? While you’re pressing down? When the mouse hovers over them? Or when they are touched on mobile?
Atomic design can really come in handy here as your style guides can easily account for these states while building up an atom such as a button. State can have a dramatic impact on your user experience, so take it into account when dealing with more complex sites.
The “responsiveness” buzz word has been buzzing for quite a while now. As developers we need to make sure that our web experiences are consistent across all devices. If you’re a freelancer, almost every client will ask for their site to be responsive. It’s become the “bread and butter” of the web. CSS provides developers with a useful technology such as Media Queries which allow developers to customize layouts at certain “breakpoints”.
Front-end frameworks like Bootstrap and Foundation are geared towards making responsiveness a lot easier to implement by devising responsive, percentage-based grids for developers to work with. The biggest take out here is not how responsive design grids work, but more what they are engineeredto do.
Thats it for this time! In the next article we will take a look at the backend and how we can use an Atomic Design mindset to improve our understanding of logic and programming skills.