Our monthly Newsletter has been growing slow and steady over the last 6 months, with well over 50,000 readers. I noticed that over 20% of our dear readers were checking out the email in Mail for iOS, but the mobile version was a little broken, to say the least. Mobile readers, your day has finally come.
For our July edition, I'm working on some major rendering improvements for mobile, as well as some general fixes and improvements for both mobile and desktop mail clients. For starters, Dan kindly put together a new logo to match our existing "external" site style, and I'm working on improving the newsletter's usability by making the "unsubscribe" link more obvious and giving readers a way to send us a quick email with any thoughts or suggestions.
This is still a work in progress, of course, but we'll have it polished before our July edition hits the, uh, inboxes. If you're not already a subscriber, you should sign up here!
9 months ago
A very welcome update :)
Very nice! Looking forward to it :D
If this is for mobile, those fonts are way too small and a bit dark to read. I wish @Dribbble would embrace a flatter, more functional UI.
Glad to see updates for mobile though! :)
@Benny Schmidt How is that not flat?
@Benny Schmidt On a Retina screen, those fonts are plenty readable. Don't worry, I tested it! Plus, that's just the footer; the body font is 1-2px larger.
Since the newsletter is already just text on a white background, I'm not sure how much "flatter" we can go. Also not sure how flatter = more functional? Would love some specific examples. :)
@Samuel Fine Hmm, I think you are mistaken about a few things:
1. You don't (and shouldn't) make fonts manually responsive like you describe -- being already "vector", they can scale on their own just fine. If you mean that you're already doing it this way, then on this view (non-retina), they should still look appropriate because nothing has scaled them (because `device-pixel-ratio` is still 1.0). If it looks fine for retina, then they should appear huge here, not small. Also, I wouldn't underestimate the shittiness of DOM repaint performance with fonts on mobile, or those pesky 300ms+ `@import` round-trips either. :P
2. Aside from fonts, I think your understanding of retina displays is backwards. Retina requires that you scale assets "up" not "down" (e.g. if a raster image is 100px wide, you'd need to make it 200px wide for retina displays, in order to not lose quality. WebKit will scale that 100px "up" to 200px, and the pixel data would be rendered at effectively "double" the pixel data at the mercy of Safari's resize algorithms).
3. In general, what retina affects is raster pixels alone (note: I am not including Android's "pixel densities" here, only Apple's "retina") -- so even if you've written it responsively (as you implied), you should let Apple's meta tags handle `device-pixel-ratio` scaling for you (otherwise you're going to be dealing with `overflow` scrollbar woes).
4. I'm not sure how you plan to handle responsive media queries in HTML 3.2 (the only real supported doctype for HTML emails). Another reason to avoid CSS responsive styles in this case.
Regarding "flat = functional":
Gradients, rounded corners, some iconography, and textures have very little function outside of games; and in my personal opinion, they dilute the overall message of the design.
When I say flat, I mean that I (and others) prefer design language where the elements and nuances have a clear and defined role in the design (it's rare to see functional, flat UI design on Dribbble in general, but it exists!).
@Benny Schmidt looks flat to me. For someone who likes flat so much you don't seem to use it all that much in your work
@Neal Corbett Thanks for your comment. While a lot of "my work" is programming, I look forward to the day that most of the designers I work with realize that everything they make is not art.
This likely will not occur until people stop paying ridiculous salaries for kids who found 'Add Noise' in Photoshop.
I have nothing else to share in this thread. Obsolescence is around the corner!
@Benny Schmidt Apologies, but I can't really respond to all this. Many of your points are based on things I never said, or massive leaps to inaccurate conclusions - I never said anything about fonts responsive, for example, because we're not and I'm pretty sure that's not even a thing. (Cloud.typography's ScreenSmart fonts are the closest I can imagine.) The typeface you're seeing is Helvetica Neue, not a webfont, so @font-face and DOM repaints aren't an issue.
This isn't our first rodeo. ;) I'm just fixing padding/spacing issues, some awkward layouts, and some font sizing. The sort of Retina details you're discussing are completely outside the scope of what I'm working on. Plus, I've been working with mobile web (and native) apps for years. Don't worry, I got this. :)
@Samuel Fine You haven't had exposure to retina displays for that long because they didn't exist before 2010. Best of luck -- sorry if I offended you.
@Benny Schmidt please troll elsewhere
@Benny Schmidt How come you have such a strong opinion on flat, functional UI and rendering and all that other nonsense you're banging on about when your own website is nothing more than a 1000 x 1000 pixel PNG file showing an envelope which suggest 'email' - yet has no click-trough and doesn't even mention your email address.
Grow up mate.
@Samuel Fine - As always from the dribbble team, great work. Look forward to receiving the newsletter!
It seems like you're the one who's misunderstood the terms a bit. While the flat visual aesthetic often is used in functionalist design, it isn't the same thing.
It's fine that your "personal opinion" (will return to the irony of this) is that gradients, rounded corners, textures, and iconography dilute the overall message of design - but it's simply not true. All of these things have inherent usability-related features. The depth a gradient adds can make it easier for a user to understand that it's a clickable button because of the mental model the user constructs in his/her understanding of the design analogy.
Similarily rounded corners also add certain features to a user's perception of the element. (http://barlab.mgh.harvard.edu/papers/Curved2006.pdf)
I can only suggest you buy a book or two about design, before spreading your "personal opinion" as fact. "Lidwell, W., Holden, K., & Butler, J. (2003). Universal principles of design. Gloucester, Mass.: Rockport." - could be a good place to start.
This returns me to "I look forward to the day that most of the designers I work with realize that everything they make is not art." - you did get ONE thing right, while some design can be considered art, it is not the same thing. The design field is guided by theories and studies, and not half programmer / half designer's personal opinions.
And what about designed emails for notifications ?
Mailing design is a PITA. :P
I've used Campaign Monitor templates and those really help, but designing for mail is like going back to 1995.
I suspect this thread contains an excellent example of how to ensure you're never issued any Dribbble invites.
@lucas marinm It's on the list!
@Damian Vila Oh jeez, you're not kidding. Everything is tables and inline styles. Thankfully, since most desktop email clients ignore media queries, but iOS clients process them properly, it's pretty easy to make mobile improvements!
@Samuel Fine Exactly. Target mobile with MQ and keep the width between 320 (min) and 640 (max) and it'll be alright. :)
Oh! and tables, tables, tables (and transparent gif spacers!) :P
Somehow I missed the original announcement of the newsletter, but I'm signed up now! :)
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2014 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.