LuxDeco

Date worked: Saturday, June 1, 2013

Tags: Archived,Magento,HTML,Sass,Responsive,jQuery,Magento,Freelance

Website link: LuxDeco

Initially I was asked to help finish development of their new Magento desktop website re-design as well as implement new features & functionality. I was then tasked with developing the mobile website, which runs under m.luxdeco.com. For the new desktop site I corrected media-queries that they had in place for wide & narrow screens. This allowed product listing pages to make use of more screen space for their users with larger screens, Google Analytics provided user screen data. We also ensured other areas of the site made use of the large available space, the home page for example. Magento templates were optimised & cleaned up too to ensure the browser has less to process on the front-end. During the development I optimised their CSS and HTML; introducing CSS3 & HTML5 where possible , ensuring visitors with older browsers were supported too. Hand coded JavaScript & jQuery was used to create some small animations & features on the site too. Nothing too in-depth for JavaScrip though. WordPress integration was optimised with the use of a Magento plugin allowing products to be bought in to WordPress pages. WordPress was also optimised for smaller screens when visited form mobiles and tablets.

Mobile specific: I created a lean custom responsive grid, http://www.scriptedpixels.co.uk/playground/basicresponsivegrid, for the responsive mobile site. This allowed the site to fill all the different sizes of the mobile phones as well as allowing the site to grow eventually in to a full responsive site in the future. I implemented CSS animations where possible; mainly for the main menu & cart off-page slider menus. This allowed important information to be available at all times for their visitors as well as proving a slick & clean experience that reflects the brand. The fallback for this allows the menu to snap in to place rather than animate in. HTML radio buttons were used to created the animated sub-menu's in the main menu, keeping jQuery to a minimum