How We Made HelloSign Responsive

How We Made HelloSign Responsive

The HelloSign exterior has recently received a facelift and as part of that redesign effort, our development team has been hard at work building a more responsive HelloSign experience. But what exactly does a responsive design entail and how did we implement ours? 

A site that is responsive is one that responds well to being viewed on a variety of devices, whether that’s a desktop, tablet, or mobile phone. It is rendered in a way such that page components respond to a device’s display size by scaling and rearranging themselves to balance the layout and make the page easy to use and navigate. This is achieved by using a proportional grid layout combined with images and typography that scale dynamically. As mobile Internet access eclipses that of desktops, responsive design is imperative for web-based services and applications. 

And now is a great time to build a responsive webapp. With ubiquitous browser support for CSS media queries, developers can conditionally style elements without kludges of browser-specific JavaScript. On top of that, a variety of proven frameworks like Bootstrap, Columnal and Foundation have gone responsive, offering grid layouts that are easy to configure and use.

‍Our homepage and pricing page work seamlessly on different devices.

Our homepage and pricing page work seamlessly on different devices.[/caption] We chose the Foundation framework because it focuses first and foremost on the layout. Bootstrap was another contender, but unlike Foundation, it provides everything a developer may need to build a web application from the ground up. We already had a fully functional front-end built on jQuery, so Foundation’s lean-and-mean simplicity appealed to us. Additionally, we were planning to build many of the newly redesigned UI components from scratch using Facebook’s React (more on that in a future article). 

From our designer’s standpoint, a responsive site meant that each display size would require a mockup. That said, our focus was not on being pixel perfect, but finding balance between the elements for various display sizes. This meant we were able to pare down the number of target view sizes to a manageable three: a “small” phone, “medium” tablet, and “large” desktop. Foundation supports these size ranges out of the box, providing SCSS variables such as $small-only, $medium-down, or $large-up, that make it easy to apply the appropriate media queries to element styles. The mobile mockups were done first, forcing us to consider what information is the most important for the user and design a UI that took into account mobile limitations such as the lack of a hover state. 

Table: A sample of the Foundation SCSS variables that define ranges for device view widths. If a visitor’s view size falls within the min- and max-widths listed, conditional size styles for that range (e.g., “$small-only”, “$medium-up”, etc.) will be applied.

From an engineering standpoint, applying the grid layout with Foundation was effortless. The development staff was also encouraged to take a “mobile first” approach. Foundation encourages this by suggesting that the mobile styles should be the default, non-conditional CSS rules and that larger device styles should be conditionally applied on top of those. The direction of inheritance for Foundations CSS classes is from “small” to “large,” which facilitates this quite nicely. In terms of the grid layout, Foundation handles the grid-specific media queries, making it easy to tweak your design without needing to rearrange the entire DOM. 

 An interesting side note is that the combination of React with Foundation required a paradigm shift for some of our developers, as we were required to analyze the designs and determine component boundaries, reuse scenarios, and the transition between display sizes. HelloSign is a PHP-based application, so determining where the lines were between our JavaScript, JSX, and PHP took some practice recognizing. Also, the Foundation layout classes had to be baked into some of our React component JSX, forcing us to abandon any qualms we had about maintaining a separation between structure and presentation -- though arguably, React encourages this. Because our components are not intended for reuse outside of HelloSign, this ultimately had the effect of making development easier and improved component modularity. 

Even though Foundation supplied the grid layout, we still had to define custom media queries to build styles for responsive UI components. SCSS makes this easy. We used the redesign as an opportunity write all our new CSS as SCSS according to SMACSS and SMURF guidelines, further supporting our push for modularity and reusability. SASS preprocessing allows us to develop more complex hierarchies of styles, while maintaining a separation between modules. This leads to flexible, highly readable CSS, which is a departure from our previous stylesheets which were commonly peppered with “!important.” With a SMACSS/SMURF approach, shallow selectors and class-only styling ensure our element styles will be applied correctly every time. 

‍We decided to cut down on content on our ‘Careers’ page so it displays better on a mobile device.

We decided to cut down on content on our 'Careers' page so it displays better on a mobile device.[/caption] SMURF guidelines are targeted for Rails development, but contain great suggestions for class naming that make locating styles for a particular module or component easy. Another lead that we took from SMURF was to build a living style guide. We didn’t end up using the Smurfville gem to generate it, instead opting to build our own. The guide offers a “menu” of colors, typographic styles, and React components that can be dropped into a layout as needed. Not only does this make our jobs easier when building future pages, but also promotes consistency across the site and provides our designer and engineers with a common language and visual reference to communicate ideas and changes. 

If you are considering, or are in the process of, creating a responsive web application, you’ve no doubt considered the many grid frameworks that are out there. Foundation is a great choice if you are retrofitting an existing layout or building around non-Foundation UI components, although be aware that it does not support versions 8 and below of Internet Explorer. We considered this to be a small price to pay for its simplicity and intuitive styling approach. We highly recommend designing your site with a “mobile first” approach and adopting guidelines like SMACSS/SMURF that can ensure your CSS is easy to work with and developers won’t step on each other’s toes when updating styles. Finally, prioritize the development of a living style guide that will compile your styles and responsive components will facilitate maximum reuse. 

Take our site for a test drive – we’re thrilled with how lightweight and responsive it turned out. In future releases, we’ll be using this redesigned foundation to launch improvements such as spriting, dynamic loading of high-resolution images, and more. Stay tuned!  

Try for yourself!

See HelloSign in action.

Get news, insights and posts directly in your inbox

ขอบคุณ! เราได้รับข้อมูลที่คุณส่งแล้ว!
ขออภัย เกิดข้อผิดพลาดขณะส่งแบบฟอร์ม
Oops! Something went wrong while submitting the form.