If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

All Blog Entries

Images can be tricky to deal with in a responsive environment; by nature they are a 'static' element with specific dimensions, so how can we manipulate them into working with our lovely fluid/flexible web layouts? Thankfully there are a few techniques, and this post rounds up my top 3.

Please note, this article mostly covers visual resizing in a web browser, and not any "true" responsive image techniques, i.e. serving different images to different screen sizes. These are
...

In the old days, many designers used frames within framesets to present documents in multiple views. This allowed them to modify the menu for the whole site by just updating the page in the navigation frame. And visitors could go from one (content) page to another without causing a page (re)load in the navigation frame (or another frame).

Framesets were abandoned when people started to realize that their benefits didn't outweight their numerous problems and that other ways of updating
...

It is surprisingly easy to create iframes that go on top of windowed elements (Flash, select boxes etc.):

Code:

<iframe name="ifr" style="position:relative; z-index:10000; background: white" onload="frames['ifr'].document.body.innerHTML='This is an iframe that overlays windowed elements if the zindex is high enough'"></iframe>

The onload-part will cause the text to overlay any windowed element if the zindex is high enough (except in Safari). Position:
...

The earlier version of this menu utilises the same checkbox hack and "off-canvass" pattern in desktop view as it does in mobile - apart from being always-visible on a large screen, it looks and works the same, regardless of what device is accessing it (modern browsers and IE9+).

Thanks to the increasing popularity of touch devices, where tappable/clickable triggers now seem more favourable than hover actions, this has the benefit of consistency. Minus the initial trigger
...