Developing responsive websites using the Awesome window manager

By Chris Lamb

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


Chris Lamb is a freelance software developer and the current Debian Project Leader. You can read other posts by me, see software I have written or read more about me. You can also follow me @lolamby.


Tags: Hacks

Planets: ALUG UWCS WUGLUG Debian

Sunday 15th December 2013


Three comments