I was Front End Web Developer at Localist and my primary role was maintenance and creation of HTML5 and CSS3 code as well as front end design. I’ll highlight the Business Listing section work here.
Localist is a web app that wants to show you “What’s Good Around Here”. It’s major competitors are Yelp and Yellow. I’ve always believed in helping people find great businesses around them, so this was an opportunity I couldn’t pass up.
Business Listing – List a business
If you don’t find a business you can add one! Then that business can claim it later if they so choose. Details are received in this simple form with validation to keep all data consistent, and all biz listings are moderated for accuracy.
Business Listing
Each business listed on Localist has more or less control depending on the plan they pick. This business has chosen a full plan, this removes ads but also lets them customise the page backround and other colors. All business details are shortened with more/less links if they get too long, this keeps the layout tight. A user can comment on the business or find out any information available such as phone number and website url as well as a google map for directions.
Business Listing – Love a Business
Clicking the Love button takes you to this page where you can create a longer love/comment, add a picture and more. The map can be opened up to show more of the surrounding area, or left small to focus on the Love content. The user can choose to be notified when other posts are added to theirs. Using jQuery for the map.
Business Listing – Post Reply
Any registered user can comment on a business. We redesigned the business listings to emphasise this action and used mostly css for styling rather than images so the avatar and image used are the only page weight added. The Comment button has show/hide toggle (jQuery), and all buttons on the page have a helpful sprite to help describe what they do. Box rounding used liberally here to soften up the page, and a Related Content widget to show related posts, or related businesses if a biz has no posts. Love buttons are plentiful and red to encourage this as a primary action.
Business Listing – Posts Slider
The Shopping Cart has gone through quite a few evolutions, but the things that have stayed the same are they heavy use of the image sprite for icons and rounded corners on the products for clean display. Background-size: cover is used quite heavily here so all the images fit their containers well no matter what their size. I also created a starburst that can be dynamically generated if a product requires it.
Footer
Deep footers are all the rage but there’s a reason – it’s a clean way to present lots of searchable information without distracting from the main page content. Localist is location-based so all regions are represented with an eye on growth for the future. For example the Countries list is dynamically generated and a css red dot created on hover for each rather than a raster graphic. Show/hide toggle is used for the Localist Regions as well. A friendly Back to Top button helps the user return to the top, this is especially helpful on large pages.
Login Modal
There are several ways to login, using the top right login in the header bar, and also through the sign up screen if a registered user gets there accidentally. The modal itself is styled so it falls back well to older browsers and uses the css3 “placeholder” function to conserve space rather than having top-left labels.
My Localist User Dashboard
A user wants to know which businesses and people follow her. And she wants to update her profile to customise her experience. I grouped all this information and included onpage buttons to make these quick social and profile adjustments.
Shopping Cart Styling
The Shopping Cart has gone through quite a few evolutions, but the things that have stayed the same are they heavy use of the image sprite for icons and rounded corners on the products for clean display. Background-size: cover is used quite heavily here so all the images fit their containers well no matter what their size. I also created a starburst that can be dynamically generated if a product requires it.
