Journal >

A Guide to Responsive Web Design

A Guide to Responsive Web Design

A collection of web development tools, services and approaches for designers that wish to develop their coding skills and build responsive websites.

For the last few years I’ve earnt my living working as a web designer (in agency roles and on a freelance basis). Much of my work involves creating flat concepts in photoshop before passing these onto talented front-end developers. I really enjoy working in this way. It lets me concentrate on the visual design whilst expert, dedicated coders transform my designs into functional websites.

I also aim to keep up with latest techniques and best practices in web development too. Something that’s really caught my attention in recent years is Responsive Web Design (RWD). It feels like a logical way to cater for the rapidly growing range of devices that people use to view online content. I’ve been mindful to maintain a basic knowledge of HTML and CSS which I’ve made use of in several side projects. In the last couple of months I’ve decided to immerse myself in code and learn HTML5/CSS3/PHP and build my own responsive websites.

Below I’ve listed some essential tools and approaches. My hope is that this list will be useful to designers who’d like to learn front-end development techniques or developers who want to begin building responsive websites. It’s by no means comprehensive or a step-by-step guide, but rather a selection of my preferred tools and methods. I’ve focused on the tools I use to write my HTML, CSS, php and optimise graphics. I haven’t attempted to cover the set-up of local servers, hosting, domains, FTP etc. although I do briefly mention each of these towards the bottom of the page. Hopefully it’ll provide a decent overview and lead others to seek out the best options for themselves.

The list also assumes a basic knowledge of HTML and CSS. If you’re literally starting from scratch there are lots of useful tutorials and online courses that can help. This side project by Jessica Hische and Russ Maschmeyer may prove to be a useful starting point – Don’t Fear the Internet.

 

HTML Editors

dev-txt-editor

Probably the most important piece of software you’ll use as a web developer – the HTML Editor. After researching the available options I chose Sublime Text. It’s a popular editor and with good reason. It has an unlimited trial (if you don’t mind the occasional pop-up) and is very reasonable to purchase if you’re creating commercial output.

The default theme really appeals to me with it’s black background and colourful type. It’s syntax highlighting is a joy to use and makes it extremely easy to spot any slight mistakes you may have made in your code. You can use the editor with all of your HTML, PHP, CSS and Javascript files.

You can find an extensive list of HTML editors for Mac & PCs on the Skilledup website. They also include pricing information.

 

Frameworks

dev-framework

Frameworks (also known as boilerplates) provide scaffolding (global styles, grids and layouts), Base CSS (tables, forms, buttons etc), Components (dropdowns, button groups etc) and Javascript (for carousels, tool tips, popovers etc). Much of which most designers will wish to customise to suit their needs.

One of the most popular frameworks is Bootstrap. Developed by the designers/developers at twitter it’s a comprehensive collection of CSS, HTML templates, Javascript and more. I used Bootstrap in some of my early projects. As the HTML templates and CSS files have been written by designers at the forefront of their discipline they are great to learn from and easily editable. It’s useful to see how they’ve structured their code to learn how to properly organise your own.

I currently use Zurb’s responsive Foundation framework. Whilst I had no issues with Bootstrap I decided it was worth trying an alternative framework. I find it simple to use and always begin by downloading only the Responsive grid and adding other components as and when needed. This keeps the CSS simpler and easier to maintain (It’s best not to download the entire framework as you’ll most likely end up with bloated and redundant code). I also begin with my own stripped down HTML files which contain only the basic code needed to begin a web page.

There’s some debate about whether we should be using frameworks at all. I feel that if you select only the components you require and learn to edit them yourself they can be a valuable starting point.

View a great list of popular frameworks on Mashable.

 

Responsive Design

dev-responsive

With the huge variety of current devices and potential devices that are used to access online content comes a need to present that content clearly based on individual screen sizes and resolution.

Adaptive web design (AWD) is a server side technique (rather than client side) which provides CSS rules to suit various device resolutions. The potential problem with this approach is that you specify resolutions based on specific devices. So anyone viewing the content on a device that hasn’t been accounted for may not see the site as you’d like them to.

Responsive web design (RWD) is very similar to AWD but takes things a few steps further. Instead of focusing on specific devices this approach aims to cater for all devices and resolutions. The content of the website becomes the designers focus. Media Queries are used to edit the layout of the content within a fluid grid. When the content becomes cluttered, too spread out or generally illegible you add a breakpoint. Using this approach could lead to fewer breakpoints as you’ll only use them when the content requires it. This will also make your sites more future proof as it will work with devices that are yet to be released. Google also recommends RWD as it’s preferred approach.

There are terms that you’ll definitely come across including Progressive EnhancementCSS preprocessorsConditional Loading and many more. It can all be a bit overwhelming at first but stick with it and things will begin to make sense.

If you want to learn more about responsive web design Brad Frost’s This is Responsive is essential reading. You’ll find a selection of RWD articles, resources and more (I’m still working my way through the links myself).

 

Vector Graphics

SVG

I use Scalable Vector Graphics (SVG) wherever possible. If you’re a dab hand in Adobe illustrator this technique is a welcome addition to your web design toolkit. You can create shapes and save them as SVG’s directly from Illustrator. This is especially useful for simple logos and icons. The main benefits being smaller files and graphics that will look extra crisp on all displays (even retina).

It’s worth adding a fallback for browsers that don’t support the SVG format. Luckily there’s a very simple way to do this as explained here.

 

Web Fonts and Icon Fonts

Web Fonts and Icons

When I first began designing websites many of the larger headings had to be output as pixel graphics especially if you wanted to use a fancy non-system font or icon. There were some big down sides to this approach. Firstly any amends needed to be made by designers, even something as simple as changing a single word in the heading. Colour changes could cause an even bigger headache especially if a company decided to update it’s branding and use a different colour scheme or font. This could result in the need to edit numerous graphics across a website.

Using Web Fonts and icon fonts mean text changes and colour changes can be handled very quickly and easily. Text changes can be made by developers (or by the client if the CMS allows it). Colour changes can be handled via CSS. There’s also the added bonus of clarity especially on retina displays or if the user decides to zoom in. I use Typekit and sometimes Google fonts in my own designs. The font files are stored on a server and sent to a users browser so there’s no need to have the font installed locally. Here’s a great article on web fonts featuring links to many of the better web font services.

Icon Fonts can be used in place of icon graphics. There’s a great selection of free and paid options out there. I’ve made use of Font Awesome on this site. It’s free and designed for use with the Bootstrap framework (although you can use it with other frameworks). At some point I plan to design some unique SVG icons for the navigation but for now it’s a reliable substitute. I also plan to create my own set of icon fonts and will most likely post the process in this journal.

You can find an outstanding collection (overwhelming even!) of Icon Fonts via CSS Tricks.

 

Images

Images graphic

Images are a common feature of most websites. Optimising those images to reduce their size is very important. I save images using the ‘Save for web’ command in Adobe Photoshop and adjust the quality settings for each image. If you’re working on a site with a large amount of images it may be best to use a batch process to save folders of image files.

Whilst ‘Save for web’ will help reduce file sizes there are other tools you can use to reduce them even further. I make use of ImageOptim on my Mac. You simply drag and drop images onto the app and it will calculate how much it can reduce the file size by without affecting the quality.

Using large images can cause problems even if they are optimised. This is especially true on mobile devices or for anyone viewing a website via a slow connection. The large photos on my own site have been optimised but may still take some time to download depending on your connection. A possible solution is Foundations Interchange which will serve up different images based on the device resolution. I’m planning to make use of this tool but simply haven’t found the time yet. Unfortunately it still requires you to save out multiple versions of the same image.

 

Content Management

CMS graphic

Once you’ve built your website you’ll most likely want to link it up to a Content Management System (CMS). This will help you organise and edit the content of your website and will be especially useful if you’re creating a website for a client that will need to edit sections of the site themselves.

After researching the available options I decided to use WordPress (WP). There are lots of options but WP seems to be a logical starting point for designers due to being one of the easiest CMS’s to learn. Whilst making my decision I also found this useful post by Chris Coyier explaining why he chooses to use WP to power CSS Tricks.

My process for current projects is to build a working HTML prototype of my website including images, CSS and Javascript. I then slice up the code and add php to link everything to WP. Although this approach only uses basic php I consider this one of the more complicated aspects of moving from design to development. However, after a few builds the process becomes much easier and quicker.

For my own websites (including this one) I design in the browser. This method skips photoshop (PS) entirely so you’ll start building your site in your HTML editor and use your browser to view the results. It’s a quick process and really helps you get to grips with HTML and CSS. I’m not completely sure how I’d apply this approach to client work though? I feel most clients like to see what they are getting for their money and generating PS visuals for this seems like a safe way to ensure you’re working towards an end product they’ll be happy with. Using wireframes and involving clients in discussions about the content and UX may help eliminate this step? In practice I’ve found that many of the clients I work with report to managers or bosses that may not want to get involved with the design process and they require comprehensive designs to provide feedback on. I guess the approach you take will be heavily influenced by your clients knowledge, vision and willingness to learn.

Local Server

When you develop websites on your computer you need to be able to simulate a live server environment. I use MAMP to generate a local server meaning I can run php and WP on my computer. It also means I can make use of web fonts and other services without having to upload anything to a live server.

Testing

Once you’ve got the site looking and running as you like it’s time for testing. Browserstack lets you see how your site will display on numerous devices and browsers right in your preferred browser. Better yet it allows you to do this on your local server so you can catch potential bugs before sending the site live.

You can also use the tools available in the Chrome (DevTools) and Firefox (Firebug) browsers to run tests and inspect your websites.

File Transfer

When everything is ready you need to transfer your database and files to your live server (You’ll need to purchase and set up hosting/domains). I use Media Temple to host my websites and 123-Reg to purchase domains.

I make use of Filezilla to transfer files. If you use WP there are several changes you’ll need to make to the php files to get everything up and running. Luckily WP is a popular CMS with some great documentation so finding tutorials online is fairly straightforward.

 

Thanks for reading!

I’ve only briefly touched on many of the things you’ll need to learn before you can begin building responsive websites. Hopefully it’ll provide enough information to get started. I’ve made extensive use of online tutorials and also found answers via developer forums. Most problems you run into will already have been encountered and solved.

The best advice I’d offer is to read up on the subject as much as possible and realise that even the most experienced developers don’t know everything. If, like me, you find learning new skills especially satisfying and rewarding it’s more than worth all the effort.

Hello!

I'm a North Yorkshire based Creative Director with over 12 years of commercial experience. I work on digital and print projects for creative studios, businesses and like-minded individuals. I provide a range of graphic design services including web design, front-end web development, print design and illustration.

Read More »