Tag Archives: Responsive Design

Bootstrap 4 alpha

Bootstrap 4 is on its way and may help Bootstrap remain the king of CSS frameworks.

 

There are a ton of major changes to Bootstrap and it’s impossible to cover them all in detail here, so here are some of our favorite highlights:

– Improved grid system

– Dropped wells, thumbnails, and panels for cards

– Brand new customization options

– Dropped IE8 support and moved to rem and em units

– Rewrote all our JavaScript plugins

– Improved documentation

Read about the details at Bootstrap Blog

The Hamburger Menu Doesn’t Work

With engagement down and confusion up, Facebook and others stop using hamburger menus

 

James Archer writes:

The hamburger menu is one of the more embarrassing design conventions of recent years, and it’s time to stop thinking of it as a default, unquestioned solution for mobile navigation.

Our team fell for it, too. We had reservations, of course, and talked through possible alternatives, but for about a year and a half it was the established industry convention for dealing with mobile navigation. Our clients were asking for it, everyone was talking about how great it was, and there wasn’t yet enough data to have clear answers one way or another. We launched a lot of sites that use hamburger menus. We did the best we could with what our industry knew at time.

However, the data’s in now. The hamburger menu doesn’t work well, and it’s time for everyone to move on. At this point, there aren’t many good excuses for using them in new site designs, and it very well may be worth revisiting older sites to see if they might perform better with an updated navigation structure.

Read more from the source: Deep Design

The technology behind preview photos

Facebook Developers explain how they include ~200 byte preview JPEG images in user profile JSON payload to speed up load times

 

Facebook profiles can be slow to download and display. This is especially true on low-connectivity or mobile networks, which often leave you staring at an empty gray box as you wait for images to download. This is a problem in developing markets such as India, where many people new to Facebook are primarily using 2G networks. Our engineering team took this on as a challenge: What could we design and build that would leave a much better first impression?

How a change in preview photos helped speed up profile and page loads by 30 percent.

Read more from the source: Facebook Code

Responsive email design

The lessons I’ve learned for designing emails that look good on every device

  • Campaign Monitor explains a lot of these ideas that I’ve discovered through my own email projects:
  • Outlook respects widths only for table, tr, and td elements.
  • Outlook handles padding only for td elements.
  • You can add css targeted to Outlook using this block: <!–[if mso]><style>…</style><![endif]–>
  • You can insert a <link> element to get custom Google Fonts; just be sure that you use an mso block to specify a fallback font for Outlook; otherwise it will fall back to Times New Roman.
  • You can shrink content widths and images for iPhone Mail using media queries.
  • Always use 6-character hex values for colors (not 3 characters).
  • Lotus notes and Blackberry are lost causes.
  • You’ll have to deal with a sub-optimal experience for Gmail for Android. It suffers from most of the limitations of web-based Gmail.
  • Use Litmus.com for testing emails!
  • It is complex but possible to send multi-column emails using <table align”…”>.
  • Always provide a sensible plain-text mime part; Outlook and others use this plain text to construct the first-line preview. If not, you’ll see <doctype html><head>…

Read the guide at campaignmonitor.com

Other helpful resources:

http://templates.mailchimp.com/development/css/client-specific-styles/ http://templates.mailchimp.com/development/css/reset-styles/ http://templates.mailchimp.com/development/css/outlook-conditional-css/