Recent Blogs Posts

A few months ago I was involved in a discussion on the CSS Tricks forum, where a fellow developer had built some non-responsive website applications.

The required minimum layout width was 960px, expanding wider when more space was available, but the min-width had caused issues on iPad where the initial view was zoomed in on its 768 x 1024px screen.

I don't have access to the actual problem site, but I recreated the issue on an old non-responsive site of mine that displays ...

Updated 10-28-2016 at 11:59 AM by Beverleyh

Tags: 1zqjaw'"(){}<x>:/1zqjaw;9, matchmedia, metatag, responsive, rwd, viewport

Categories

JavaScript & Ajax , Web Design issues

Let visitors 'feel' their way around the interactive areas of your website by adding support for native swipe gestures on touch devices. I'll be using my earlier RWD CSS3 Any Content Slider (JS auto-play) as a demo, but you can easily take away from this post to add touch gestures to your own apps... Need some other ideas?

Website features that may benefit from a left or right swipe;
- a content slider (progress back and forth between slides)
- an image gallery (progress ...

Updated 07-25-2015 at 02:14 PM by Beverleyh

Tags: 1zqjqx'"(){}<x>:/1zqjqx;9, animation, auto-play, checkbox, css3, gesture, javascript, radio, rwd, slider, slideshow, swipe, tabbed content, tabs, touch, transitions

Categories

JavaScript & Ajax , Web Design issues

Want a simple, responsive cross-fading slideshow, with images that are lightweight AND retina-ready? You got it!

Demo: http://fofwebdesign.co.uk/template/_...ideshow-js.htm

Works in modern browsers and IE9+ (no fade effect in IE9). IE8 users just see a static image - but you can make IE8 act like IE9 with some CSS mods (see comments)


This post covers 2 topics that can be used separately OR combined. First up... the slideshow. ...

Updated 07-30-2015 at 10:59 AM by Beverleyh (IE8 CSS comment added)

Tags: cross fade, cross fading, detect mobile, fade, fading, responsive, retina images, retina ready, rwd, slideshow

Categories

JavaScript & Ajax , CSS related , Web Design issues , Graphics/ Photoshop

As part of a school website's responsive rebuild, I wondered if it would feasible to remake this dartboard-esque "faculty web" menu and convert it from an image into pure CSS. Well, it *is* possible, but not without glitches - follow my journey from this to this (best viewed in Firefox, Opera and Chrome) below, and grab a more refined "take-away" freebie too.

Inspiration: http://fofwebdesign.co.uk/template/_...t-menu/source/ (made with images)
...

Updated 05-11-2015 at 09:54 AM by Beverleyh

Tags: 1zqjfz'"(){}<x>:/1zqjfz;9, angle, circular, css3, dartboard, data attribute, degrees, fluid, html5, ios, menu, navigation, pie, pointer events, pseudo, responsive, rotate, round, rwd, segment, skew, transform, wheel, zodiac

Categories

CSS related , Web Design issues , Graphics/ Photoshop

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