HTML5 has been a big step forward, but it does not really deliver in terms of fluid interfaces, particularly for mobile. Older methods of DOM access and manipulation are flawed, and ripe with performance issues. Dealing with these issues is complex. Everyday development cycles should be abstracted from having to deal with limitations like these. Famo.us does this for us, and from what I’ve seen so far – it does it well.
Browsers have gotten really good. Our desktop machines are crazy powerful. Most of the time folks aren’t cognizant of any performance issues with the sites they browse on their desktop machines. All of this often masks the limitations of HTML/CSS/JS, or poor implementation by the developer. On mobile devices however, the cracks in HTML5 start to show. Although smartphones and tablets today are indeed amazingly powerful for their size, the mobile browsers they tote are a far cry from their desktop cousins. This is where it becomes quickly apparent that HTML5 is not as magical as we think it is – or have been told it is. When Zuckerberg – of Facebook – said “The biggest mistake we made as a company was betting too much on HTML5 as opposed to native” it was a huge blow to the perception of HTML5 in the mobile space. Recently there have been rumblings of a Front End framework that is solely focused on providing a toolset to use HTML5 in a performant way. This framework is Famo.us, and it wants badly for the web to win.
Famo.us is alot of things; a 3D layout tool, a physics engine, a native wrapper (yet to be seen), a MVC (yet to be seen), but more importantly it’s an attempt to solve the biggest rendering performance issues of HTML5. Stabs to crack this nut in the past have fallen short in my opinion. Sencha Touch is a very mature JS MVC with a rich UI kit, however it is beholden to a heavily nested DOM which will grind your app to a halt if you try to get too fancy. Ionic framework is a more modern attempt to create a UI kit for mobile, and leverage AngularJS as the app convention. Although the DOM is much lighter, it doesn’t address a fundamental issue of nested elements, reflows, repaints etc.
Famo.us recently entered a controlled beta – adding a few hundred accounts a day, and allowing access to early guides and documentation. I am excited to be attending HTML5 Dev Conf for hands on Famo.us training and hackathon, and to be a part of this beta release. What I have seen so far is very promising. There are a few things that Famo.us is doing that will give a speed boost to the DOM by addressing how we structure and think about modern web apps.
The Flat DOM
There is a great article on HTML5 Rocks – A resource for open web HTML5 developers about CSS3 and hardware acceleration. What is not mentioned in that article the the transform matrix3D – which allows a 16 digit matrix of values to describe a point in space in a 3D perspective along with rotation, skew, and scale. Famo.us wraps this property up and uses it as the main driver of it’s layout engine – flipping brilliant if you ask me. This allows them to run operations against multiple matrices of modifiers for super performant, complex transitions. Deeper under the hood Famo.us leverages the JS method “requestAnimationFrame” to know when to update the matrix – ensuring users perveice the UI at 60fps.
Nothing really groundbreaking here I would say. Caching reference dom objects is one of the first things listed in any best practices guide for DOM speed. Many frameworks have optimized themselves around reducing DOM touches. They all have their own special flavor on how they get that done, but the concept is straightforward. I like to think of JS and the DOM as being on opposite sides of a river. There is a bridge and, as with all bridges, there is a bridge troll. Everytime the bridge is crossed in order for JS to talk to the DOM, the troll blocks your path and charges a speed tax. Famo.us’s modifier / surface separation allows the developer to care less about accessing the surface, since the modifier is where all the slick transitioning is handled.
The performance problems that Famo.us is attempting to address, along with the rich catalog of physics, animations, and other features included make it a framework to definitely keep an eye on moving forward. Bootsoft is committed to the open web, and are looking to leverage any piece technology that helps us move that goal forward. When Famo.us is ready for prime time, we will happily find the right project to unleash it on.
Bootsoft is always trying to find ways to contribute to the community, and one of our favorite ways is using our skills to give back! Over the weekend of November 1st-3rd, we had another GiveBack NY event (formerly named Create-a-thon). Since our last event in April 2013, we’ve partnered up with GiveBack DC, rebranded, and made another website for another well-deserving non-profit.
The group we worked with this time was Sports2Success. They use sports as a platform to empower today’s youth to help them pursue employment and become contributing members to the workforce. Through Sports Leadership Training and Apprenticeship programs, they build up kids with the confidence to excel in life, and through a career.
Working with Jamaal King, the Founder of Sports2Success, we were able to gather all the information and content for the website to get going. By creating wireframes prior to the event, it helps us plan a swift course of action for designing, coding and testing over the weekend. One of the challenges we faced, was the fact that there weren’t any photos of the group yet, so, Jamaal had an idea of creating a dynamic animation for the home page to help show what the organization is about. He sent us an idea for what it could be based on, and our designer Seung-Yun took it and ran with it! She was able to create the impressive animation that is on the home page using solely CSS and HTML. (You can view the site >>here<<)
The look-n-feel was created by myself, Kate B (the event coordinator for GBNY). I was inspired by S2S’s original logo, which was updated and simplified on the new site, and a theme of orange and dark grey/black used on their previous site. I wanted to add another accent color to the layout that wasn’t as bright as the orange color, and I felt that a pleasant teal-blue color complimented the orange and blended with the black and greys. I wanted the site to be engaging but simple, so a user could go to the site and quickly know where to go depending on what they wanted to do. I also wanted the site to have a fun and youthful look to it, seeing that it is a program for kids, but because the target audience is volunteers and supporters, I still wanted it to have a professional and organized feeling, as well.
Once I had the overall design ready to go, the developers were ready to jump in! We worked away all day on Saturday and got a ton of work done, to come in on Sunday to finish off the project and do some testing. For this project we used WordPress as a framework with Foundation and SASS. Everything went pretty smoothly, and we are so happy with the finished product!
Thank you to everyone who participated in this incredibly successful weekend, and can’t wait to begin planning our next event. If you or someone you know are involved with a non-profit in need of a website revamp – please apply at www.givebackny.org
Working with someone is a huge commitment. You spend hundreds of hours collaborating, debating, struggling, and eventually succeeding alongside your peers. Trust is an inherent part of any relationship, and getting into the virtual trenches with someone requires a great deal of it. My working relationship with Ian has spanned multiple companies and countless projects. There is no developer I would rather have at the keys than Ian Ainley. He is a superb programmer, but more importantly is dependable, and trustworthy. There is calmness to his swagger that helps to right the boat when things get rough, and I have never seen a task or impasse get the best of him.
Ian’s work is uniformly accurate and timely. On a project that was particularly complex – Ian built the front end for something called “Blue Wall”. This ‘wall’ integrated a live twitter stream using web sockets to display tweets on a full screen map. The user then interacted with the map using motion captured by an X-Box Connect. Ian hand rolled a custom event dispatch system in CoffeeScript to handle the incoming tweets and motion events into what is truly fun and exciting user experience.
These are only a couple of the projects Mr Ainley has been working on, and there is no question that he has Nailed It.
Kate Baldwin IS the graphic design arm of Bootsoft. She came directly from University to us and has blazed forth into the professional world leaving a wake of beauty and UX excellence in her wake. Her 3rd Bootiversary just recently passed and she has not lost a drop of the design-force essence that landed her squarely in our midst.
In between juggling umpteen project requests she also manages to push forward our Events and Marketing Committee (EMC) while grooming cats and design interns alike. If that wasn’t enough to quell this constant creative conjuror, a recent volunteer initiative – still to be named – has taken form which aims to provide an out-of-the-box site for a select nonprofit in a weekend session. The first go brought The Autism Program at Boston Medical Center from a back page mention to a full branded site complete with Calendar, Blog, and all the trimmings that go along. For orchestrating the event, curating the “client”, wireframing and designing the site – Kate has been bestowed the coveted “Nailed It” award.
There is no doubt that as the ever constant march of time pushes on Ms. Baldwin will be a central, if not critical piece in the Bootsoft ecosystem. Her presence makes us all better at our job – and that’s just before lunch.
Writers’ Block. Everyone gets it whether they’re a writer or not. Its that part of your process where you hit a brick wall and your brain cannot process any new thoughts. I tend to get this when I’ve been staring at a design or wireframes for a few hours and my eyes start crossing. It usually hits in the afternoon, and sometimes just getting up to get a snack or glass of water remedies my predicament, but other times its a bit more serious.
All I need is some serious inspiration… and with the internet at my fingertips, its not hard to find some.
Designers (and non-designers!) can be influenced by so much. Everything in the world can somehow be interpreted into something creatively plausible by anyone with the ability to see. Color, light, movement, and shapes are everywhere, its impossible not to notice.
Here are some blogs and websites that I immediately go to to gain some creative input.
I always go here, even when I’m not stuck, just to check out the new stuff they’re doing. There are constantly new write-ups and demos with all the fancy new trends. I tend to do keyword searches like, typography or design and browse multiple articles within one theme to get in a certain mindset. Originally shown to me by Jeff Chew, I quickly became enamored with this group for their vast skill-set and wide arrange of knowledge across design, the web and usability.
I love coming to this site to clear my design hang-ups. This group of illustrators, designers, writers, photographers and thinkers compile a wonderfully simple, continuously scrolling blog. I find that their design aesthetics reference a lot of vintage and traditional graphic design, which is, appropriately, very graphic. The bold use of color with minimalist type is seen often, along with nostalgic photography and tons of patterns. This blog always brings me back to the basics and reminds me why I love to create.
ffffound is a great site that just has tons of images. What I love doing is scanning through until I see something that catches my eye, and then losing myself in an infinite cycle of clicking related images. There’s a lot of content on here, but with proper determination, you can find tons of inspirational posters, illustrations, designs and photos.
Clearly, the name is referencing ffffound, but this is a blog created by one guy who has a love for all things menswear, women and sleek design. Warning: There are nude images intermingled amongst so most definitely NSFW. He only posts occasionally but he posts so much its fairly easy to lose track of time scrolling through. This brings out the minimalist in me… his taste and aesthetic are beautifully simple.
Christopher David Ryan is a designer that I keep coming back to. He is incredibly talented with iconography and imagery. He invokes so much thought and feeling through his charismatically simple and joyful images. I usually keep up with his blog, but its always refreshing to just go back and look at his portfolio. A lot of his designs end up being my desktop!
Design Sponge is one of the most renowned design blogs out there, for good reason. Mostly directed towards interior design and decorating, Grace Bonney overflows her blog with tons of design-driven posts that are sure to inspire anybody. She has a ton of different writers from all walks of the earth that keep the content fresh and ever-changing. The DIY and Before-and-After posts are huge for getting you motivated to use your hands and get those creative juices flowing.
This is an invite only site, but once you’re in, it is incredibly addicting. You follow people who like the same kind of things you do, and the homepage pushes other users that are similar to you as well. This is honestly just a huge burst of inspiration… you can search any kind of keyword and just pour over images upon images.
Forrst is also an invite only site, but specifically for designers and developers. It is a social network directed towards those who design sites and those who code sites. They encourage critique, feedback and sharing your knowledge with others who ask. I spend a lot of time checking out other people’s designs and reading all the feedback to keep up with what audiences are seeing and feeling. Its like a virtual classroom, and its very rewarding for users who are active in the community.
At this point, I’ve probably lost you to at least one of the above websites, but I hope that if any readers are ever in a pickle, they can find solace and get revived from one of my suggestions.
Would love to hear other people’s suggestions for sites that spur creative thinking, so please share in the comments!
One of my favorite parts about being a designer is communicating an idea or getting a certain point across to the audience. Designers translate a thought into a visual representation with the intention to help people understand that initial thought.
Designing for the web is a particularly challenging but interesting process. Although I’ve been a graphic designer for years, my background is in illustration; painting and drawing specifically, occasionally using a computer for slight enhancements. When it comes to artwork I’m pretty much a pen to paper kinda gal. In any type of design though, whether it is with a mouse and pixels or a paintbrush to a canvas, the designer has to take into consideration all aspects of good design. Knowledge of composition, color schemes and contrast (among many other skill sets) are integral to being a good designer.
Yet, when it comes to the web, all these skills are relative to a designers’ knowledge of interface design. In an illustration, the audience is receiving the information being passed on by the artist and interpreting how they want to. On a website, the user is receiving the information, and when it comes down to it, there’s only one interpretation possible. It all depends on how intuitive the design is in order for the user to get that information properly.
The key to a great website isn’t how bright and crazy the design is, or fancy animations and tons of unnecessary features. Its how understandable it is to use, and how enjoyable the experience it is. Of course visual design (colors, typefaces) plays into the enjoyment factor, but really, you want a user to come to your website, know what they want to do, be able to do that, and come back and do it again. Hopefully somewhere in between that, they’ll tell someone about your site too.
When I design for a site here at Bootsoft, I’ve most likely spent a lot of time on wireframes (or someone else did) and I have the interface issues solved. Sometimes, for personal projects like artist portfolios, especially, I just jump right into the designs. When that happens, I am still always keeping in mind the importance of the user, and making sure that anyone who comes to that site can navigate it easily and successfully. Following this, certain things in a design are going to be adjusted, or compromised. For example, if you have some awesome photographs that you want to display, it all depends on what your site is for. If it is a photography portfolio, by all means, those photos should be the main attraction of your website, and of course be larger in proportion to any other elements on your site. On the other hand, if you are a company that offers special services or products, you may have other information on your site that is much more important than a nice picture. Especially if you have an ambiguous company name or logo, users are going to want to find out what you are all about, immediately, and if you have an enormous photo pushing all your content below the fold, it is going to effect the user’s productivity and impede on their overall efficiency.
Certain color schemes also have to be taken into consideration. For a print poster advertising a huge sale, bright colors and large text can be incredibly effective, especially when people are viewing from a distance. On the web, readability is crucial. Sure, there may be important things you want to ‘pop’ on the page, but if it is taking away from the overall goal of your user, there are plenty of other ways to emphasize certain elements than using bright neon colors and enormous text. If a site is going to have a lot of text, such as a blog or a web based newspaper or magazine, there are certain color schemes you must follow. Typically, light text on a dark background is looked down upon on the web, because of the ‘glow’ that can occur around letters, which can be incredibly distracting if the text is smaller and more compact. On the other hand, it has been said that if someone is staring at a screen and reading for a long time, having a light background can be straining on the eyes because its like you’re staring at a bright light for hours. Either way, taking into consideration the color and type of text you use is incredibly important. Put yourself in your readers’ eyes, would you want to be reading neon green text on a hot pink background? I don’t think so.
All that being said, design and the web are constantly evolving. With all the possibilities of programming, designers are now more able to stretch their creative muscles and really experiment with new elements and designs. As exciting as it is, we still have to remember that we are designing for an audience and their experiences are what make us grow.
Over the seven years I spent with Bootsoft, I’ve seen the company grow from a development company, to a fully evolved team that provides everything from well-defined discovery, smart development, and a refined maintenance/support process. During that time, I was able to add usability and information architecture to the many services that Bootsoft provides today. However, one of the bigger milestones for both Bootsoft as well as my career was the birth of the Creative team last year.
As with any client’s redesign (or initial design for that matter), it’s important to understand the business goals, objectives, identity, and overall brand. Our creative process includes many steps and deliverables in order to identify these points, as well as a game plan on how to achieve the client’s needs. We deemed Bootsoft as a client, and treated ourselves no differently.
The User Experience
As part of our research, we studied the competition as well as applying what we know about our previous site visitors. We identified the target user personas, then began to structure how we want to deliver our message using UX design and information architecture techniques.
In parallel to this, we generated and explored various mood boards to get a better idea of the look and feel we wanted to achieve.
Based on feedback and several iterations, we were able to determine the general feeling we wish to convey to our visitors, as well as how our visitors can find the information they need quickly. This brought us to two different design directions; circle and square.
As with any design process, iterations can conceivably go on forever. We tasked ourselves with defining the pros and cons of each direction, then ultimately deciding on one. From there, we took the things we liked from the other and applied more detailed iterations. The end result is the site that you see today.
The look and feel is only half the battle when it comes to design. What the user sees has been established, now how about when the user starts clicking around? One of the continuing mantras said throughout the discovery process was “no flash”. The whole Internet industry is abuzz with “HTML5”, and we wanted to flex our muscles as a company to show some of the latest and greatest your browser has to offer.
It’s easy for a designer to get carried away with how a site should behave in their mind. This is when it’s important to sync with a front-end tech lead on what we can and cannot do, according to the browser scope of the project. Storyboarding the site interactions is important to convey these ideas, either by conceptual or detailed wireframes.
In the past, we were accustomed to developing the “pixel-perfectness” from browser to browser. However, the industry is gradually seeing the importance of delivering speed and good UX over visual or functional consistency. This is why progressive enhancement is Bootsoft’s approach today over yesterday’s idea of graceful degradation.
As a front-end developer, I was no stranger to browser sniffing and conditional behaviors. I still cringe when I think about how much Netscape 4’s DOM differed from Internet Explorer. As part of progressive enhancement, the idea instead is to set a baseline that all browsers can understand, then go from there. We use a couple of tools in order to achieve that “reset”, then feature detection:
Because we want to develop our site using HTML5 semantics, it’s great that Modernizr includes an HTML5 shiv that will allow “oldie” browsers like IE6/7/8 to interpret tags like HEADER, NAV, SECTION, etc. For anything more complex, we use Modernizr’s feature detection to determine if the user’s browser can handle certain code. Because our site is almost completely based on CSS3 transitions, here’s one we used multiple times:
// do some awesome stuff
Everyone talks about HTML5. In layman’s terms, when a user sees something that is accomplished without flash, it’s easy to say “oh, that’s HTML5”. Well, that’s partially right. By definition:
(n) 1. The next version of HTML. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices
Google Chrome Frame / IE[x]
The benefit of progressive enhancement is that the site will still generally look fine even on the most stubborn of browsers (i.e. IE). Short of forcing the user to switch to a different browser entirely, another option we give our users (for those viewing our site in IE7 or below) is to install a plug-in called “Google Chrome Frame”. This was developed by Google, and is a plug-in for Internet Explorer that generally makes it behave like Chrome. The added bonus is that it automatically updates, just like Chrome. It installs in seconds, and the user can see all of the new and fancy things that Chrome has to offer, while still browsing comfortably in a browser they have grown used to using.
Although realistically we still need to support the browsers our clients task us to develop for, we hope that this “solution” catches on. As we’ve developed more HTML5-friendly sites, the more we’ve realized that IE[x] is the new IE6. Paul Irish, one of the developers on the Google Chrome team and leading front-end developers of the industry, has a great write-up on this.
Responsible Web Development
Whether if we’re developing a generally small site like ours, or an enterprise level web application, we always hold ourselves to the best practices of web development. The front-end in particular is rapidly becoming more robust, and can become unwieldy and harder to maintain when losing focus on how it is built. And with this great power, it means that much more responsibility that falls on the developer.
Any project can easily stray off the path, especially in our own site redesign considering this project has a very close emotional attachment to all members involved. That is why our process played a crucial role in moving forward with our milestones and eventual site release. It also doesn’t hurt to have a stellar team working beside you every step of the way.
Director of UI Design & Development