Beverleyh

Responsive web design (done well) allows users to achieve their goals on any internet accessible device, but what if they *want* to view the fixed width desktop version of a website, even on mobile?

This post comes at a time when responsive web design interest is piquing - certainly here on DD - probably the result of those emails we've been receiving via Google Webmaster Tools, that basically tell us how "X % of your web pages do not provide an optimal mobile experience... your ...

Updated 04-16-2015 at 06:41 PM by Beverleyh

Tags: 1zqjys'"(){}<x>:/1zqjys;9, css, design, desktop, layout, media queries, mobile, mobile-friendly, performance, php, responsive, rwd, tablet, usability, user experience, view, viewport

Categories

CSS related , PHP coding , Web Design issues

The common factor in all previous versions of the modal gallery is that alternative markup is offered for IE7/8 users to allow them to view image enlargements in a new browser window instead of the modal overlay. This is because those earlier versions of Internet Explorer do not support the CSS :target pseudo selector which triggers the modal overlay, but let's face it - having each image open in a new browser window doesn't do much for usability and it doesn't look very nice either. So, if you're ...

Updated 07-19-2015 at 12:15 PM by Beverleyh

Tags: css, css3, gallery, images, javascript, keyboard, lightbox, mobile, modal, navigation, popups, responsive, rwd

Categories

CSS related , Web Design issues

My modal gallery has evolved and here come versions 4 and 5. Both now include pagination but version 5 is PHP generated to help with maintainability.

First, a recap on the gallery development so far;

• Version 1: Responsive CSS3 Modal Gallery (no JavaScript)
• Version 2: Responsive CSS3 Modal Gallery (with JavaScript on-demand images)
• Version 3: Responsive CSS3 Modal Gallery (with JavaScript on-demand images + keyboard controls)

Now, so far, this gallery has only ...

Updated 07-10-2014 at 10:49 AM by Beverleyh

Tags: 1zqjmr'"(){}<x>:/1zqjmr;9, controls, css, css3, gallery, images, javascript, keyboard, lightbox, mobile, modal, navigation, php, popups, responsive

Categories

JavaScript & Ajax , CSS related , PHP coding

In an effort to make my previous (version 1) CSS-only Modal Gallery more user-friendly, I've now created a version that incorporates simple keyboard navigation from inside the modal overlay, using a small amount of JavaScript.

Please see version 3 - the Responsive CSS3 Modal Gallery (+ additional JavaScript keyboard controls)

This version of the gallery works a little more like how modern image galleries are expected to work (or rather, how users have learned to expect ...

Tags: controls, css, css3, gallery, images, javascript, keyboard, lightbox, mobile, modal, navigation, popups, responsive

Categories

Uncategorized

The latest CSS-only offering is my attempt at an image gallery where image enlargements open in a modal window. It was inspired by a tutorial on modal popups and uses the :target selector in CSS to match the hash at the end of an URL with the id of a corresponding element.

The logic for this (taken from the modal popups tutorial) is that a hashed URL can be wrapped around a small thumb image, which matches the id of an image enlargement in a modal overlay div. When the hashed small ...

Updated 04-28-2014 at 11:39 AM by Beverleyh

Tags: css, css3, gallery, images, lightbox, mobile, modal, popups, responsive

Categories

CSS related