'Lato:400,300'

Site Redesign

After 7 months of design, development and a lot of testing, we are extremely excited to launch the new look of the gawkerverse. We are starting out with foodgawker and rolling out the new design to the other sites in the next few days. The redesign adds some new features and a little more polish to the sites. It’s also a responsive web design, which means the layout adapts and optimizes to  whatever device (mobile, tablet, desktop, etc.) you use.

Responsive Web Design

We are going to follow-up this post over the next few weeks and give more detailed descriptions and tips on using the new and old functionality, but we want to highlight a few now.

Hover Bars

The first new feature is the hover bars on the photo cards (desktop browsers only).

Photo Card

The title is shown and you can now share the post via Pinterest, Facebook, Twitter, etc., by hovering over the photo. We also added a magnifying glass icon for easier access to the post permalink page to see categorization and tags.

Customize

The customize feature allows you to tailor and save pages to your tastes and preferences. Custom pages are essentially saved searches without the need to enter a search term. Here are few examples of custom pages we created…

* Healthy, fruits and veggies <- vegan, fruit and vegetables excluding desserts

* Asian food <- posts from select bloggers who cook mainly Asian dishes

* Desserts, no vegan/gluten free <- desserts excluding vegan and gluten free

Pagination

We cleaned up and simplified pagination. Now you can enter the page number, hit the return/go key on your keyboard and go directly to the page you want.

Pagination

Mobile

The responsive web design impacts mobile the most. You’ll see the desktop ads disappear, the navigation collapse, the footer minimize and the photo cards reduce to mini-cards. The layout out should work well whether it’s iOS, Android, Windows Phone or any other modern mobile platform.

Mobile Mini Card

On mobile, you’ll need to go to the post permalink page (tap on the magnifying glass) to view a larger image, categorization, tags and to share via Pinterest, Facebook, Twitter and more.

You may notice the page numbers only change with every other page load. The page numbers match the desktop site page numbering, but we are splitting the desktop page (46 posts) into 2 pages (24 and 22 posts) on mobile. This reduces the length of scrolling and page weight on mobile for faster loading.

Other Changes

Match by keywords in search - when we launched advanced search, we implemented phrase matching to get better results on search terms, but we realized that it was too restrictive. Now a search for chocolate cake will return all results that have the terms chocolate and cake anywhere in the post title, description or tags. If you want to match exactly by phrase, just add quotes around your search terms, e.g. “chocolate cake”.

Fixed favorites sidebar bug - if your username had a space, period or any other odd character in it, the favorites page wouldn’t show the categories or your tags in the sidebar. This has been fixed.

Search Bar

Thank You

I’d like to thank Maria, our designer, for coming up with a great look and feel. I’d also like to thank Sandy Sage and the Crowd Favorite team for developing and implementing the responsive design. I believe everyone is tired of my nitpicking and pixel pushing of the design and code. Thanks to the all the gawkerverse team members who helped out in user testing. It took us awhile to get the redesign launched, but I’m very happy with the results.

Enhancements

Even though we have launched the redesign, there are more refinements we want to make and will do so in the upcoming weeks and months.

Between the gawkerverse and the Crowd Favorite teams, we have tested the new design on 10+ browsers and a few dozen devices. We weren’t able to test across all mobile devices as there are just too many smartphones out there. So, if you see any issues or just have feedback, please drop us a note via our contact form.

We hope you enjoy the new design!

-Chuck

9 notes
  1. diablo9600-blog-blog reblogged this from gawkerverse
  2. bakelistbake-blog reblogged this from gawkerverse and added:
    #foodrenovation
  3. gawkerverse posted this