How we do it - Our Approach
A site designed with RWD adapts the layout to the viewing environment
There is a multitude of different screen sizes across phones, “phablets”, tablets, desktops, game consoles, TVs, even wearables. Screen sizes will always be changing, so it’s important that your site can adapt to any screen size, today or in the future. That where responsive web design (RWD) comes in.
Responsive web design (RWD)
Responsive design is a design approach aimed at creating sites that provide an optimal viewing experience across a wide range of devices. The same site works on the mobile phone in your pocket, tablet in your backpack and computer at your office. A responsive web design adapts the layout of the site, text, media, ads to the dimension of the window through which you are exploring the internet.
“Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Responsive web design represents a fundamental shift in how we’ll build websites for the decade to come.” - Jeffrey Veen
Designing with Code
A picture may be a thousands words but it only a snap shot in time. Clients want to see how that button works on their website. By providing you with a URL, you can look at the designs in various browsers and on various devices, resize them, click links and navigation, and check out hover states. Instead of asking you to pretend that an image is a website, we show you a website.
Prioritizing Content and Layout
Whilst it may be true that visitors (in most cases) don't visit a website for its design, but instead visit it for its content, by designing in the browser we are able to focus on a website's content and build the design around that
Save and reuse common patterns
If we had to design in the browser from scratch each time, things may seem like they take forever but by starting from a custom base, a framework, we can eliminate any repetitive steps.
Style Tile is a single page collection of common elements including colors, typography, textures, patterns and design features. Where an interior designer may present their client with a mood board comprising paint chips, fabrics and magazine clippings, the progressive web designer can present their stakeholders with a set of Style Tiles.
Optimizing content efficiency
The amount of data downloaded by apps continues to increase over time. To deliver great performance we optimize data delivery as much as possible. Google loves pages that load fast. High quality images are often the number one items responsible for slow page load times, which then results in Google hating your website.
A CSS preprocessor helps us write maintainable, future-proof code and it seriously reduces the amount of CSS we have to write. Where these tools shine best are in large-scale user interfaces that require huge stylesheets and many style rules.Tools like Pug and Sass drastically increase our coding speed.
One of the common criticisms of frameworks such as Twitter Bootstrap is that they include far more code than you actually use in your site, leaving you with a bloated code base and poor site performance. Fortunate this can be avoid by using the framework’s source code and only using the components required. Syed Fazle Rahman walks us through this process in the final chapter of his book Jump Start Bootstap