New & Improved: WBCS - SW Gets A Fresh Look
We’re excited to launch the Women’s Business Council — Southwest’s new website; a project hand-crafted by GSATi staff to meet the needs of our clients' goals, both long and short-term. To give you a better peek at our development process, Senior Drupal Designer/ Developer Andrew 'Deg' Chernauskas sat down with us and shared his experience making WBCS - SW a better place [ to visit online, that is ;) ]
DL: Thank you so much, Andrew, for taking the time to share your experience with us on the Women's Business Council - SW site. Can you give me a brief overview of your project before we begin?
AK: Absolutely. The site features easier to use tools for members as well as a blog and event system that’s easier for staff to maintain. It’s been fun implementing new technologies provided by Drupal 8 to really speed up the site and create a vastly improved experience on mobile phones. This was also our first project to employ atomic design principles, a leading methodology to speed up design and development.
DL: So you mentioned there were several tools updated to the user experience of the webssite. Can you give a few examples of the new, easier tools that WBCS members may now access?
AK: The new WBCS website features a completely revamped Member Center, with quicker access to submitting and browsing product and service bids, upcoming events, downloads, done deals, and more.
DL: What's your favorite “new technology” implemented in the system provided by Drupal 8?
AK: BigPipe, a technology built by Facebook, combined with Drupal 8’s new caching system allows for different parts of a page to be loaded in asynchronously. (Traditional webpages show a white screen until they are fully ready to be displayed.) This allows site visitors to start viewing and browsing each page much more quickly while larger elements, such as photos and videos, load in.
DL: That's some pretty interesting stuff. It's amazing the things we can improve that are seemingly pointless, yet so valuable to the user experience. What kind of results should one expect from these improvements, long-term wise, as far as experience and use is concerned?
AK: By building a site that is quick to load, easy to use, and easy to maintain, we strive to empower WBCS’s members to grow their businesses and WBCS to grow as well.
DL: What changes were made to improve mobile responsivity of the site?
AK: The site is now fully responsive, adapting to various phone, tablet, and desktop sizes using the ZURB Foundation 6 framework. Foundation allows us to easily rearrange elements on the page for the optimal layout for each device. We’re also using Responsive Image techniques to load in smaller images on smaller devices—saving visitors time and cellular data cost.
DL:Atomic design principles: Why choose this method? How does it differ from previous methods used in web design?
AK: Two of the major challenges facing clients when building a website are figuring out the design and content without seeing a high-fidelity mockup first and then how to edit and maintain the site once it’s launched. Our custom implementation of Paragraphs in Drupal, guided by atomic design principles, aims to ease these two pain points. First, it allows us to build out components of the website quickly and the flexibility to rearrange them. This allows a more iterative and collaborative design process. Second, it gives a canonical place for each piece of content to be edited or added—instead of digging through CMS menus. Third, the consistency it affords makes the site easier to navigate and use.
DL: It seems it is just another way of discussing typical web design, but with a fancy name. Do you agree?
AK: While I certainly hope atomic design has become the standard for “typical web design,” historically there has been a divide between the design and development departments of production. Usually full-page mockups would be handed off from a graphic designer to the development team. This could lead to inconsistencies across the site and make it harder to develop. By building out a library of design components, not only is it faster for developers to build and maintain, it allows content editors and designers much more flexibility to adjust layouts and create new content without the help of a developer.
DL: I can definitely see that from your perspective. Well, it sounds like this has been quite the journey to success for you and your staff. Thank you for taking the time to share your experience with us, we're excited to check out these new features!
AK: My pleasure.
For more features on what we do here at GSATi, be sure to visit our blog page here.
Have a website that could use some fine-tuning? Email us at firstname.lastname@example.org for more information.