Showcasing ExpressionEngine websites from all over the web
The Sweet Wishes website offers an assortment of delicious cupcake treats that are sure to make your mouth water. Allow your senses to take over while navigating through over 21 different flavors of freshly baked cupcakes. What sets Sweet Wishes apart is “that little something extra.”
The site was built with the cupcake lover in mind. The overall design was created to allow the user to engulf themselves in a world of cupcakes and mimic the feeling of being at a bakery. The bold and vibrant colors of the cupcakes allow you to really get excited about picking from one of the 21 plus uniquely designed and crafted flavors. The site even allows the cupcake craver to customize their site experience by clicking on the cupcake flavor picker, which allows them to have the flavors and colors dynamically carry over to all sub pages. This allows the site experience to truly be personal and unique.
From specialty orders and even all natural pup and kitty cakes for your pet, there is a sense of caring and dedication to the customer that we wanted to carry onto the site. The site incorporates classic bakery items into the design from the traditional fringe, to the recipe news area inspired ingredient cards, to the cupcakes on the baking pan. All of these subtleties will really connect to the user and make the experience bold, simple and user friendly. The website stays away from the typical overwhelming clutter of other bakery and cupcake sites and sends users to the core of why you should be here…to enjoy cupcakes while quickly and efficiently getting the information you want.
Apart from what makes the site looks, we had our work cut out for us making our sweet vision, work perfectly in EE. We wanted the content to be quickly visible and worked hard to make the navigation and content structure not take over the site.
There are four channels for the site. Menu Items, Menu Prices, News, Pages and Specialties.
The Menu Prices channel has custom fields for the name and price of a single unit and the name and price for multiple units. In the Menu Items channel there is a relationship field that relates the menu item to its price, so if the prices change in the future, they will only have to be changed in one entry and the change will be reflected across the entire site.
Menu items are assigned to categories. The categories are used to create an overview page of the menu and used to create a drop-down menu in the main nav. The category image is large and used on the Menu overview page while ED Imageresizer is used to resize the category image on the fly for the drop-down menu.
The Pages and Specialties channels use the same custom field group and are used for the site’s static pages. The only difference is a file upload field is hidden on the Publish Layout of the Pages channel and left available for the Specialties channel. The file upload field is used exactly like the category image for Menu categories—a large image is uploaded and used for the Specialties overview page and then ED Imageresizer is used to resize the image for the drop-down menu.
There are custom fields for Pages and Specialties for the large text on each page: one for a headline and one for a subheading. Conditional variables are used to determine if the large headline should go all the way across the page or float a headline left with a subheading on the right, so the client can update headings and change the appearance of a page without getting bogged down in HTML.
All large text areas on the site use Wygwam. It is locked down so the client doesn’t get a full-on WYSIWYG editor. It is basically used to hide HTML from the client and allow them to easily add bold and italic text, lists and links. If anything is pasted in the field, it is also automatically stripped of any formatting so no Microsoft Word nastiness is added to the code.
There is a single image field for the static section that also uses ED Imageresizer so the client doesn’t have to worry about what size photo they are adding. If it is too large, it will be resized when the template loads.
A simple FreeForm is used to capture e-mail address for the mailing list. Fonts are served by TypeKit.
EE2 ED Image Resizer
Company: Rockit Science Agency