Creating an accessible, functional, and well-designed website involves a primary focus on web development. In the development world you may hear developers defined differently ranging from front-end developer, react developer, full stack developer, and back-end developers. Here at SiteCrafting we have a large team of developers that can cover pretty much anything thrown at us, but the world of front-end development is focused on by myself (Reena Hensley) and Leah Ruisenor.
What is front-end development?
The phrase “front-end” generally refers to the client facing elements of a web project. The areas that a user sees when visiting a website such as the header, navigation, body, images, buttons, and interactions. Front-end developers stand between design and logic, we get to bring vision to life. With this responsibility we need to understand the languages browsers use, at a base level, that is HTML, CSS, and Javascript. Beyond that we also:
- Expand on design adding function and/or technical elements based on user needs.
- Work with UX (user experience) and design to ensure that our work is accessible.
- Solve development issues that may cause confusing or poor user experiences.
- Ensure a website is responsive and works across different browsers and screen sizes.
- Test for website optimization as slow websites can push users away.
The Life of a front-end developer
Front-end developers here typically work in design files and the browser, we use templating engines such as TWIG and preprocessors such as LESS or SCSS to generate HTML and CSS. We also build out much of the functionality of a site through Javascript.
Often times we are more than just front end developers and become full stack developers building out entire sites both back and front using WordPress or working with our back-end developers to expand on custom tools and experiences.
Front-end (like pretty much all development) requires us to constantly grow, learn, and expand our knowledge. We must pay close attention to detail and must be ready to expand on and/or pivot and make changes to our thinking when challenges arise. Developers continually make updates and changes throughout the entire development process so documenting clearly and staying organized is extremely important in making extendable web projects.
Challenges and rewards
CSS has always been my primary love and this past year or two has brought so many more new challenges and exciting new features to that arena that there is always something new to discover and challenges to overcome in creating and bringing a design to life.
Obstacles frequently occur throughout the web development process, whether that be a change in client needs and functionality or just engineering the functionality and design as planned. When changes or new discoveries come up at any point during a project, developers must quickly figure out how to rework elements to make features fit within a design in an accessible way. Although problem-solving can sometimes be frustrating we have a strong team behind us and coming up with new solutions pushes us to be better and forces us to think through new ways of doing something that might be even better or lead to building a better user experience. Leah embraces the challenge and thrives on it, she said, “I know there is a way, there is always a way, you just have to find it. The challenge is the fun part.”
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). Front-end development is on the front lines to creating and managing a users experience. By bringing the design together and bridging the path between the backend data we create the building blocks that control how a user feels about the content they are reading or the actions they are taking on a site.
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. Collaboration and good communication is key throughout our process.
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 most often collaborates with the visual design team collaborating on design effects and/or animations and working through design feasibility and usability through development.
Back-end Development
The front-end and back-end developers continually communicate during all projects, focusing on aspects such as interactivity and usability and data manipulation.
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.
Quality Assurance (QA)
All of our projects go through a QA process of thoroughly testing and looking for any potential misses or problems that were not caught during the earlier phases. After being on a project for a while it is essential to have fresh eyes look things over and make sure everything is running smooth and up to spec and QA helps us with that process.
Project Management
Throughout each project, our front-end developers communicate with the project management team, discussing budgets, timeframes, estimates and project planning.
Front-End Development and the Future
Front-end development is certainly not as simple as it once was viewed. There are many challenges that we must embrace and we always need to be willing to continually learn, grow, and listen. Teamwork helps keep us honest and from getting stuck in one place and saying good enough. Leah said, “Having a good team around is crucial so you don’t have to spin your wheels too much. Bouncing ideas off each other can really get the mind working.” We will always strive to put out the best product we can for our clients and users and continue to embrace the challenge, pay attention to detail, and be ready to move forward.
