Dealing with Responsive Websites - Clients

jacksn

Hi folks,

How does one best approach dealing with responsiveness of a website?

I work in print and recently moved into designing websites (WordPress, Drupal) - I have churned out a few over the past few months, nothing major using purchased and bootstrap themes.

Recently I've found trying to deal with clients and their responsive devices very very time consuming.

I would work on the site test in my devices, client would approve ask to go live then their friend takes a look in their device or screen and it's all different, same with next person etc.

I'm just wondering how do you set out from the start any expectations for the responsiveness of a website? Or how do you handle it? Do you factor in costs when quoting? Some way of dealing with the plethora of screens

Thanks

M.T.D

Start with a responsive theme is the quick answer. Trying to make a non-responsive theme responsive is usually more trouble than it is worth.
If you are creating your own theme, create it responsive right from concept, think about your break points and design for the small sizes first, especially as most sites now have more mobile visitors than desktop.
In general don't design for a particular device, as next week there will be a new device that is 3px wider, narrower, taller.....
For example (illustration only) if your site is 1000px wide with 4 columns, then break points at 250 and 500 might work for your design. Using max and min px widths and % window widths can make your site display as you intended on all sizes.
If you have a div with a fixed width it will probably break your design on at least one screen size.

andywozhere

While it is possible to start from scratch is is much easier to use a framework like Twitter Bootstrap or Foundation as a starting point. They'll take care of all the breakpoints etc allowing you to work on the design and functionality of the site. If you're not that comfortable coding yourself opting for a responsive theme will make life easier but you'll have less control over some aspects of the site. Expectation wise I think you'll have to assume that all clients will want their website to be responsive.

jacksn

thanks guys, I guess my question was more so how to deal with clients expectations from the get go surrounding this pickle?

i.e if I quote a "simple" website for €xxxx

Then their friends or customers use their different devices and it looks different, albeit slightly.. achieving perfection across almost all devices would increase the workflow considerably and costs increased too..

I think i will factor into contract that work is tested on a limited number of screens, iphone and samsung.. but client will never see that and will "assume" it looks perfect on all devices.

seamus

jacksn wrote: »

I think i will factor into contract that work is tested on a limited number of screens, iphone and samsung.. but client will never see that and will "assume" it looks perfect on all devices.

This is pretty much the way to go.
Specify that it will be tested on the top 3 browsers/devices in each category (desktop/tablet/phone), and that the finished product will not be identical on every device, but will be as far as is possible, consistent across them.

You can get stats from here to help in this:
http://gs.statcounter.com/

Explain to clients upfront that getting a site absolutely identical across all devices is next to impossible, but that it will look and work practically the same for 99% of devices.

Also remind them that very few people will be accessing their website from multiple devices, so won't even be aware that there's (e.g.) a 5px difference in alignment between Chrome and Safari.

Talisman

If you are thinking in pixels you are digging a hole for yourself. Pixel perfect is impossible across platforms unless every element is a vector.

If you want to create your own grid use 240 pixel width as your base. 240px is the screen width of the smallest smart phone, HTC Tattoo (240 x 320).

Other significant small screen sizes:

iPhone 5 (320x568) : 320px ~= 240 x 1.333
Galaxy S5 (360x640) : 360px = 240 x 1.5
iPhone 6 (375x667) : 375px ~= 240 x 1.56
Nexus 6 (412x732) : 400px ~= 240 x 1.667
iPhone 6+ (414x736)

Instead of using pixel sizes try to use CSS rem units. The CSS rem unit is the font size of the root html element (default 16px) so you can use it to scale your interface at different resolutions and simplify the entire responsive-design process for yourself.

10px : 0.625rem
12px : 0.75rem
14px : 0.875rem
16px : 1rem (base size)
18px : 1.125rem
20px : 1.25rem
24px : 1.5rem
30px : 1.875rem
32px : 2rem

You can also use the rem unit for CSS media queries:

@media (min-width: 15rem) {
    /* 15*16px = 240px */
}
@media (min-width: 20rem) {
    /* 20*16px = 320px */
}
@media (min-width: 25rem) {
    /* 25*16px = 400px */
}
@media (min-width: 30rem) {
    /* 30*16px = 480px */
}
@media (min-width: 40rem) {
    /* 40*16px = 640px */
}
@media (min-width: 60rem) {
    /* 60*16px = 960px */
}

There's a great article on the Smashing Magazine website that explains what you need to know about font sizing for responsive design. Using rem units in your styling helps in this regard because 1 rem unit is also 1 character!
Size Matters: Balancing Line Length And Font Size In Responsive Web Design

If you're using WordPress 4.4+ then you should take advantage of the custom featured image sizes feature to define your own image sizes. WordPress will automatically generate images of the specified sizes and make them available to the website visitor's browser. The browser will then choose the appropriate size image to download and display.

Here's some code that I used on a recent project where the client wanted to be able to display images up to 8K resolution (7680x4320) and down to the smallest phone screen.

add_theme_support( 'post-thumbnails' );

add_action( 'after_setup_theme', 'hioice_setup_thumbnails' );

function hioice_setup_thumbnails() {

  $image_sizes = array(
    '16_9' => array(
      '7680w' => array( 7680, 4320 ),
      '4096w' => array( 4096, 2304 ),
      '3840w' => array( 3840, 2160 ),
      '2560w' => array( 2560, 1440 ),
      '2048w' => array( 2048, 1152 ),
      '1920w' => array( 1920, 1080 ),
      '1600w' => array( 1600, 900 ),
      '1366w' => array( 1366, 768 ),
      '1280w' => array( 1280, 720 ),
      '1136w' => array( 1136, 640 ),
      '1024w' => array( 1024, 600 ),
      '854w' => array( 854, 480 ),
      '640w' => array( 640, 360 ),
      '480w' => array( 480, 272 ),
      '240w' => array( 240, 136 )
    ),
    '4_3' => array(
      '2048w_43' => array( 2048, 1536 ),
      '1600w_43' => array( 1600, 1200 ),
      '1400w_43' => array( 1400, 1050 ),
      '1280w_43' => array( 1280, 960 ),
      '1024w_43' => array( 1024, 768 ),
      '640w_43' => array( 640, 480 ),
      '480w_43' => array( 480, 360 ),
      '320w_43' => array( 320, 240 ),
      '240w_43' => array( 240, 180 )
    ),
    '1_5' => array(
      '600w_15' => array( 600, 400 ),
      '506w_15' => array( 506, 338 ),
      '412w_15' => array( 412, 275 ),
      '375w_15' => array( 375, 250 ),
      '360w_15' => array( 360, 240 ),
      '320w_15' => array( 320, 214 ),
      '240w_15' => array( 240, 160 )
    )
  );

  foreach ($image_sizes as $groups => $sizes) {
    foreach ($sizes as $key => $value) {
      add_image_size( $key, $value[0], $value[1] );
    }
  }

}

It results in a fortune of image files being generated when a new image is added to the media library but the end result will be an optimised frontend experience.