Posts tagged responsive web design

Site Redesign - June 2013

We spent over 6 months working on the latest redesign of the sites. There have been a lot of changes and iterations during the design and development process. Our primary goal was to make the site easier to use while providing you more control in fine tuning page results. We’ll spare you the gory details behind each design and implementation decision and just give you the highlights and benefits of the new design.

 

Infinite scrolling, pagination and sticky navigation bar

  • Introduced endless scrolling (down and up) on most devices and hybrid infinite scroll on some browsers (Safari)
  • Created a page counter so you know how many pages deep you’ve gone
  • Kept the ability to jump to any page in pagination
  • Implemented a sticky nav bar so there’s constant access to navigation, search, filters and pagination

image

 

Sort and filter any page

  • Added the ability to sort and filter every page of the site (homepage, search results, category, submitter galleries, etc.)
  • Allows the ability to search/exclude by keyword, filter by category or submitter separately or together in any combination
  • Searching and filtering is performed on the current results you are on, e.g. filtering the vegan category gallery
  • Changed the default sort order on your favorites page to “date added”

image

 

Borderless Cards

  • Transitioned to a borderless photo card with a larger 275x275 pixel image
  • Increased the size of the mobile photo card

 

Miscellaneous

  • Focused on making navigation, dropdown menus and buttons very touch friendly for mobile and tablet devices
  • Reduced page weight for faster page load by decreasing posts per page from 46 to 22

 

To our fantastic bloggers who submit, the larger, borderless cards requires a minimum image size of 275 x 275 pixels now in order to submit.

We spent a few hundred hours testing the new design on a few dozen devices. We believe we have caught and fixed most of the bugs, but with so many mobile devices in the wild and browsers used, we’re sure there’s an issue or two that we missed. If you see anything strange or broken, please let us know by dropping us a note via the contact form.

We’d like to thank our designer, Maria, and our development firm, Crowd Favorite, for their hard work in making the redesign possible. We hope you enjoy the new features of the site!

~

Update - Saturday, June 8th

If you are having issues using the site with older browsers, like Safari 5.x, we have a fix for these browsers that will be released on Monday, June 10th. Let us know if you are having issues on other browsers or devices.

~

Update - Monday, June 10th

We released a fix for Safari 5.x browsers this afternoon. If you are using an older versions of Safari (less than 6.0), there is no longer a persistent navigation bar and there is a “load more photos” button after 2 pages. If you want the full benefits of the redesign (infinite scroll, sticky nav bar), we recommend updating your browser to a newer version of Safari, Firefox or Chrome.

Upcoming projects

  • Launch redesign on other sites (craftgawker, stylegawker, dwellinggawker, weddinggawker)
  • Revise and improve the submission form
  • Release the iPad app
  • Update the iPhone app to reflect new design
  • Develop an Android app

 

Posted by: Chuck Lai

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