Gone are the days of blank, structured boxes on a webpage. Nowadays, frontend developers dazzle with their sleek web designs, seducing users at every click. But these days, humans have an attention span of less than 8 seconds—that’s shorter than a goldfish’s! With so many tabs open and sites flashing across our eyes, frontend developers have the tough job of making sites stand out.
So how exactly do frontend developers stay ahead of the curve? We interviewed three frontend genies and got the deets on how they work their web developing magic.
Three Fresh Frontend Strategies
1. Whether it’s content or design first, be flexible
Every frontend developer has his or her design process. But how do they create the most responsive design for their products? One of the more popular dilemmas frontend developers face is whether to design after or before the content package arrives.
“Designing with content is the right way to go. One problem that I see from time to time with design first approach is that the approved designed couldn’t adapt to actual content simply because it’s longer than expected,” says Santiwijoyo Salim, senior frontend developer from at MoneySmart. “Design in the absence of content is just decoration,” he adds.
Although design with content will give you a clearer idea of where you’re headed, it is important to not get carried away. Sounds kind of contradictory doesn’t it? Senior frontend developer at RitualGym, Thomas Chia explains, “An important consideration to me is to be wary of becoming overly tied to the content you are designing for. Content can change, or might be replicated in another language. Because of this I think it’s worth having “scalable” design rules to minimise the chance that one day your design gets “broken” by certain content. Such rules can come out of questions like “How will this look if the content is 2x, 5x or 10x longer than what I have now?”
So the point is to be flexible. Web design is like a river, you’ll never know where it’s going to flow towards. Different projects have different requirements depending on content and audience. Although designing with content is a safe bet most of the time, flexibility is essential to create responsive web design. After all, design is extremely fluid!
2. Know how users respond to different content
As frontend developers, much of the work you’ll do will be for the people. Frontend developers study the habits of users and design to their responses. If you look around you, most people have their eyes trained onto either laptop screens or their smartphones. These are the prime outlets that frontend developers design for. However, when it comes to building responsive design, the million dollar question is which to design for first—mobile or desktop?
The mobile first approach is gaining traction amongst frontend developers. Starting on a smaller scale requires frontend developers to get into the nitty gritty parts of the content provided. A smaller layout also helps them to eliminate unnecessary information. This packs the site full of the most appealing information to users!
“A mobile first approach will prevent you from being caught off guard about how the design will look on mobile, and is also more efficient when it comes to performance optimisation,” says Santiwijoyo.
Yet, the more definitive answer to the question of mobile or desktop first lies in the kind of content, as well as how users would normally respond to certain content.
Thomas says, ”If I am designing a site for an online retail business, it is probably wise to include designs for mobile. On the other hand, you could be designing some sort of enterprise resource planning application that is not intended to be used on mobile (this may even be a conscious decision to avoid what might be a sub-par user experience by accessing a complex application on a small screen).”
Jolanda Nava, frontend developer from Holmusk, also agrees that there isn’t a definite mobile first or desktop first approach. “Generally, having a clear sense of who the users are and what they are trying to achieve through your website or application is going to make the design process a lot more effective,” she says.
3. Learn as swift as the coursing river!
Feel like you’re drowning in code? One tip Santiwijoyo shares is to keep up with design trends by reading up on UX/UI fundamentals. “I read a lot of articles on UI/UX and development. These are some of the blogs that I frequent a lot: Smashing Magazine, CoDrops, CSS Tricks. Keeping myself updated with latest trends such as flexbox and finding out what other people are doing helps me get more intuitive with responsive design.”
Jolanda adds that “looking at how other sites and applications implement responsiveness – and whether that translates into a good experience as a user – can give you ideas and build your own intuition.”
Nowadays, it’s extremely difficult to gain user attention due to their large volume of interaction with computer applications. So how best should frontend developers break through that wall? This is where reducing user friction comes in.
“One way of doing this involves the usual suspects of reducing unnecessary interaction and using visual cues instead of text-based ones. These techniques are pretty well-documented and accepted,” says Thomas.
User experience remains at the top of the best strategies to create responsive designs. After all, the more engaging the site, the more responsive users will be!
But there is no shortcut to learning the trade. As with all things, practise is the best strategy to build responsive designs for apps and websites. Building software and sites will build your skills! Whether you’re new to frontend developing, or a seasoned veteran, time and practise does make perfect.
Frontend developers at their finest
The question most frontend developers face is always “how?”. How do you create the best user experience? How do you stay ahead of the design curve?
“Overall, I would say bring a curious attitude and don’t be afraid to ask questions, whether online or to the people you are working with, it’s the fastest way to learn,” says Jolanda.
Well, keeping performance and optimisation in mind will help you stand your ground against design blocks. If you’re looking for an opportunity to get down and dirty at the frontend, head over to our portal here for the latest web design opportunities!