×

Get in touch.

This could be the start of something beautiful.

New York City

22 Cortlandt Street, Suite 1101
New York, NY 10007
Thoughts / 01.03.2019

Front End Development Trends and Best Practices (Part I): From Design to Mobile Integration

Front End Development & Design

To a casual observer, front end development may seem like a nebulous term that encompasses a broad scope of practices, with new technologies, tools, and frameworks springing into life every other year. In fact, it does take a lot of talent, skill, and expertise to stay relevant in this hectic environment, and keep your customers engaged and teams productive as front-end experiences shift from traditional desktop browsers to mobile devices and other exciting mediums like Virtual Reality or Chatbots.

In this series of posts, we’ll guide you through the trends and best practices of front-end development to make sure you’re fully equipped to navigate the front-end universe and make the right choices for your digital products.

UX & UI: Cornerstone of GUI Development

How do a product’s User Experience (UX) and User Interface (UI) fit in with its front end development? The front end is the presentation of a piece of software; in other words, everything that users can see and interact with while using an application. If you’ve ever opened Internet Explorer and wondered “Where on earth are my bookmarks?” then you know that a thought-out UI and UX are essential to the success and usability of a product.

UX vs. UI

Both UX and UI often appear together, with job posts looking to hire UX/UI designers or Reddit users chewing over a recent UX/UI revamp of their favorite news site or a mobile app. But what do UX and UI have in common and what sets them apart? As the names suggest, both are user-centric concepts, putting the user front and center, but what stands behind the Experience in UX and Interface in UI?

Don Norman, the man who coined the term UX, describes it as the “seamless merging of the services of multiple disciplines, including engineering, marketing, graphical and industrial design, and interface design.” It encompasses all aspects of the end user's interaction with a company, its services, and its products. If we look at this UX definition from the front end development perspective, we can see how it translates into user-focused processes built around the optimization of user interactions. In the graphical user interface (GUI) development context, UX practices include:

  • Research of the target audience
  • Understanding the context in which the target audience operates
  • Creating a systematic vision of the most efficient ways for the target audience to reach its goals (and align those goals with the goals of your product)
Front End Development Best Practices: UI versus UX

As you can see, UX has little to do with creating the actual graphic design and requires more analytical and interpersonal skills. A good UX researcher needs to be able to put herself into the client’s shoes to fully grasp the business goals, as well as to truly understand the user and comprehend the end-user tasks that the product is designed to solve. Finding the right balance between these two is what makes a UX designer indispensable in the front end development process.

As you’ve probably noticed, Norman’s UX definition also mentions interface design, which implies that the user interface is a component of the overall experience. This makes a lot of sense because UI is quite literally everything that users see in a digital product: toggles, backgrounds, fonts, animations, and other graphical elements. A high-quality UI ensures that the user has a consistent, aesthetically pleasing, and intuitive experience with a product. UI best practices in front end development focus on:

  • Creation of brand style guides
  • An intuitive design that’s enjoyable to use
  • Support for various screen sizes, including touch- and non-touch screens
  • Effective design-to-development handoff process

A good analogy for UX vs. UI in front end design is building a house, where the UI arranges a fitting color palette and well-furnished rooms, while the UX makes sure the entire house is connected to the electric grid, water supply, and so on.

Design-to-Development Best Practices

You can’t make the design work without paying close attention to your design-to-development handoff. This process, in simple terms, is a way that graphical assets travel from a design team through a development team and into a live product. One of the recent trends in the software development community has become the object-driven design-to-development approach. It’s when UI/UX engineers treat every single graphical asset as an object that can be easily replicated, modified, and implemented at scale across mobile and web solutions.

The object-driven approach guarantees everyone on the design team has access to up-to-date graphical assets that follow the same design pattern. For clients, this translates into faster delivery and a cohesive UX and UI experience across products and platforms.

Front End Development Trends & Best Practices: From Design to Mobile IntegrationImage via Unsplash

On the opposite side of the design-to-development process, we have front end developers. They take great care to build interfaces that follow every minute detail of the provided designs: in layouts, colors, typography, spacing, and more. At this stage, open lines of communication between design and front end development teams are essential, so that companies don’t have to deal with a UI that cannot be programmed or that violates the guidelines of a target platform.

Both teams should thoroughly discuss all UI and UX peculiarities of a given product, even before the designers get to their digital canvases. This ensures that designs always come within technical constraints and developers always know what they’ll be implementing.

To aid this collaboration process, companies providing front end development services rely on design-to-development automation software like Zeplin or Avocode. These tools ensure that front end developers can always access up-to-date designs in their original format, with accurate specs. In addition, they offer automatically generated code snippets based on the provided design elements allowing for faster delivery while cutting the cost of production.

Front End CSS Frameworks

Depending on a project’s needs, a software vendor may go with one of the popular front end CSS frameworks, like Bootstrap, Foundation, or Material Design to speed up graphical UI development. These frameworks come with ready-to-use components that replace a lot of manual code and, as a bonus, comply with responsive web design standards. In the end, sites are built faster and render correctly on a variety of devices: smartphones, tablets, notebooks, and desktop computers.

It’s worth mentioning that one downside of utilizing a CSS framework is that your website may resemble many other sites built with the same framework (and template). So, you might need to invest a little extra into customizing your site’s appearance to make the brand stand out. Another minor trade-off you are likely to encounter with Bootstrap or Foundation is a lot of boilerplate code that, if not addressed in a timely manner, can impede the site’s performance.

Front End Development Frameworks

JavaScript, on top of HTML and CSS, remains the main engine that powers front end innovations. Thanks to this technology, we have a range of interactivity in applications and websites, like the ability to open several chats on Facebook or scroll through Instagram stories.

These days, the front end development community seems to talk passionately about three particular front end development frameworks: React, Angular, and Vue. The 2018 Front End Tooling Survey lists these frameworks among the top 5 most-used JavaScript libraries and frameworks:

most-used front end development frameworks Image via ashleynolan.co.uk

For front end development vendors, the best practice is to employ full-stack developers, who don’t have a strong bias toward one framework or another. This turns the choice of a front end development framework into a question of aligning a framework’s capabilities with a client’s business goals and the existing infrastructure. And there’s plenty to choose from: React, Angular, Backbone, Knockout, and Vue, to name just a few.

Of course, each of these front end technologies will have an impact on the development process. Let’s go through the practical implications of each of these tools.

React

React is a JavaScript library that offers a lot of flexibility for developers, leaving it up to them to choose from a wide range of third-party components and building blocks to create a modern web application. Backed by Facebook and favored by many front end developers due to its short learning curve, React is an obvious pick for a project with a flexible scope and no rigid ecosystem limitations.

Angular

Angular, on the other hand, is a full-fledged framework that comes with all the components necessary to build a front end. This MVC (model-view-controller) front end technology has a clear-cut approach to architecture and requires developers to follow specific patterns while building web solutions. As a result, development teams working on the same project spend less time aligning the code base and more time coding. The structured nature of Angular is not the least of why it’s a long-time favorite among enterprises.

Vue

Vue is a JavaScript framework that’s been gaining a lot of popularity with front end developers lately. Similar to React, this front-end tool focuses on building the UI of web applications and offers plenty of flexibility in terms of integration with third-party components. At the same time, Vue is more structured than React, providing the essential ingredients for web building right out of the box (like Angular). The thorough official documentation and support for pure JavaScript, JSX, and TypeScript make Vue an ideal candidate for experimenting with web prototypes that can rapidly scale into feature-rich web applications.

Knockout and Backbone

Knockout and Backbone are veteran JavaScript libraries that have been around the longest — since 2010. There are still plenty of web apps with front ends built on these technologies. Knockout is particularly useful when your product needs to work on older versions of browsers like Internet Explorer 6. And Backbone comes bundled with the latest versions of the Drupal CMS, which is often used for straightforward web projects.

Automating the Front End with a CMS

While front end development frameworks are standard tools for creating custom web applications and sites, there are still many cases when companies are looking for simpler functionality. A content management system (CMS) simplifies the means of content production,  automating (and thus speeding up) web development.

CMS as part of front end development best practicesImage via Pixabay

A CMS is a software system that allows users to easily create content pages and input content for publishing on a site or application. A typical CMS consists of two core parts:

  • Content management application
  • Content delivery application

The content management application is the admin interface that allows groups of users with appropriate access rights to add content into a CMS, while the content delivery application is responsible for storing and displaying this content to end users.

CMS Features

Businesses turn to content management systems to solve specific tasks, and the most common one, of course, is facilitating content management. Robust modern CMSs can publish public-facing content like marketing materials, news posts, or a whole catalog of insurance products, or populate an intranet with private content meant to only be consumed internally by employees.

These two main applications of content management call for specific features in any given CMS that businesses need to analyze carefully before making the final choice.

CMS Features for an Extranet Environment

Install and upgrade wizards

  • Providing step-by-step guidance, wizards let business users with no coding experience set up a website with basic functionality.

Single content repository

  • Storing all content in one place means there is no chance of duplicates or conflicting copies.

Publishing tools: WYSIWYG editors

  • A familiar graphical user interface that allows users to format HTML content, add images, and other media without using a markup language.

Customizable templates

  • Using a template is the quickest way to set up a site by filling a predefined structure with content.

SEO plugins and analytics

  • For the site to rank well in search engines, it needs SEO optimization tools and access to actual data on users’ behavior.

Permission-based access control

  • Several tiers of access rights ensure that every team member gets access only to those parts of a site that he or she is responsible for.

Search and retrieval of content

  • Being able to look up a particular piece of content may be crucial for many organizations.

Versioning with a rollback option

  • Just like Google Documents let you roll back to a certain draft version of a document, a modern CMS will automatically save time-stamped copies of your content that you can revert to later if necessary.

Multi-platform support

  • A CMS must support your operating system and browser for you to be able to utilize it.

CMS Features for Intranet Environment

Open APIs for integrating with internal CRM and ERP systems

  • Large companies rarely use a single software platform to aid their business processes. Blending a CMS with other solutions so that mission-critical data can travel between business systems becomes crucial.

Integrated security and access management

  • Business owners should have an easy option to control what their employees can access and when. A CMS for a company’s internal use must support connections via a secure protocol (like HTTPS) and two-factor, or even bio, authentication.

System-wide audit and tracking capability

  • A log of all activities in a CMS is essential for keeping a history of all system failures and making it future-proof.

Automated classification of existing and new content

  • The less time your employees spend on tedious, repetitive tasks, like content categorization, the more time they can spend on content creation.

Versioning of content with a check in and check out feature

  • Enterprise-grade CMSs take version control to a whole new level with employees being able to commit and merge changes as they collaborate on a piece of content.

A CMS’s Effect on Front End Development

The fact that a CMS comes with clearly defined back-end and front-end components makes it an indispensable tool for solving common business tasks like the development of a news portal or a corporate website. And the abundance of themes and templates for most popular CMSs out there removes a lot of burden from front end developers. Third-party templates also add flexibility to maintaining a website, allowing business users to easily tweak UI elements and reuse them to create and update content. On the other hand, if a company is looking for a unique look and feel, beyond templates and ready themes, there is always plenty of room for customization of the front end layer.

Some of the most widely used CMSs are WordPress, Drupal, Kentico, Umbraco, SharePoint, Magento, and Shopify, which account for almost 70% of all CMS-built sites, according to a report by W3Techs.

top CMSs for front end developmentImage via W3Techs

The choice of a CMS for a project will always depend on a company’s business goals. While WordPress is especially popular with the blogging community, the Drupal CMS fits various projects (from building a content distribution platform to automating document management), regardless of the tech stack on the client’s side. On the other hand, when there is a need to fit in with existing infrastructure, CMSs like Kentico, Umbraco, and SharePoint can help leverage the full potential of the Microsoft tech stack. And options like Magento and Shopify are ideal for building e-commerce solutions.

Integration with Mobile

It’s worth noting that, though CMSs are most commonly used to power web applications accessible via browsers, we see a growing use of this technology to feed content into mobile apps, IoT products, and other innovative digital solution. And so it’s not a big surprise to see fast-food chains using a CMS to operate their kiosk menus, or Oslo City Bike deploying a CMS as a content store for their products and other customer facing data, on web, mobile, and custom digital interfaces.

A specific type of CMS platforms that is front end-agnostic has become fairly popular in recent years as an attempt to address the surge of gadgets and personal devices with different screens and capabilities to display content. These so-called “headless CMSs” serve content via an API and don’t offer a preview to CMS admins. It becomes a sole responsibility of front end developers to make sure that the client, like a smartwatch or kiosk application, displays the content in a digestible format.

Key Takeaways

As you can see, mastering front end development starts with defining the role of UX and UI, streamlining your design-to-development process, and deciding on the major building blocks like frameworks and CMSs. Therefore it’s vital to pick a software vendor competent in all these areas, who can absorb your business goal and come up with options that work for your needs rather than pushing the use of specific web technologies. At DOOR3, we work with clients to ensure that we come up with thought-out solutions that can grow with their business.

In Part II we’ll take a closer look at some general best practices and trends in front end development, like web performance optimization and the importance of quality assurance.