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.)

You can subscribe to new posts via email or RSS.