Style Refresh for addons.mozilla.org (AMO)

Markus Jaritz

2

This article originally appeared on the AMO blog.

AMO is the central hub for developers to distribute their add-ons, and for users to discover them. It’s a workhorse of a site, serving as a publishing platform, online community, and marketplace where over 1 million add-ons are downloaded each month.

The current design has been in place since September 2011, with only minor design changes since. We’ve begun overhauling the entire site to modernize it and make it more reliable, but in the meantime we’ve done a quick visual refresh to bridge the gap until we finish the transformation.

The following design is scheduled to debut in Firefox 48, and will remain in place until the larger overhaul is complete:

Screenshot of the AMO Style Refresh 2016 - this new look will be coming soon

Screenshot of the AMO Style Refresh – coming soon

We started this project by tweaking the existing CSS using the Firefox Page Inspector. This is quite easy and got us visible results for every adjustment we made. Every change we liked was then recorded in a userstyle using Stylish. Adapting style-elements from the Firefox for iOS website, this resulted in AMO looking more modern within hours.

screenshot comparing AMO Style in 2011 and 2016

Comparison of AMO style in 2011 and January 2016

This is the first of many improvements that we will bring to the user experience of the add-on ecosystem. Many of them will take some time to be created and implemented, but they will all  have a strong focus on its users—both the developers of add-ons and the people using them.

For a preview of the new look, you can install this userstyle.

A Mozlando Adventure in the heart of Florida

Fang Shih

Mozlando

Hello everyone and greetings from Taipei! A thousand Mozillians gathered from across the world for our semi annual, company wide work week, which happened a few weeks ago at the world renowned Walt Disney World in Orlando, Florida. For many of us here across the globe spending a week in Disney was already amazing, even if it meant 24h+ in air travel. But what truly made the experience memorable and enriching was working and networking with other Mozillians all in one place! It was really inspiring and gave us a good idea of what to expect in the coming year.

Mozlando_AllHands Mozlando_Fox

Mozilla made sure to start the week off on a good note, as we walked into the All hands meetings, each seat had a furry Firefox doll waiting to say Hello! There was even a group of singers on the stage as well as a live beat boxer to welcome each speaker. And here are two of my personal highlights from the meeting:

Firefox OS 

We had a big announcement: Firefox OS will now focus on Connected Devices like Smart TV, Wearables and the Smart Home, which means we will refocus our strategy and explore the possibilities which the Internet of Things can offer. I’m personally really excited about this new announcement. It will be challenging, but also refreshing. We’ve been working on Smart TV for a while. It’s been a good start already, and it will be great to have the chance to explore more possibilities with IoT integration. For more information about the new strategy, check out our new SVP of Connected Devices, Ari Jaaksi’s blog post here.

Ari_Talk

FOCUS for iOS

An unexpected surprise, the Firefox team launched their new app, Focus by Firefox into the app store live on stage, during the all hands. FOCUS is a free ad blocker for Safari on iOS which also disables web analytics and social media trackers. This will allow the user more privacy, improve mobile performance and reduce data usage. For more information about FOCUS, link here.

focus

Other parts of the work week that were important for us were the numerous small team meetings which let us explore and discuss new ideas and upcoming projects. And some of the highlights from the sessions were:

Alopex

At Mozlando we wanted to share a concept project that most of the UX team has been working on for the last few months, codenamed: Alopex (a small arctic fox).  The core concept of Alopex was to put the open web first, by focusing on a great mobile browser experience, advanced offline capabilities and the emphasis on webapps. With Alopex, one can build on top of the amazing work that has gone into customizations (add-ons), saving web content (Pin the Web), data sync and more. At the booth we provided our demo device for people to test out the new navigation model which received positive feedback. . It was a great project to be have been part of. We even had different kinds of stickers available for people to snag! For more information about Alopex here.

Barry’s Presentation

Besides Alopex, we had a session with Barry Munsterteiger who shared with us how the Web can make our TV project more exciting. He demonstrated some motion design he completed a few years back using only web code. It was amazing to see how much the web had progressed over the last few years, this really inspired us to prioritize our collaboration with engineering to make our motion design smoother and more performant during our next project. Of course, there are many other interesting topics and projects from various other meetings. But all in all, it provided a perfect environment for us to set goals and strategize with our team.

Meeting Alopex Stickers Alopex Demo


Now on the fun stuff…

Here is the Wednesday night event. We got to experience international cuisine while being entertained by different cultural performances on the stage, next to the EPCOT Center. The decorations were a big part of the events. There were several big, decorative projection screens that shows” Mozlando 2015”, and the colorful lighting all over the place. There were also fireworks after dinner as well as a reserved Mozilla only zone where we could watch them closer. Special cute desserts and drinks were also provided. This was the most memorable part to me.

Mozlando Event UX Team Fireworks


In the end, it was an amazing experience. Our semi annual work week exceeds our expectations every time and makes us all like a big family again. And I still can’t get over those amazing fireworks. I can’t wait for the next upcoming work week in London in 2016!!! Now enjoy some of our most memorable photos taken by Mozilla Flickr.

PhotoBoothTshirts  Moz_PhotoBooth

Magic Kingdom  Selfie with Micky Welcome Pack

Firefox OS Customization Concept

Peter La

Overview

Earlier this year, I had the privilege of working on concepting the future of Firefox OS visual design with a small team. As part of that exploration, I collaborated with front-end engineer Pavel Ivanov to see what we could do with user customization. Something we’ve always wanted was to give users of all levels of comfort with technology the ability to theme their Firefox OS experience with a single action: by simply selecting an image from their library. We envisioned that we could take a user-selected photo and use it to create OS imagery such as wallpaper, as well as customize their ui colors. This tool could eventually be a responsive web app or become integrated as part of the OS settings app.

On the visual side, we were exploring a new design language inspired by the pixel, a kind of playful homage to our engineering culture. We used it to create pattern imagery that would underpin the visuals for the entire OS. This was a natural starting point for the type of imagery that we would generate from the colors extracted from an image.

Pattern Imagery from Firefox OS Visual Concept

Pattern Imagery from Firefox OS Visual Concept

Color Extraction

The color extraction algorithm that we used was jointly developed by Pavel and myself through several iterations (and I should note is a work in progress). Our goal was to get as close as possible to what a human would pick as the primary set of colors they see in a given photo. This isn’t as easy as it might seem at first. A simple brute force approach of dividing an image into an m x n grid and taking the average of all the pixels within each grid element can often ‘average out’ intense colors.

In the end, our approach is pretty simple, but effective:

Step 1. Sample the colors of individual pixels at regular, fairly granular intervals, but large enough to perform relatively fast.

Step 2. Rank colors by area.  Humans are good at pattern recognition, and one of the primary ways we see color in images is by collapsing similar colors into essentially one color, so that instead of seeing hundreds of greys that make up a rock, we see an average flat grey. To accomplish this, we used a delta that would effectively group a set of similar colors together and used this to calculate and rank the colors according to greatest area. This delta was arrived at through trial and error on a number of images that gave the best average performance.

Step 3. Rank colors by intensity. ‘Intensity’ in this case is just a term we used to describe a particular combination of brightness (or lack of) and saturation. This would, for example, ensure that if there were small areas of very intense color, such as a tiny flower in a field of green foliage, it would get selected, just as a human would. These colors can be missed by following a brute force average approach as well as ranking by area.

Note:  Step 3 is not yet fully implemented.

Patterns

To begin with, I created four patterns (generators) based on the new visual language that Pavel implemented. Initially these were hard-coded and and drawn to Canvas, but they have since been converted to rendering with SVG. While we have a very small set at the moment, the goal is to be able to rapidly expand this set of imagery and eventually open it up to contributors.

The Tool

Firefox OS Customization Demo

Firefox OS Customization Demo

The tool in its’ current form can be found at http://firefoxos-mozilla.sapp.io/

Try it out for yourself!

Step 1. Feed it an image by selecting the URL field at the top of the page and enter a URL link to any image on the web. Some images that we have used to develop this tool are listed below.

http://firefoxos-mozilla.sapp.io/wallpapers/PH_CalmDock@2x.jpg

http://firefoxos-mozilla.sapp.io/wallpapers/PH_Hills@2x.jpg

http://firefoxos-mozilla.sapp.io/wallpapers/PH_Leaves@2x.jpg

http://firefoxos-mozilla.sapp.io/wallpapers/PH_Orange@2x.jpg

http://firefoxos-mozilla.sapp.io/wallpapers/PH_PurpleFlower@2x.jpg

http://firefoxos-mozilla.sapp.io/wallpapers/PH_RollingHills@2x.jpg

http://firefoxos-mozilla.sapp.io/wallpapers/PH_Shore@2x.jpg

http://firefoxos-mozilla.sapp.io/wallpapers/PH_Snail@2x.jpg

http://firefoxos-mozilla.sapp.io/wallpapers/PH_SurrealGrass@2x.jpg

http://firefoxos-mozilla.sapp.io/wallpapers/PH_Towers@2x.jpg

http://firefoxos-mozilla.sapp.io/wallpapers/PH_Tree@2x.jpg

http://firefoxos-mozilla.sapp.io/wallpapers/PH_TreeForest@2x.jpg

http://firefoxos-mozilla.sapp.io/wallpapers/PH_Wheat@2x.jpg

http://firefoxos-mozilla.sapp.io/wallpapers/PH_WhiteFlower@2x.jpg

Step 2. Select a generator (or pattern).

Step 3. Modify the colors by selecting any two colors you wish from the extracted palette to create your own image.

Step 4. Download the image by clicking on the download link. Currently, only 720×1280 images are available, which fit the Sony Z3C (our Foxfooding device), but we will be adding support for other screens in the future.

Next Steps

While we’ve taken a good first step toward a simple but effective customization tool for Firefox OS, there are a number of things we want to do with it before it’s truly useful. The next steps include converting it to a responsive web app, auto-detecting device screen size, adding new patterns and improving the color extraction algorithm.

Stay tuned!

Credits

Developer: Pavel Ivanov

Designer: Peter La

Photography: Javier Pardina (http://pardina.co/)

My Magic Carpet Ride at MozFest 2015

Eric Pang

MozFest

Hello from sunny Manchester!

Seeing as I’m pretty close to London I thought it would be a good opportunity to check out MozFest for the first time!  The event took place in beautiful East London right next to the quirky O2 Arena (formerly known as the Millennium Dome) at the Ravensborne building.

Ravensbourne

Ravensbourne Building in East London

What is Mozfest anyway? It’s a celebration of the open web that gives attendees the opportunity to showcase projects they have been working on. More importantly it’s a place where you learn, share and meet like minded people.

Air Mozilla Blimp FirefoxFirefox OS

Being my first MozFest I had no idea what to expect. I’ve never been to a conference like this — At initial arrival, it felt unorganized and chaotic. At any given time there were 25+ talks going on, each completely different. This may have felt strange because only a couple of weeks earlier I was at Smashing Conference In Barcelona where organization was a key part to the success of the conference (read more about the conference in the previous blog post Smashing Conference Barcelona by Hung Nguyen). If that was considered the normal way a conference is run then this was by no means normal!

The opening speeches helped confirm that chaotic nature was intentional. Amira Dhalla put it best when she said, “I am the creator and director of my own magic carpet ride”. The open structure allowed everyone to customize their own individual experience at MozFest.

Mitchell Baker

Mitchell Baker gives an opening speech at MozFest 2015

Although I had looked through the list of sessions before arriving, I decided to attend some sessions on a whim instead of going to ones that directly related to my role at Mozilla. Even though I was still a little confused and overwhelmed, this is exactly what I did for my first session.


Becoming a Human Rights CSI

Facilitators: Milena Marin, Amnesty International & Francesco Sebregondi, Forensic Architecture

Micro Tasking

During the opening speeches a few of the leaders and facilitators gave a quick overview of the sessions they were holding. Milena Marin was one of the speakers. As she spoke about her subject her enthusiasm helped me decide that this was the first session I wanted to jump into.

We were shown how micro tasking and crowd sourcing can turn a huge task into manageable chunks. In the specific task we were introduced to how Amnesty International plans to use this technique to investigate their human rights campaigns.

Split up into small teams we were each assigned a section of a larger satellite image to highlight areas that may have been affected from a missile strike. The session was a great learning experience about the power of micro tasking using open source information and how contributors can help organizations process a large amount of information. For Amnesty International the findings can lead data to support their future campaigns.

Find more information here.


Crafting New Visualization Techniques for the Mobile Web

Facilitator: Aaron Williams

Being a user experience designer on Firefox OS Aaron’s session stood out to me. The session was all about breaking the norm and designing for mobile first and then scaling up for desktop second.

The session started by compiling a list of different data types such as, tables, graphs, maps, time lines, etc. With this list we were asked to choose one and explore possibilities of how the data visualization could be improved if designed for a mobile platforms first. Next we generated a list of interactions that differentiate desktop from mobile. For example, mobile allows for interactions such as tapping, shaking, tilting, haptic feedback, etc. We should be thinking about how we can use these to help enhance different kind of data visualization, which are not possible on desktop.

As a team we choose timelines as our data type and explored how motion sensors could help visualize this data. With blue sky thinking we thought about moving the device in the space around you to view different sections of a timeline. We saw the potential of this working in some scenarios such as in schools or museums but also the drawbacks of using this in some social situations such as public transport. It made for a pretty hilarious discussion about social norms!

Check out Aaron’s blog here.


Conservation, Live Streaming and VR

Facilitators: Adrian Cockle, Alasdair Davies & Tim Brooke

VR

Another session I attended was a fun and interactive session held by the Seven Seconds Ago team. The team was showcasing a open source project that helps connect people to wildlife through 360 virtual reality. While getting a chance to test out their demo of the Google Cardboard meerkat experiment we discussed the potential users, the difference between live and pre-recorded content and what else can be added to make an even greater experience.

Watch a video here about the project.


What started out as a chaotic beginning to the festival ended up being the ‘magic carpet ride’ Amira said it would be. I would highly recommend everyone should to experience MozFest as there is definitely something for everyone :).

London is a beautiful city making it great for photography. Here are a few snaps I took while exploring.

millennium bridge

County Hall Southbank Bubbles Sweep

Crossing Over: My Experience with Web Development

Amy Lee

As a visual designer working on Firefox OS, I thought it would be beneficial to learn more about the technical aspect of building a web-based OS and so I decided to take a 12 week front-end web development course.

The course was intensive with each week covering topics such as tools and workflow, HTML fundamentals, CSS3 animations, JavaScript and jQuery. I had learned some HTML and CSS years ago in university but the landscape of mark-up language has definitely changed since then.

Some of the things I learned in the course has helped me become more in-tune with the type of tasks involved when building a web-based OS. My ultimate goal wasn’t to become a front-end developer, but to develop empathy and to foster a more cohesive working relationship with developers on the team. By being able to ask the right questions and to understand the technical aspects of web development, we can experience a stronger connection between disciplines.

There are developers who treat UX and design as a means to build code. However, I have also noticed that there are some developers who are very passionate about UX and design. I always appreciate developers who care about design and understand the importance of an optimal text size and is willing to go that extra distance in refining UI elements. I think the same should be applied to designers, to have a basic understanding of the technology in which they are designing for.

From an efficiency standpoint, it is an essential skill for designers working with web technologies to know how to edit a CSS file. For Firefox OS, I am able to make edits directly to the device through WebIDE — a browser-based tool that allows you to create, edit, run, and debug web apps. This allows me to test out fonts sizes and weights, fine-tune an animation, or explore colours, without relying on the aid of a developer.

WebIDE

Editing CSS through WebIDE

Editing CSS through WebIDE

In WebIDE you can see your edits directly on the device

There are many people that believe designers should know how to implement their own designs. While designer/developer unicorns can exist, oftentimes these individuals end up having a strong expertise in only one of those disciplines. I don’t think designers should be limited by their technical abilities to implement a design and developers shouldn’t be limited by their knowledge of design tools. To have a designer who understands the intricacies of web development and a developer who appreciates typography would ultimately lead to stronger teams and products.