Responsive

Search form

Would You Like To Get Started

Would you like to get started? GET A QUOTE NOW

 

ScriptiLabs understands that being responsive is a necessity.

Our designers will guide you through the proper responsive layout of your website.

Let's go over the two types of responsive development ScriptiLabs provides.


Snap Responsive (Multiple Fixed Width Layouts)

With this type of responsive development, we set up media queries that detect the browser’s “viewport width” (the dimensions that can fit all of the content horizontally on-screen without scrolling) via CSS. We have our desktop view (> 768 pixels wide), our tablet view (> 450 pixels wide), and mobile view (< 450 pixels wide). With this approach, we're designing for three distinct screen sizes with minimal variation. Though this approach is adequate with almost all sizes of widescreen desktop monitors as well as iPads and iPhones, the devices that are "in between" those sizes might not display perfectly - there are cases where elements on the page might differ slightly from the design or scrollbars appear to enable someone to see the full view.


Fluid Responsive (Dynamic Elements and Containers)

Fluid responsiveness requires a different way of thinking, designing, and structuring the page than Snap. Instead of designing for absolutes, we design in percentages (with a few media query tweaks to get a near pixel-perfect look on specific sizes). In other words, elements on page are designed in relation to the barriers of the viewing area so they're flexible as the screen size shifts. With this method we anticipate and develop for elements interacting with one another on the page. We set up media queries for fluid AND snap - snap being the “keyframes” where the percentage is exactly where we want it. This approach covers the standard desktop, tablet, and mobile sizes, as well as everything in between since the elements are dynamic, adjusting in relation to one another rather than being static on page. This allows the browser window to be resized to almost any size and the page will react appropriately to the new screen dimensions. Note: There are elements, such as third party plugins, that are not fluid in design that can interfere with the smooth flow of resizing. Most of the time we do not have control over this and it requires a lot of additional programming time to either fix or re-create the functionality in a fluid manner.