How to Break Down a Responsive Website Design and Imagine How to Build it with Code
A member of our private support community had the opportunity to apply her developing coding skills while working with a web designer.
Working with a website design can be tricky when it comes to breaking it down into actual code. Oftentimes you are presented with one page design, and you need to start out by envisioning how it will be applied to all pages, and how it will look on all devices – large computer screens, and small iphone and Android devices. Here are a few ideas of what you need to think about.
First start by printing out the PSD file:
Pull out some markers and draw all over it! Draw boxes around containers so you can break down each part into <divs>, so you can start thinking about how you will jigsaw it together. It’s a little like reverse-wireframing! That is, instead of starting out with a wireframe, you are taking a finished design and taking it right back to basics!
That process will usually trigger questions such as:
1. Is the header a finite width and what happens when the screen size is bigger than that width? What will you see either side of the image?
2. Same with the footer: will it extend to the edge of the screen, and expand in width infinitely, or will it be a specific width? Will the widget boxes insider the footer also expand to the full width of the screen, or would you (as I would suggest) rein them in, and set them up inside an HTML container (or a div) which will be the same width as your main content container, and centered on the screen?
3. Let’s say you have an image sitting alongside a paragraph of text. When your browser window (and device) gets smaller, what happens when paragraph text becomes longer than an image ? (a) Do you want it to wrap around the image? Or (b) will it extend down in a long column of text?
- If it is (a) then you could use the WP featured image box in your Thesis Responsive Skin templates. After you position your WP Featured Image box in the template, click on the gear icon for that box and choose to have the image left aligned with an image wrap.
- If it’s (b) then you will have to divide the posts up into two boxes, with the WP featured image in one, and the content in the other. This would also require a media query to overrule the boxes floating side-by-side at a certain width since the screen size will become too narrow for them to comfortably sit side-by-side. Instead, the image and text boxes will have to instead stack.
4. Continuing with our examination of that image alongside the text: is this a one-time layout, or will it need to be templated so that all your blog posts, or pages, or a even just a select few pages can have the identical layout. If it’s a one-time thing, do you want to add a custom template to your Thesis website, or will you decide to code it with <divs> and floats?
5. In the design sample we looked at, there is a podcast: Think about the best way to add the podcast with your client’s technical expertise in mind. What tool do they use to create podcasts? If the podcast is an mp3, do you want to use WordPress’s audio tool to insert the podcast? Or you want to use a plugin? Or do you need to link to another podcasting service entirely? How do you want people to subscribe to that podcast, and have you included a form or links to subscribe below each post?
6. Is there just an except of each single blog post on the full blog page, or will you add the full blog post? If it’s the former, what will the Read More button look like?
7. If you have forms with side-by-side form fields, how will you lay out these fields when the screen size becomes too narrow for everything to sit side-by-side. Will you instead stack the form fields?
8. If you have a big header image with text in it, will you (a) include the text in the image, or will you treat the image as a background image and layer the text on top of it.
- If it’s (a), when the image gets scaled down to fit inside a mobile device, will the text still be readable? Will you hide that image with a media query and show another one that is more readable on smaller devices?
- If it’s (b), perhaps you could use a slideshow with captions, so the image is the slide, and the text is the caption. What responsive slideshow plugin will you use?
9. What will your mobile menu look like when the screen size gets smaller? Where will it be located on the page? Will it be a small icon, or will it be a bar spanning the entire width of the screen at the very top of the page? Will it sit above, below, or beside your logo?
10. If you have a logo, a menu, and a social media icon menu at the top of your site, how will these be laid out on smaller ipad and iphone devices? Will they stack? Will you hide the social media icons at a certain screen width using a media query?
This is just a glimpse of how you might work your way around your website designs, to break them down into a jigsaw of HTML boxes (and/or divs), to think about smaller and larger screen sizes, and how everything will fit and flow into the new screen dimensions.
Don’t be afraid to ask a web designer to run any other proofs by you, before they share them with the client, so you can ask questions and work out the best way to do things, before the client gets attached to an idea that’s not doable.
In closing, I like the comment from this article:
“If you’ve done any site development in your career, then you know the process at this point starts to include all elements from above, which means the design can’t be done on it’s own – usually compromises have to be made; Sometimes a block of text doesn’t fit a container, the order of the elements doesn’t feel right, images don’t properly (or effectively) convey the message, etc.”
Hence the need to (a) work with the designer during the design process and (b) have a designer who is willing to compromise, especially when they don’t think about responsive design and how it works!