The Breakdown: Front-end Development

Sep06
By Natalie Waring

Understanding Front-end Development

The Breakdown

Our Breakdown blog series explores each of our departments to give you a better understanding of all that we do at SiteCrafting and GearLab. Our marketing interns have been interviewing our team of experts to share insights on key aspects of our web design and development process. Continue reading to learn about the basics of front-end development. 


Creating a usable, functional, and well-designed website involves a primary focus on web development. Two fundamental areas of web development are front-end and back-end development. In this post, we’ll focus on the field of front-end development with the help of our Senior Front-end Developer Reena Hensley and Front-end Developer Sean Dozeman (Dozer).

WHAT IS FRONT-END DEVELOPMENT?

The phrase “front-end” refers to the elements that users see when visiting a website such as the header, navigation, body, images, click interactions, and more. Front-end developers build out the interactive environment for the front end (or public-facing end) of a website by bringing static images and designs to life.

Several steps go into front-end development beyond just writing code to match a design. Front-end developers must also accomplish these tasks:

  • add design and technical elements based on a proposed design
  • create a responsive website (i.e., one that properly works and displays across all browsers and screen sizes)
  • enable website accessibility for users with disabilities
  • solve web development issues that may cause a confusing or poor user experience
  • ensure the website is highly optimized as slow websites can push users away

THE LIFE OF A FRONT-END DEVELOPER

Front-end developers typically work in design files, coding out the website using programming languages such as Hypertext Markup Language (HTML), Cascading Style Sheets (CSS), JavaScript (JS), Less, Sass CSS (SCSS), and Hypertext Preprocessor (PHP).

In addition to expertise in programming languages, knowledge of a JavaScript library such as JQuery and a templating engine such as Twig is also a must for developers. A basic knowledge of Sketch and Photoshop is also necessary to work through design files.

Front-end work also requires strong troubleshooting skills as developers must pay attention to detail when thinking through issues such as possible scenarios and various screen sizes. Developers continually make updates and changes throughout the entire development process.

CHALLENGES AND REWARDS

Challenges frequently occur throughout the web development process. Reena mentions that when changes come up halfway through a project, developers must quickly figure out how to rework issues to make features fit within a design. Dozer agrees, adding, “There may be ten ways to solve the problem--however, figuring out the best solution is part of the challenge.” Although problem-solving can be frustrating, Reena says, “Resolving issues pushes us to be better and forces us to think through new ways of doing something that might be even better for the next time.”

A rewarding aspect for Reena is digging into new designs, working through and planning the best possible ways to code, and coming up with fun features or new CSS methods. Dozer enjoys the rewarding process of starting with essentially nothing in the browser and creating a fully functional working interface with interactivity.

WHY FRONT-END IS IMPORTANT

Front-end is important as it connects two crucial areas: the website design (vision, look, feel, personality of the site) and the back-end development (the working pieces, content, management areas, and dynamically-driven data of the site). Reena explains, “Front-end brings expertise towards providing the best possible solution to bridge these areas together to form a working web product.”

Front-end is also crucial because it is how users interact with web applications and websites. “Front-end development goes hand-in-hand with good design,” explains Dozer. Good front-end, with good design, helps make websites less confusing for the user by making the technology intuitive and easy to use.

HOW FRONT-END PLAYS A ROLE IN OUR PROCESS

The front-end team works with essentially every other department at SiteCrafting and GearLab. Dozer remarks that “the key to team success is communication with not only front-end developers, but with everyone else involved.”

USER EXPERIENCE (UX)

Front-end development works with the UX team to help add new features to a website or improve the current usability of a design. Front-end also provides insight to the UX team on understanding possible designs, building out designs, and adjusting design elements.

VISUAL DESIGN

In addition to UX, front-end often collaborates with the visual design team to determine design feasibility. Our front-end developers share possible solutions or ideas, while also explaining why designs will or will not work.

BACK-END DEVELOPMENT

The front-end and back-end developers continually communicate during all projects, focusing on aspects such as interactivity and usability.

CONTENT STRATEGY

Front-end collaborates with content strategy when entering, creating, and strategizing website content. For example, our content team helps our developers determine the organization and placement of content, along with focusing on SEO. Working closely with our content strategists allows our developers to account for any possible problems within the design.

QUALITY ASSURANCE (QA)

Typically, front-end works with our QA team when problems occur while testing a website. However, our front-end developers try to make this meeting as rare as possible.

PROJECT MANAGEMENT

Throughout each project, our front-end developers communicate with the project management team, discussing budgets and timeframes.

COMMON MISCONCEPTIONS

Dozer points out one common misconception of front-end development: “It's just a little bit of HTML and CSS -- super easy, right?” Not so much. Developers must also consider and plan for many additional aspects than just coding a cool design. For example, they must creatively solve problems that come along with each project. Developers need to stay up-to-date on new technology as the field is constantly changing and growing. Practices that our developers carried out six months ago may now be outdated because of the evolvement of browsers. Using previous solutions might not solve the same problem for a current project.

Another misconception of front-end development is the time and budget required to create a well-developed website. Building out web solutions take time, expertise, and careful attention. Although multiple free website builders exist, Dozer explains that these platforms will not result in custom, high-quality web solutions. In other words, cheaper web solutions do not equate to valuable web solutions.

RESOURCES

Want to learn more about front-end development? Check out these favorite resources from Reena and Dozer:


Follow along with our blog series every other week to read more about our departments. Our upcoming Breakdown series topics are:

  • Back-end development
  • Project management
  • Quality assurance (QA)

In the meantime, connect with us on social media to keep up with our team, blog posts, projects, events, and more.

SITECRAFTING

GEARLAB


Behind the Build, Dev

Back To Feed