Tuesday, June 23, 2015

Smashing Newsletter #139: Free Keynote Template and Fancy Pie Charts

Free Keynote templates, tools and eye candy. Issue #139 Tuesday, June 23rd 2013 181,055 readers View in the browser

The Smashing Email Newsletter

Dear Friends,

Finally: Smashing Book 5: "Real-Life Responsive Web Design" is ready: it's available for download, and it's being printed this very moment. If you've pre-ordered the book already, you should have received a download link to the eBook via email (if not, please drop us a quick email at help@smashingmagazine.com with your order ID and we'll sort it out!). Printed books will be shipped July 10th. Thank you for your kind support from the very bottom of our hearts.

Smashing Book 5: Now Finally Finished

You know this intoxicating moment when you feel that you've done something just right? Well, creating the book was quite a journey, and we're very sorry about the slight delay, but we do know for sure: the waiting will be worth it. In fact, we are very proud of the result, with a number of time-saving, practical techniques that you can apply to your real-life responsive websites right away.

The book is thick and smashing in every possible way — with 584 pages hardcover, chapters by Dan Mall, Zoe M. Gillenwater, Andrew Clarke, Sara Soueidan and John Allsopp among others, and cover design by Jessica Hische. If you don't have it yet, get it right away — we're pretty damn sure that you won't be disappointed.

— Vitaly (@smashingmag)


Table of Contents

1. Pie Charts With Conical Gradients in CSS
2. Efficient Icon Design Workflow
3. Free Keynote Templates: For Motion Graphics and Prototyping
4. Cleaning Up Unused CSS Selectors
5. Freebie: Do, A Comprehensive App UI Kit
6. One Icon A Day
7. CSS Debugging Tools
8. What Kind Of Person Are You?
9. Keep Calm And Attend A Smashing Workshop
10. Recent Articles On Smashing Magazine
11. New On Smashing Job Board
12. Smashing Highlights (From Our Archive)

1. Pie Charts With Conical Gradients in CSS

So how would you create a flexible pie chart without unnecessary dependencies, libraries and frameworks? That's the question that Lea Verou asked herself. Obviously you don't want to create a bitmap image — instead, you'd like to be able to adjust the pie chart easily with a few keystrokes in HTML. Well, we could generate and transform pseudo-elements but it would end up with verbose code which would be quite difficult to maintain.

Pie Charts With Conical Gradients in CSS

We could use SVG but a straightforward way of exporting the image from Illustrator would generate a plethora of mysterious paths and wouldn't be particularly easy to adjust once percentage values change. There is another way: applying stroke-dasharray property with a simple SVG circle. The simplest way, however, would be to use conical gradients in CSS, but they aren't supported just yet (and let's make sure they will be!), although a polyfill is already available. So we don't have to rely on patterns and libraries for pie charts — CSS is powerful enough to solve this problem, too. (vf)


2. Efficient Icon Design Workflow

Designing icons isn't easy, but even if you know your way around visual design tools, you might end up spending hours and hours adjusting, refining and preparing assets. Could you be more efficient than you already are? Perhaps. That's when learning how other designers work could come in handy.

Efficient Icon Design Workflow

If you're looking for a handy guide to take you step by step through icon creation, making full use of vector abilities, masking, and constructive solid geometry, then Marc Edwards is riding to your rescue. Efficient Icon Design Workflow covers many important details, from snapping settings and creating a custom toolbar, to styling and exporting in Illustrator, which should help all aspects of your workflow, from the production a single colour pictogram to a highly detailed app icon. You will also learn a thing or two about dimensions, settings and helpful yet hidden Illustrator tools. Worth reading! (cc)


3. Free Keynote Templates: For Motion Graphics and Prototyping

When it comes to design tools, we have pretty strict perceptions of which tool is the best fit for which purpose. However, sometimes it's the unexpected choices that produce great results. Have you ever considered the Mac Keynote app for motion graphics, for example? If this sounds like a weird choice to you, you might want to take a look at what UI designer Linda Dong created. She has recently released a short, animated motion graphics video made entirely with slide transitions in Keynote. And, well, the result is impressive — and available for free download, too.

Free Keynote Templates: For Motion Graphics and Prototyping

Another example that proves Keynote can be a solid tool to bring your ideas to life — let's say for testing or prototyping purposes — is Andrew Haskin's take on the well-known Google material design video which he recreated entirely in the Mac app. The Keynote file is available for free download, too. Two fascinating examples that remind us to think outside the box more often. (cm)


Advertisement
Ad


4. Cleaning Up Unused CSS Selectors

We know how it works: requirements change, layouts change, the codebase changes — what remains, however, is unused code, which has to be reviewed and refactored every now and again. CSS is as prone to this as any other piece of code. However, you don't need to do everything manually — going line by line, detecting unused code and cleaning up the style sheet. There are tools to help you (of course).

Cleaning Up Unused CSS Selectors

SymDiff, available for CSS preprocessors (Sass, LESS) and templating languages (HTML, Jade, Handlebars, JSX), reports any differences between the classes used in CSS and in your templates. Helium CSS scans a site and shows unused CSS, and so do UnCSS and Deadweight. You can also use Dust-Me Selectors Firefox plugin, Devtools ("Audit Present State") and other tools to keep your style sheets clean and neat. There's no longer any excuse to leave unused CSS in your style sheets — and it isn't that difficult to automate this little optimization into your workflow either! (vf)


5. Freebie: Do, A Comprehensive App UI Kit

Designing an app UI from scratch is a time-consuming process. To make it less tedious, the makers of the prototyping and collaboration platform InVision have put together a versatile, and free, UI kit: Do.

Freebie: Do, A Comprehensive App UI Kit

Do compiles 130 screens, 10 themes, and more than 250 components — all of them compatible with Photoshop and Sketch, remixable and Retina-ready. The kit's clean and colorful design and a wide variety of assets ranging from login screens to profiles, timelines, settings, and navigation, offer countless possibilities for any kind of app. Handy! (cm)


6. One Icon A Day

Do you have a creative challenge? A personal project, something you create for the sake of creating, to get your creative juices flowing, or just to relax after a hard day at work? Designer Marko Stupić has set himself a quite challenging — and inspiring — mission: to create one icon a day.

One Icon A Day

The result is a colorful portfolio of random tidbits: everyday objects, landscapes, food, animals, superheroes. Each icon reflects Marko's signature style, which can be quite bold, but also surprises with fine and delicate details at times. Pure eye candy. (cm)


Advertisement
Ad


7. CSS Debugging Tools

Nobody loves debugging, but it's necessary and there is just no way around it once an unexpected issue occurs. CSS debugging has become a bit easier with a little bookmarklet by Yahoo, DebugCSS. The tool loads on an existing page and highlights potentially broken, malformed or legacy code which is likely to be either invalid or go against best practices, or cause problems in the short or long term.

CSS Debugging Tools

Errors are marked with three different colours, with yellow indicating warnings, and red calling for immediate action. Simply drag the bookmarklet to the toolbar and get a handy review of the quality of your code. Perhaps debugging doesn't have to be painful after all. You can also use Pesticide or CSS Layout Debugger to get a better understanding of why your layout breaks. (ml)


8. What Kind Of Person Are You?

Each of us is different, but we all also share some common characteristics that define who we are and how people around us perceive us. For example, do you use one browser window with many tabs, or many browser windows with a few tabs? Do you watch your TV shows on a TV or on your laptop? Do you slice a sandwich horizontally or vertically or diagonally? And most importantly, do you set up just one alarm on your phone or a number of alarms to make sure that you don't oversleep?

What Kind Of Person Are You?

2 Kinds Of People collects these little curiosities about human behavior — they are remarkably precise, and often quite hilarious. A lovely little Tumblr blog worth following, or perhaps even submitting an idea to about the little differences that you just discovered in people around you. Now it might get a little bit more obvious why people don't understand each other at times — nicely shown by illustrations in the tumblog. So, what kind of person are you? (vf)


9. Keep Calm And Attend A Smashing Workshop

With so many techniques, tools, libraries, design patterns, strategies, abstractions, frameworks and boilerplates available nowadays, what do you really need to know to keep your workflow fast, smart and efficient? That's exactly what our front-end and RWD workshops are all about: practical front-end and RWD workshops that will help you become better front-end developers and designers, today.

Keep Calm And Attend A Smashing Workshop

Upcoming Online Workshops:

Upcoming Smashing Workshops and Meet-Ups:

You can also check more workshops coming up later this year. Or, if you'd like to run an in-house workshop at your office, feel free to get in touch with Vitaly at vitaly@smashingconf.com and briefly describe what problems you're facing and would like to solve. Don't worry about the cost — we'll find a fair price for sure. Get in touch — it's that easy!

Workshop image credits: Marc Thiele


Advertisement
Ad


10. Recent Articles On Smashing Magazine


11. New On Smashing Job Board

Here are the recent job openings published on our Smashing Job Board:

  • Product Designer at Citrusbyte (Los Angeles, CA)
    Citrusbyte is looking for an experienced web and mobile application designer who will be designing products with complex user interactions and data presentation.

  • Vice President UX at Mastercard (New York, NY)
    You will lead the design of consumer-facing products across a product line in the emerging payments space in close partnership with product and technology team members.

  • Web Designer at Mary Baldwin College (Staunton, Virginia)
    Mary Baldwin College seeks a web designer with strong technical skills, aesthetic panache, and a passion for how best to use online channels to communicate brand, reach a target audience, and inspire engagement.


12. Smashing Highlights (From Our Archive)

  • Freebie: Boldons Icon Set (45 Icons, PNG, AI)
    How often do you find yourself searching for lovely, friendly, well-designed icons that would fit well into a rather informal design atmosphere? These icons are completely free for commercial use as well as in your personal projects.

  • Repurposing Photoshop For The Web
    What if Photoshop were used as a high-fidelity sketch pad? Perhaps it's time to revisit how we use Photoshop today — its role has changed, and for responsive design we have to be prepared to reinvent Photoshop for ourselves.

  • An Exploration Of Carousel Usage On Mobile E-Commerce Websites
    Using real data, this article aims for a better understanding of the current argument against carousels and whether they really deserve the reputation they've gained. I'll break down the arguments point by point and see if our data lines up with those expectations.


Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.

Email: newsletter@smashingmagazine.com
Follow us on Twitter Join us on Facebook

The authors are: Cat Clark (cc), Cosima Mielke (cm), Melanie Lang (ml), Iris Lješnjanin (il), Vitaly Friedman (vf), Christiane Rosenberger (research), Elja Friedman (tools).

unsubscribe update preferences view in your browser


Tuesday, June 9, 2015

New SmashingConf Barcelona 2015, Early-Birds: ¡Mañana, Mañana!

Mark your calendar: October 20–21, 2015.
SmashingConf Barcelona. Tickets now on sale.

¡Mañana, Mañana! SmashingConf Barcelona!

Enough mañana* already: SmashingConf Barcelona will be packed with smart solutions to tackle your front-end and UX issues head on.

* mañana /mænˈjɑː.nə/ Tomorrow, or later.

SmashingConf Barcelona, October 20-21st 2015

$399 / €294 + VAT

Get the tickets →Hurry up. Only 50 early birds.

About The Conference

Trends don't matter, but techniques do. With our new SmashingConf Barcelona, we keep exploring interesting problems, smart solutions and lessons learned from actual projects. We highlight what has worked or failed — and why — so you know what to expect when you face similar problems. It makes up the spirit of our conferences, and we take pride in it.


The conference will be taking place in magical Palau de la Música Catalana, an architectural jewel of Catalan Modernism.

No theory, no fluff, just quality content: 2 conference days, 1 track, hands-on workshops and 14 speakers improving their craft on small or large scale every single day.

Taking place on October 20–21, 2015 in the very heart of Barcelona, this could be an event to keep you on your toes for quite some time. Seriously. Grab your early-birds already!


First Confirmed Speakers

We've invited speakers who passionately care about their craft and have learned a few things from their own experiences:

SmashingConf Barcelona

We prepared a neat Convince Your Boss (PDF) that you can use to convince your boss (or total strangers!) to send you to the event. Maybe we're biased, but we know it's worth it.

Get the tickets →Hurry up. Only 50 early birds.

Why This Conference Could Be For You

Well, because it's very practical. You'll learn lots of valuable insights to apply to your projects right away. You'll also meet fantastic, like-minded people from the industry. You'll learn:

  1. Strategies for building fast responsive websites,
  2. Clever psychological techniques for smarter interfaces,
  3. Techniques and guidelines for better mobile UX,
  4. Guidelines for scalable CSS and JavaScript,
  5. Techniques for better lettering and interaction design,
  6. How to optimize for performance and content delivery,
  7. Gotchas and guidelines when using SVG and Flexbox,
  8. Mistakes and lessons learned from real-life projects,
  9. Responsive design patterns for future-ready websites,
  10. How to move away from generic solutions towards designs that exhibit soul and personality.

Good enough? Alright then! Only 400 tickets are available, so get your ticket right away — it won't take more than 45 sec.

Still not convinced? →



Tuesday, June 2, 2015

Smashing Newsletter #138: Free Icons, Front-End and Copywriting

With front-end tricks, podcasts and eye candy. Issue #138 Tuesday, June 2nd 2015 180,884 readers View in the browser

The Smashing Email Newsletter

Dear Friends,

Does your website work offline? Probably not. However, it doesn't have to fail completely if users want to access your content. Obviously, with Service Workers we aren't quite there yet, but we are getting there. In fact, very much like with Flexbox, we can use Service Workers as progressive enhancement for capable browsers, adding offline caching to make it work. In fact, we're looking into making our articles available offline, so when you request a page, a cached version will be displayed, and when the connection is available, the content can be refreshed.

Service Workers

If you'd like to dive deep into Service Workers, an article by Matt Gaunt on Introduction to Service Worker is a good starting point, and we'll have a more detailed chapter on offline technologies by Matt and John Allsopp in our brand new Smashing Book 5, too. A yet another dimension of user experience for us, designers and developers alike, to keep in mind.

— Vitaly (@smashingmag)


Table of Contents

1. Free Icons To Celebrate Summer
2. Become a Command Line Power User
3. Rent Fonts or Just Try Them For Free
4. Spicing Up Front-End A Little Bit
5. Good Examples of Email Copy and Copywriting
6. Free Programming Fonts With Code Ligatures
7. Podcasts For Web Designers Worth Listening
8. Better File Names For Automatic Screenshots!
9. The Joy Of Beautiful Type
10. Keep Inspiration Flowing: BaubauHaus
11. Keep Calm And Attend A Smashing Workshop
12. New On Smashing Job Board
13. Smashing Highlights (From Our Archive)

1. Free Icons To Celebrate Summer

The only thing better than a set of well-designed icons? Well, perhaps a set of well-designed, freely available icons. The community has been releasing quite a few sets recently, and some of them are definitely worth highlighting. For example, you can grab Summer Icons Package, a big bundle of summery icon goodness, released by a team of designers from Egypt, freely available for everybody to use.

Free Icons To Celebrate Summer

Icons Responsive provides a set of 24 freely available icons with 8 variations each, ranging from flat coloured to Google Material icons, glyphs and various levels of detail for different resolutions. Last but not least, you can also get Icons8 Free Flat Color Icons which provide another 312 free icons for personal and commercail use. (cc)


2. Become a Command Line Power User

With the rise of command line tools like Grunt and Gulp, Jekyll or GitHub, the Terminal has become an interesting environment for designers and front-end developers. We can massively improve our workflow if we dedicate enough time to learn how to use the almighty command line efficiently. But where to start? Luckily, Wes Bos has released a series of 11 tutorials to bring people a little bit scared of Terminal up to speed with the command line.

Become a Command Line Power User

Command Line Power User is a video series for Terminal users who want to improve their command line workflow with ZSH, Z and related tools. Videos are available for free, but you need to sign up with your email first. (ml)


Advertisement
Ad


3. Rent Fonts or Just Try Them For Free

So you are thinking about using a typeface in one of your projects, but you aren't quite sure which one to use. Of course you can preview the typeface on a foundry's website, but you can't really easily apply it to your mockup without purchasing the family first. In fact, more often than not it's simply impossible to "rent" a typeface for a while or just try it out for an hour or so.

Rent Fonts or Just Try Them For Free

Well, you can now. Fontstand is a new service which provides a new way of licensing and using fonts on desktop. You can try any font for free in any of your applications for one hour, or rent them on the monthly basis. If you've been renting the font for 12 months, it automatically becomes yours. A nice licensing model for graphic designers or even for quick prototyping (the font will be loaded via CSS from your local machine, of course). So far, 340 font families from 21 foundries are available. The service is provided only for Mac OS. (vf)


4. Spicing Up Front-End A Little Bit

There is nothing more simple yet valuable on the web than a good ol' link. Yet when it comes to styling links, often they are quite difficult to spot, and most importantly sometimes you don't know whether you visited a link already or not. That's simply annoying. What about revisiting :visited pseudo-class? Perhaps you'd like to style a box containing a "visited" link differently? Or add something fancy to your links beyond the limitations of :visited? As it turns out, you can use localStorage and HTML5 data attributes with a dash of JavaScript to make it all work in a few minutes.

Spicing Up Front-End A Little Bit

Or maybe you are struggling with other issues. Like SVG scaling bugs in Internet Explorer — well, you can use canvas to fix the SVG scaling in IE 9–11. Or maybe you need a slightly more attractive product comparison table? Or you're looking for cross-browser text masks with blend modes for your art-directed feature?

And if this isn't enough, you can add subtle animations to your SVG logo, e.g. with @keyframes animation to indicate that something is being loaded in the background. Lots of useful techniques to test, and to bookmark, and perhaps apply to your next project! (vf)


5. Good Examples of Email Copy and Copywriting

It's not easy to write a well-crafted, well-written email that doesn't just communicate a message, but makes it difficult to forget it. Perhaps with a unique personality that shines through every line, or a charming voice and tone, with an occasional missing comma or an incorrectly placed semicolon. These details make up a character for the company sending out the email, and they deserve more attention than they usually get.

Good Examples of Email Copy and Copywriting

Great Email Copy collects some of the interesting and well-crafted emails sent out by companies — be it transactional emails, notifications or regular mailings. Content Snippets goes beyond email and focuses on specific copy examples from websites and applications. Good resources to learn how to write better copy and how to make emails a bit more charming, and a little bit more delightful. (vf)


Advertisement
Ad


6. Free Programming Fonts With Code Ligatures

As designers, we tend to spend a lot of time selecting typefaces for headlines, subheads and body copy. As developers, we might have different needs and requirements when selecting an appropriate typeface. A typeface should be scannable, with every glyph being clearly different than another one. In fact, there are some good options out there, but perhaps a typeface of your choice could be a little bit... smarter?

Free Programming Fonts With Code Ligatures

Hasklig, for example, is a programming font with monospaced ligatures. With the font, not only can multi-character glyphs, such as -> be rendered more clearly, but also other problematic details in monospaced fonts, such as spacing, are corrected.

Inspired by Hasklig font, Fira Code is a yet another monospaced font with programming ligatures. Based on Fira Mono, it's an extended family with a comprehensive set of ligatures for common multi-character combinations. Underlying code remains ASCII-compatible, but readability of the code is (supposed to be) much better.

And if you are more into design after all, keep in mind that Roboto, the default font on Android and Chrome OS, and the recommended font for Google's visual language, Material Design, is now fully open-sourced. Roboto supports all Latin, Cyrillic, and Greek characters in Unicode 7.0, as well as the currency symbol for the Georgian lari, to be published in Unicode 8.0. The fonts are currently available in eighteen different styles. (vf)


7. Podcasts For Web Designers Worth Listening

Perhaps you are commuting every morning, or travel quite a bit, or maybe you'd like to use your dish washing time a bit more efficiently? In these cases, listening to podcasts while doing something else could be an option worth trying. The Path to Performance, for example, is a podcast dedicated to fostering a culture around web performance in organizations. It often features interviews with people who have successfully integrated performance as part of their culture and the benefits they have seen.

Podcasts For Web Designers Worth Listening

Responsive Web Design Podcast is dedicated to responsive redesigns; Viewsources Podcast is dedicated to front-end development and design workflows and if you're looking for something slightly less technical, Unfinished Business, talks about pretty much everything web (and not web) related, hosted by Andrew Clarke.

Image credit: Francois Schnell (vf)


8. Better File Names For Automatic Screenshots!

Why is sending screenshots to a friend or a colleagues always such a nightmare? Not because of the way how you create them (e.g. Cmd+Shift+4 on Mac), but because of the way how they are automatically names. Something slightly more descriptive than "Screen Shot 2015-06-01 at 01.36.26" would be helpful.

Better File Names For Automatic Screenshots!

Tiny is a fantastic little tool that renames screenshots into something more meaningful automatically as you capture a screenshot. It uses a window-based screenshot name, renaming your screen based on the front most application's window. So if you take a screenshot of a browser, it will add some details about the page you are looking at, such as the URL, the size, and even the title of the active tab. Handy? Absolutely! And guess what: because the project is currently in beta, it's available for free, too. (vf)


Advertisement
Ad


9. The Joy Of Beautiful Type

Typography walks a fine line between practicality and creativity. While many resources exist to improve our technical fonts knowledge, sometimes it's nice to indulge in a little typographical delight.

The Joy Of Beautiful Type

Typetodesign.com is the beautiful, interactive result of typographic design quest that challenged participants to seek graphic type "in the wild" and upload it to Instagram. 100 Days Of Fonts sees brave designer Do-Hee Kim "design and code a creative showcase of a google font pairing a day, everyday, for 100 days straight." Finally, join Wenting Zhang as he annotates a daily web typeface on Typedetail, focusing on the beautiful, finer details that all too often get overlooked. (cc)


10. Keep Inspiration Flowing: BaubauHaus

Inspiration. This fickle, tricky beast that can either mislead you or drive you to creative directions you've never thought of before. It doesn't mean that inspiration serves as a foundation of your work, but it's through combining ideas and experiences that great work emerges.

Keep Inspiration Flowing: BaubauHaus

BaubauHaus is one of those projects that feature interesting creative work with bold typography and/or strong visual impact. Unlike many other "galleries", the artworks featured are indeed not generic but quite distinguishable. Another site for your bookmarks. Well, maybe. (vf)


11. Keep Calm And Attend A Smashing Workshop

With so many techniques, tools, libraries, design patterns, strategies, abstractions, frameworks and boilerplates available nowadays, what do you really need to know to keep your workflow fast, smart and efficient? That's exactly what our front-end and RWD workshops are all about: practical front-end + RWD workshops that will help you become better front-end developers and designers, today.

Keep Calm And Attend A Smashing Workshop

Upcoming Online Workshops:


Advertisement
Ad


Upcoming Smashing Workshops and Meet-Ups:

You can also check more workshops coming up later this year. Or, if you'd like to run an in-house workshop at your office, feel free to get in touch with Vitaly at vitaly@smashingconf.com and briefly describe what problems you're facing and would like to solve. Don't worry about the cost — we'll find a fair price for sure. Get in touch — it's that easy!

Workshop image credits: Marc Thiele


12. New On Smashing Job Board

Here are the recent job openings published on our Smashing Job Board:

  • Web Designer / Illustrator at Apparent (Anywhere)
    Apparent is seeking an intuitive and talented person to join the Doxie creative team as our senior web designer/illustrator.

  • Front-End Wordpress Ecommerce Developer at Jupiter Highway (New York, NY)
    The ideal candidate will be passionate about creating beautiful, highly customized Wordpress websites, constantly on top of the latest design trends and web standards, and ready to contribute their knowledge to the team.

  • Product Design Manager at BSH Home Appliances Group (Munich, Germany)
    Your task will be to develop market-oriented design concepts with a focus on differentiation within the BSH brand context as well as on their implementation in the product development process.


13. Smashing Highlights (From Our Archive)

  • An Introduction To DOM Events
    Click, touch, load, drag, change, input, error, resize — the list of possible DOM events is lengthy. As developers, we should understand how DOM events work, so that we can harness their potential and build engaging experiences.

  • Introduction To Photoshop Scripting
    Automation is useful in the work of every designer. It saves precious time on repetitive tasks and helps us solve certain problems more quickly and easily. You can automate your workflow in Photoshop with actions, which are pretty popular and which most of you already know about and use.

  • Sassy Z-Index Management For Complex Layouts
    Z-index is an inherently tricky thing, and maintaining z-index order in a complex layout is notoriously difficult. With different stacking orders and contexts, keeping track of them as their numbers increase can be hard — and once they start to spread across CSS files, forget about it!


Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.

Email: newsletter@smashingmagazine.com
Follow us on Twitter Join us on Facebook

The authors are: Catherine Clark (cc), Melanie Lang (ml), Iris Lješnjanin (il), Vitaly Friedman (vf), Christiane Rosenberger (research), Elja Friedman (tools).

unsubscribe update preferences view in your browser