Developing responsive websites using the Awesome window manager

Responsive web design is a techinique for offering the optimal user experience across different browser devices without the overhead of separate "mobile" sites or native applications.

Whilst there are hundreds of browser plugins that can make it easier to test responsive websites by resizing your browser window, this can also be achieved with a scriptable window manager such as Awesome:

resize = function(width, height, text)
  return function(c)
    local w = capi.screen[c.screen].workarea
    local geo = c:geometry()

    awful.client.floating.set(c, true)
    -- Float before raising
    c:raise()
    naughty.notify({ text = text, timeout = 0.5 })

    c:geometry({
      x = geo.x,
      -- Constrain Y to workspace or it can start too high
      y = (w.y > geo["y"]) and w.y or geo["y"],
      width = width,
      -- Constrain height to workspace height
      height = (height > w.height) and w.height or height,
    })
  end
end

resize_reset = function (c)
  awful.client.floating.set(c, false)
end

clientkeys = awful.util.table.join(
  -- [..]
  awful.key({ modkey }, "1", resize( 460, 650, "Extra small")),
  awful.key({ modkey }, "2", resize( 780, 750, "Small")),
  awful.key({ modkey }, "3", resize(1024, 800, "Medium")),
  awful.key({ modkey }, "4", resize(1250, 850, "Large")),
  awful.key({ modkey }, "5", resize_reset)
)

Alt+{1,2,3,4} will then float and resize the current window to various common device sizes (mine are based on the Bootstrap 3 breakpoints) and Alt+5 will reset it.

Not being a plugin has many advantages: not only is it a browser-agnostic solution and one can use keyboard shortcuts not available to plugin developers, it also feels more aesthetically pleasing to solve a problem at the correct abstraction layer.

(Update 4th June 2014: We also now constrain the window height to the workspace height for widescreen monitors.)

Comments (3)

Stefan

I’d like to point out that Firefox (Iceweasel) has the ability to resize the content, but keep the browser window large. Just hit CTRL+SHIFT+M or click the 'responsive design mode' button in the dev tools. I prefer this method to resizing the browser window, but it’s obviously personal preference.

Dec. 16, 2013, 2:44 a.m. #
pavel

Also, similar functionality is provided for practically any WM using wmctl.

Dec. 16, 2013, 11:49 a.m. #
Ah, of course there would be a window-manager agnostic solution. I wonder if there is a generic "floating" property toggle though as it seems quite specific to tiling window managers.

Funnily, as i use wmii and have a little config to resize columns from the keyboard (https://github…), i did that most of the afternoon today, to test the screens i was working on in all possible sizes, and i doubt even a plugin would be more efficient. It's a great side-effect of tiling WMs.

Dec. 16, 2013, 11:32 p.m. #