Retrofitting an Existing Site to a Responsive Mobile Design
- Choosing a Proper Layout for Mobile
- Working with Components
- Considerations When Going Mobile
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
When starting the conversion process, I work through three basic areas. I start by creating a block-level layout of my current design, then I work on handling each component, and finally, I work on adding and fine-tuning features to make the mobile experience more enjoyable, easy to use, and more native.
You will need to determine your layout while you work through the existing design. A responsive design layout gives you a fluid and flexible site, whereas an adaptive approach helps you ease into the fluid process by giving you some elements of pixel-perfect layouts while exposing your design to media query–based control. You might also end up with a hybrid layout that uses elements of both responsive and adaptive design.
Choosing a Proper Layout for Mobile
Most sites that are in need of conversion to mobile devices have been designed to fit somewhere between 960px and 1140px in width. With the iPhone 5 currently having a maximum visible resolution of 320x568px when viewed in portrait orientation and 568x320px when viewed in landscape orientation, you need to make many decisions and choices. Note also that these dimensions are the ones visible by dividing the actual number of pixels by the pixel density ratio (Retina screens have a ratio of 2, so 640x1136 becomes 320x568).
Block-Level Layout
You have many ways to begin the process of creating a design: You can break out the sketchbook and pencil, the prototype stencils, or any number of drag-and-drop applications. However, the method I lean on when working on retrofitting is the standard block-level layout.
If you are unfamiliar with block-level layout, the easiest thing to do is to look for the seams in your site. As a starting point to help you identify the blocks, you can use the following list:
- Header
- Side navigation or bar
- Content area
- Footer
To see this in action, Figure 8.1 shows a site with an overlay of how I would break down a site into blocks.
)
Figure 8.1 By grouping the site into content blocks, you can easily see the important areas of your site.
With the page broken down into blocks, you can get an idea of the content that each block contains, including components such as search areas, navigation, and widgets. This is helpful because it enables you to work on breaking down the site into smaller pieces and rearranging content to fit. Figure 8.2 demonstrates how the blocks are changed to show the page arranged to fit on a smaller screen.
){kind=link}
Figure 8.2 By rearranging the content blocks, you can visually see how the site will adapt for different screens. Note that some areas might change in size.
Even though all sections are visible, not all of them are actual size. You will need to change them based on the amount of content you have and how you decide to present them. It is also important to note that you will still need to work with the “fold.” Mobile devices can make dealing with the fold complicated because you will have no way to reliably handle where the fold is exactly. If you have an analytics page on your site (Google Analytics, Adobe Omniture, or similar service), you should be able to get a list of device resolutions and construct a suitable landing experience for most of your users.
You can use various methods to create your layout. You can even get creative with bits of paper by cutting them out at the size you want and writing the name of the component in them. The point of using the block-level layout is to see how the page is going to flow and react based on the screen of the device viewing your site.
Now that you have a rough layout, it is time to decide whether you will be embracing a responsive layout or an adaptive one.
Responsive Layout
You know that using a responsive layout means that everything needs to be fluid and flowing and that it will use as much available space as it can get its pixel-loving virtual hands on.
This type of layout has little to no waste of screen real estate, but it also generally has enough whitespace to calm the mind and keep users from feeling forced into a cave so that they start breathing into a paper bag before claustrophobia sets in and they ultimately smash the Close Tab button on their browser and head for open spaces.
Choosing to roll with a responsive layout means that you now need to think about the following:
- Flexible percentage or em-based layout, with gutters that change based on screen width
- Text that might break in odd places
- Images that need to be swapped out or allowed to scale
- Acceptance of a design that is no longer pixel perfect
Figure 8.3 demonstrates how a site could transition from a small screen up to a larger one.
)
Figure 8.3 The content and image areas remain edge to edge as the transition is made to larger screens.
Embracing a fully responsive solution is difficult and requires serious planning and dedication for the design, user experience, and user interaction teams. Note that, in this design, CTA means call to action. These are areas of the design that draw users into clicking or tapping to see more information or lead them to a specific section of the site.
Adaptive Layout
Approaching your design with an adaptive layout can help others get used to the idea of using a design that changes depending on screen size and also gives some control back to your design. This is because of the locked-width flow of adaptive web design.
Whereas a responsive layout is a maximized experience, an adaptive layout gives you the capability to be pixel perfect. With each breakpoint, you set a maximum width for your content area and then use margins that grow until the next breakpoint is matched.
Figure 8.4 demonstrates how an adaptive layout transitions between sizes.
)
Figure 8.4 The design starts edge to edge (top left), but margins grow as the screen viewing the site increases in size (top right) until the next breakpoint is reached and the process starts over (bottom).
If you are a pixel-perfect designer, this method might work best because it will be more compatible with your existing flow and will feel like you are building mock-ups of the same site in different sizes.
No matter what layout you decide to use, you need to determine a method for handling all the components that are contained in each of the blocks of your site.