Superfried website image 1
Superfried website image 2
Superfried website image 3
Superfried website image 4
Superfried website image 5
Superfried website image 6
Superfried website image 7
Superfried website image 8
Superfried website image 9
Superfried website image 10
Superfried website image 11

Superfried

New website/ adaptive/ retina ready

Superfried are five years old this year, which provided the perfect excuse to completely re-develop our website.

It was vital that the new site was future proof and user friendly. To achieve this it was essential to consider the current and imminent technology, such as smart phones and retina displays. Adaptivity across all platforms was achieved using a grid system in conjunction with the popular and powerful masonry script. The grid would now adjust from five columns down to two for mobile devices.

Simple navigation was ensured at all times by fixing the header on desktop machines. For portables this is deactivated to maximise screen space. Excessive scrolling, which is particularly significant on mobile sites, was reduced by employing retro 'go to top' anchors.

To cater for retina displays all artwork was prepared at actual and 2x scale, although hi-res images will slow down 3G connections dramatically. With this in mind the intention was to detect if the user is on a wifi or 3G connection before automatically activating the system, however a simple, satisfactory method could not be found. Since 3G is now used for laptops and mobile devices, reluctantly it was decided that activating the retina system manually would be the safest option.

For touch screen devices, since rollovers are not suitable, the site has been designed to only display the secondary rollover states. This not only ensures users know what they are selecting, but also greatly reduces download volume therefore increasing site efficiency on 3G. In addition, for small/ touch screens separate css styles were implemented to increase font sizes and space allocated for navigation to aid touch selection.


 
// Go to top