New Mammaw’s Website with Fluid Design
Friday, March 25th, 2011

Mammaw’s Sweet Shoppe in Lafayette, IN has been a client of our for a few years and were ready for a redesign. The owner sent a picture of a wedding cake to use as inspiration for the new design. The problem with wedding cakes is they are tall so we came up with a design that would utilize the picture on the entire left side of the site.
Before I continue… If you are looking for wedding cakes in Lafayette, IN you need to contact Mammaw’s. I can tell you from first hand experience their butter pecan flavored cake is a huge hit at a wedding!
Back on track… The image on the left initially made things difficult to get everything to fit on smaller screens but with some creative CSS we came up with a solution that would change the design based on the users resolution. The site will actually appear in three different layouts as you can see from the image below.

Design A will be seen when the browser is at least 950px wide, if the resolution is smaller than that it moves on to design B. Design B simply eliminates the wedding cake and moves the menu to the left. If the screen is even smaller (mobile phone) it will convert to design C moving the menu and logo above the content as well as collapsing any sub-menus on the page. When the sub-menus are collapsed we use jQuery to add some JavaScript to them so the user can click to expand on them.
The only bad part of this setup is it doesn’t work in Internet Explorer 8 or below but it does work in the other browsers such as Firefox, Chrome and Safari.
If you or anyone you know needs professional web design services, please contact us about your upcoming project!



