Responsive UI Pattern Spotlight: The Nommer

The Backstory

A common UI pattern used in eCommerce websites is the placement of the store categories horizontally across the main menu of the site. Usually, the product categories are one of the most important elements on the page because (since the goal of the site is usually to sell) they help shoppers find the products they want. This is considered “prime real estate” since its placement makes it more significant for SEO and catches the user’s eye with its prominence on the page. Although some stores have several parent product categories, usually fitting the categories wasn’t an issue because you could:

  1. Negotiate reorganization of structure with the client
  2. Design the menu to accommodate the number of categories and length of characters

A problem would arise, however, when a store had multiple varying product categories and there was no easy way of reorganizing the structure because it just didn’t make sense to do so. Unnecessarily forcing a category under another category negatively impacted SEO and usability. On top of that, responsive redesign was the norm so it wasn’t as easy to control what could be seen on a particular screen size. Best case scenario was making all the product categories fit horizontally on a laptop or tablet in landscape and then forcing the menu into a collapsed sandwich menu once the screen got just a tiny bit smaller. Honestly, that option sucked. So we needed to think of something better. Continue reading…

Designing for Multiple Devices

Designing For Multiple Devices

designing for multiple devicesAs technology changes, so must design techniques evolve to adapt to those changes. Today consumers shop on tvs, laptops, phones, tablets, and many other devices. If you are interested in incorporating a design that targets different devices, discover first what would work best for your business. Here are some options and concepts to consider:

Mobile / Content First

“Mobile / Content First” is the idea that a website’s content, layout, and design should be prepared for mobile devices and their specific content first. This prevents wasted bandwidth and screen space on loading functions and content that may not be pertinent to the mobile users’ goals. As the screen space and download speed increases, functions and elements are added in as user goals develop.   Continue reading…

Heat Mapping aids Mobile/Content-First Responsive Web Design

Responsive Heat Map Example

I love sitemaps. When properly done, a sitemap communicates how a user can access all the most important pages of your site. Site hierarchy is built on SEO data and categories are nicely organized into logical product groups. Mixed with a proper content audit, content pages are relevant, organized and written for your users. But something had been bothering me for a while.

Mobile First Till I Die

It didn’t work with a responsive mind set. With responsive web design we are taught to think mobile/content first. Mobile/content first is essential for responsive design because responsive design relies heavily on relevance and importance. Continue reading…