The post TechHub Demo Night appeared first on Steve Tyler.

The post Intro to Ember talk – Creating a basic Twitter app appeared first on Steve Tyler.

The post PC vs Mac Keyboard Shortcuts appeared first on Steve Tyler.

Brief

Their previous site was hard to navigate and the images were small and lacked optimization. The requirements for the new site included the following :

• Bespoke design
• Easy to navigate
• Display over a hundred project images

I initially created some mock-ups to improve my Photoshop skills which they liked, but I felt were too formulaic. A graphic designer friend Adam Mitchinson happened to be available and I commissioned him to produce 4 homepage ideas. Fringe have a great portfolio of images and the following design was chosen for the use of full screen display and simple navigation (Fig 1).

Fig 1 – initial homepage design

A new requirement arose in that the client wanted the site to differentiate between the two sides of the business, as the old site had caused confusion in the past. This turned out to be the key issue and without it the new site might not be needed they felt. After sketching some ideas and trying to keep things as simple as possible, I thought of having a separate menu for Furniture & Interior Design which we all agreed on.

Responsive Template

I’d always wanted to make the site responsive (one that gives an optimal viewing experience on different devices) and knew the simple layout would work well on mobile and tablet devices. Starting the new project was quite daunting but Initializr, which is based on the HTML5 Boilerplate Framework, gave a great starting point to build on (Fig 2).

Fig 2 – initializr.com

The responsive template gives a basic design instead of a blank page and includes the following :

• Mobile first responsive CSS template
• Normalize.css
• Modernizr.js
• Google Analytics script
• Optional humans.txt, robots.txt, .htaccess

Progressive enhancement is a Responsive Web Design concept where basic content and functionality should be accessible to all web browsers and the site is enhanced for larger platforms. Therefore using the mobile first CSS template made designing the site a lot easier.

Normalize.css, is a way of preserving browser default stylings as opposed to resetting everything using a reset.css file. It also corrects some common bugs that are out of scope for reset.css like display settings for HTML5 elements.

Modernizr.js, a JavaScript library to detect new HTML5 & CSS3 features which I used for the following:

• Media Queries (can use respond.js or create separate stylesheet for IE < 9)
• CSS transitions (IE < 10)
• @font-face for Open Sans Google webfont
• Rem units
• Calc CSS3 property to calculate widths of bullets

The Google Analytics script is an inline script included at the bottom of the index.html file which I used to track the site for SEO purposes. The other optional files can be used to provide additional information about the site, restrict access to web crawlers and change access to web server directories.

Navigation

The site would essentially be a responsive dropdown menu and an image slider plugin, discussed later. The Initializr template navigation wasn’t suitable and I found this excellent tutorial on Tuts Plus.

Fig 3 – responsive navigation tutorial

In the mobile view, the dropdown navigation would be placed underneath the main image, so as not to obscure it when expanded. The order of the HTML content would therefore need to be changed and considered the following CSS display properties:

• display: table-header-group & table-footer-group
• display: flex
• display: absolute

Using display: table-header-group would mean using tables for layout which is not best practise and flexbox wasn’t properly supported, so I opted for absolute positioning.

Fig 4 – dropdown navigation using hsla

The dropdown menu would need to be semi transparent as above and was achieved using the hsla CSS property. Rgba could also have been used, but hsla made creating color variations on the fly a lot easier and makes more intuitive sense. Increasing the second value will increase the saturation of the color and decreasing the third value will decrease the lightness.

nav li ul {
  background-color: rgb(0, 192, 181); /* fallback value */
  background-color: hsla(177, 100%, 38%, 0.6);
}

To animate the dropdown menu I initially used the hoverIntent.js jQuery plugin, but this caused issues when changing orientation on iOS. CSS transitions where a much better option as they could be controlled using media queries. Adding a delay to the transition on hover mimics the hoverIntent plugin and prevents the menu from showing inadvertently.

.example {
  transition: [property] [duration] [timing-function] [delay];
}

nav li.navA ul, nav li.navB ul, nav li.navC ul {
  top: 0; 
  transition: top 350ms ease-in;
} 
    
nav li.navA:hover ul, nav li.navB:hover ul, nav li.navC:hover ul { 
  top: 100%;
  transition: top 350ms ease-out 350ms;
}

Image Slider Plugin

The site would need to show over 100 different project images, so an image slider plugin would be necessary as I didn’t have the time or experience to create my own.

Fig 5 – royalslider.com

I’d read in Net Magazine about the Royal Slider plugin and felt it was perfect because of these features:

• Modular, so only features that you need are included improving performance
• Touch friendly for iPad / tablets
• Responsive to mobile
• Good knowledge base & support
• Auto image scaling options, necessary for full screen images on varying display sizes

I wanted the images to be vertically centred and used the slider fill mode. Being a responsive site however, the height of the image would first need to be determined as it would vary for differing viewport widths. I wrote a jQuery function to determine the viewport height and then assign the image height and widths to the slider configuration object. The image would also need to be centred when the browser was resized and I created a resizeWin function that was triggered on either the resize or orientationchange events.

Responsive Images

One of the challenges of having full screen images was how to optimize them for different resolutions. Loading a 1900px image for a mobile device that can only show 640px is a waste of bandwidth and would cause it to crash in most cases. I created three copies of every project image with the following sizes:

Fig 6 – image size comparison

Initially I created them all manually in Photoshop which lead to RSI problems I mentioned in my previous post. When a new set of images needed to be added, I looked for a way to automate the process.

Fig 7 – gruntjs.com

I use Twitter and go to a lot of meetup groups to keep to up to date with the latest technologies and heard about the Grunt Responsive Images plugin. It took a while to setup, but once configured it created all the files (about 300) in about 10 minutes. Before when I’d used Photoshop manually, it had taken over a day so quite a time saving!

In order to load the different image sizes based on the viewport width, I used a responsive image script. The small image is loaded by default and the script changes the src url to either the medium or large image determined by the viewport width specified in the CSS media query.

<img class="rsImg" src="/bath1-sml.jpg" data-medium="/bath1-med.jpg" 
data-large="/bath1-lrg.jpg" />

body:after { /* media query script */
    visibility: hidden; 
    content: 'tablet';
}

The downside of the script is that the small image is always loaded, so an extra HTTP request is sent per image where the viewport is greater than 640px wide. The <picture> and <srcset> elements will be a better way serving responsive image in future once the spec has been finalised.

Browser Testing & Future Improvements

I developed the site in Windows XP and tested the site back to IE7 using Multiple IE’s which installs IE 6-8. IE 9 and above are not supported on XP and I used a separate partition with Windows 7 and IE 9 & 10. For Apple support I used a newly purchased Mac Mini, a first gen iPad and iPhone 4.

For my first main project I’m very happy with it and the client was pleased and managed to incorporate all the changes he wanted. A few improvements I would like to make in future:

• Convert CSS into SASS
• Use <srcset> instead of responsive image script
• Improve JavaScript code by creating a namespace object to remove global variables

The site is hosted on Github as a private repo due to licensing restrictions of the slider plugin.

fringefurniture.co.uk

The post Project Review – Fringe Furniture appeared first on Steve Tyler.

Wrist Bend & Flex Exercise

Wrist Bend

Wrist Extend

• Stretch your arm out keeping it locked
• Use your other hand to bend / extend your wrist, keeping it relaxed
• Hold for 10 and repeat 3 times for both sides

These exercises have helped a lot and I do them at the end of the day or if I feel any tension in my hand or wrist.

Mouse Size

My mouse was too small causing  me to grip the sides which produced tension in my thumb and little finger. I now use a Magic Trackpad, having purchased a Mac recently and that too has helped. Windows functionality is very limited for PCs however, and may purchase a Logitech Trackman in future. They take a while getting used to, but remove any tension caused by gripping the mouse.

The post Relieving Repetitive Strain Injury appeared first on Steve Tyler.