web design and digital marketing agency

Love&Equality

About Newbird

Even in today’s world, ruled by devices and machines, there still is no tool more powerful than human collaboration. We work with you side by side to learn your business challenge and find the most suitable digital solution – whether it’s a new website, an interactive sales tool, an attention-grabbing online advertising campaign, or anything in between. When you team up with Newbird for web design and digital marketing, you can count on an experience guided by our agency’s core values.

Project Goals

Initial project briefing from Newbird noted very important aspects to the success of this project for All Out that included, responsive adaptation between multiple screen dimensions, easily digestable for another development team to consume upon handoff, and a design that stays true to original comps provided.

All Out LGBT Workers Campaign.

Interactive Motion & Responsive Development/Design were the core disciplines required to complete the tasks at hand. Libraries that required presence such as jQuery and Bootstrap were included to provide the handoff team a consistent codebase that's easy to comprehend, widely understood, and well documented.

Process

Upon examination of comps we began the process by creating a bare bones layout structure in HTML without the inclusion of any visual aesthetics and flourishes. It was also decided that if anything can be done using CSS then CSS would be the implementation of choice. This proved useful in many aspects such as the slanted banner in order to avoid the need for an image and additional http requests. It also lent for crisper rendering as using CSS allows for resolution independence.

Additional aspects and features regarding motion were created in isolation in order to keep focus on the motion.

Since the deign required adaptation amongst other screen dimensions, we discussed what device types, browsers and operating systems required support based on analytics and anything outside that spectrum would be progressively enhanced.

Building

srcset for image swapping with diff resolutions for images of flags. use structures that are familiar and use bootstrap patterns where/if needed. use scroll effects only where applicable. dont overdo it on devices. to keep small file size footprint, everything was coded from scratch. since features were small in requirements to build it was possible to work from scratch.

Responsive Design, Interaction Design and Motion in action.

Each adaptation for screen dimensions were carefully examined for purpose and functionality using an assortment of tooling to check for consistency. Additional libraries were kept to a minimum as features were easily written form scratch and resulted in low overhead and minimal libraries to maintain using future friendly approaches within the code.

Challenges

Challenges were expected for this project and were experienced with aspects such as scroll behavior; specifically iOS touch screens. These touch screens and operating systems can be problematic since the scroll event doesn't fire until the finger lifts the screen. The expereince can be jarring especially with items that pin on scroll; the item could be scrolled beyon pinning point and snap back into place once finger lifts screen. This was fixed by detecting and controlling the behavior for these systems through UA detection.

The red stripe that is transformed also presented problems as slanting text using only font was pixelating and not rendering crisp. This result was due to the slanted banner and any children (text) had to be transformed in the opposite direction due to the nature of the markup. To solve this problem we opted for an SVG.

slanted banner had to stick to top of browser window on scroll. this was a bit tedious due to the nature of ther detection.

some assets did not need to be loaded all the time so we opted to conditiponally load where we can based on browser resize and window reresh to detect.

Custom Goal Tracker Component. Hover on right corner to rerun demo.

progress tracker had to maintain ability to be cusotmized using their data. wrote expressive functions that accept any argument in order to work within their system desired. Also gave them a custom Sass file with the ability to quickly changes aesthetics and sizing on the fly.

had to be handed off to a team and be able to be interpreted easily. had to work backwards as comps only showed a few variations at first inluding only a large design provided initially. had to work with large imagery and discuss removal at times due to importance. ultimately this saved us on load times and performance.

Deliverables

The entire project was packaged with thorough documentation via a README and submitted to a priivate GitHub repo. All requirements according to goals, device support and feature requests were included and ready to view in working order.

MacBook Layout.
iPad Layout. Scroll device screen to view full design.
iPhone Layout. Scroll device screen to view full design.