Ideas, insights and inspirations.

In order for a web page to be successful, a user must visit the page. Getting a user to visit the URL is a great struggle, but after they make that decision there are dozens upon dozens of reasons why they will leave, and sometimes leave before you can get a chance to make an impression. Page loading speed, an intriguing design, and engaging content will help keep your viewers on the page, but for user with accessibility needs (be it visual, auditory, or physical), reasons for leaving your site may be overlooked. Part of ensuring accessibility to all users means following web standards which value proper use of HTML elements, using CSS responsibly, and designing for all types of users on all types of devices. Most development teams have milestones in the software life cycle where they check for accessibility issues—this usually falls near the end of the project. We use several software tools at our disposal that can … Continue reading

Posted in: ,

The web is full of designs and patterns, both good and bad, new and old. At times it all starts to blur together and the sites start resembling one another. Periodically I like to see what else is out there, to see what interesting ideas have yet to become the web trend of the month. The following is a small list of sites I try to visit at least once a week. As a front end developer I might be looking for something different for inspiration compared to a designer or UX specialist. The following sites will offer not only design and development ideas but also challenge the way we view content on the web, for better or for worse. Site Inspire : Well organized collection so you can easily browse for specific subjects or styles that you are looking for. Mostly leans toward a clean, modern design aesthetic. One Page Love : Single page sites only, great source for … Continue reading

Posted in:

In December of 2016, Slate.com started testing a new article site design. One of their designers Jason Santa Maria tweeted their test page, along with a  blog post introducing the new design approach. The new layout was sleek and simple, but I was personally drawn towards the articles hero image and title. The hero section refers to the top section of the page, usually with a large eye catching image and title. I wanted to talk about section and some of the smart design decisions that were made by Slate when thinking and designing ‘mobile first’. For publications like Slate, mobile traffic makes up a majority of their page views, so focusing on this experience is an obvious choice. Traditionally, the standard hero image is usually wider than it is tall to match the aspect ratio of the desktop device. This ‘desktop first’ approach when scaled to a mobile screen size through responsive development yields a rather short image that … Continue reading

Posted in: ,

My last blog post I wrote about the future of web grids by using CSS Grid Layouts. Recently I have been finding a lot of inspiration off of the grid. Finding a way to incorporate some more organic or random elements on the page. Over the weekend I visited the home page for one of my favorite photography social media and mobile app called VSCO  and was surprised to see a very unorthodox homepage (figure 1, 2, and 3) The site looks normal at first glance, a simple nav and a list of recent blog posts, but on hover (at large desktop sizes) the post items will load images from the post behind the text in a somewhat random order and position.   The interiors are more structured (figure 4) but still give the appearance of a random placement for images and text. It is easy to keep the web in a grid structure using frameworks like Bootstrap, Foundation, or … Continue reading

Posted in: ,

This past June several Elliance team members had the pleasure of attending Web Design Day 2016. While many of the speakers presented interesting new ideas and techniques one seemed to stand out of the crowd for me, Jen Simmons’ ‘Revolutionize Your Page: Real Art Direction on the Web’. Her talk focused on upcoming web standards that will have great impact on how we design and develop web page layouts. You can watch a similar talk here. One of the most exciting features she covered was CSS Grid Layouts. What is a CSS Grid Layout? It is a browser native feature for making 2 dimensional grids on the web. In the past, after the introduction of CSS, we used tables to create layouts, this was followed by the use of floated elements and most recently we’ve been dabbling in flexbox. Of course CSS Grid Layouts are not ready for production, but Chrome, Firefox, and Opera are testing this new standard that you can use today (after … Continue reading

As a Front End developer, my job crosses over many disciplines, but this post is not about what a Front End developer/designer does (you can read a great article by Brad Frost on the topic to understand more about this balancing act). During the development of a web site, the front end plays key roles throughout the process. Traditionally the front end was reserved for the post-design states of a project, but more and more, we are seeing the front end discussed and thought about earlier. Depending on the organization or team, the front end can be introduced as early as the beginnings of content strategy, site map development, or wireframing. These early front ends are usually grayscale websites with placeholder images and Lorem Ipsum text. The ‘polishing’ of a site with elements like color, drops shadows, gradients, and animations are usually reserved for later. But recently I have found myself adding more and more motion throughout all stages of … Continue reading

Posted in:

The Problem: During development on a recent project I was tasked with creating some Front End animations for a web app. This application would present a user with a list within two tabs (the tabs will display the list by either A-Z or by Category). Within these tabs you can also filter the list, and this is where the animation exists. Items would disappear and reappear. Wanting greater control over the animation, compared to simple JQuery, I started finessing CSS animation. I quickly ran into a problem. I found that the CSS animation would re-fire/re-paint when the tabbed content came back into view. Example: Toggle between the tabs and note that the animation fires each time you return to “Tab #1” Why was this happening? I double checked my keyframe statement. Made sure I was setting animation-fill-mode to “forwards” to prevent repeating the animation. After much research and testing, I came to the conclusion that it wasn’t the CSS animation, … Continue reading

As a front-end web developer I deal with Design, User Experience, and User Interface challenges on a daily basis. I also have my fair share of opinions on what works and what doesn’t work in UI/UX design. Sometimes I am wrong, and recognizing that you are wrong is the first step towards progress. The following is a sample of my ‘list of observations’ (mostly things I was wrong about) from this past holiday season while visiting friends and family. Young children actually use voice search: I’ve spent two days watching kids use (successfully I might add) voice search on a cable box. It was actually quicker and more successful than using the clumsy remote text input. This is a surprising contrast over my failed attempts with Siri or Google Now. Non-developers are more tolerant of broken software: I watched several people acknowledge broken software (video games, web pages, etc…) and merely shrugged their shoulders and move on with the task … Continue reading

Posted in:

Touch devices have quickly overtaken traditional mouse and keyboard devices (device sales, mobile usage). The current landscape is such that we can confidently assume our visitors will be experiencing our web pages on their phones first and then on their desktops second… if we are lucky.  The tricky thing is, when we speak of touch devices, we are not only referring of small screen devices (like phones and tablets) but we are now talking about all device sizes. The large device market has been quickly incorporating touch capabilities into large tablet, laptops and desktops. Recently Apple introduced the iPad Pro, joining Google Chromebooks, and Microsoft Surfaces and laptops as large format (typically  11-13” and above) touch enabled devices. Commonly in Responsive Web Design both designers and developers have used arbitrary size (usually around 750px) for the breakpoint between touch devices and mouse and keyboard devices. This commonly segregates styles and functions giving assumed desktop sizes more robust elements and ignoring … Continue reading

When I was a child, I was fascinated by the PBS show The Woodwright’s Shop. If you haven’t seen the show, the host Roy Underhill makes amazing projects out of wood using manual hand tools. A significant portion of the show featured Mr. Underhill crafting his own tool to aid him in upcoming projects. For some reason, the tool making was my favorite part of the show. As a front end developer I have used plenty of boilerplates and frameworks in my work. If you have ever used one you know that they come with advantages and disadvantages.  Recently, I was inspired to build my own toolkit to replace *off the shelf* web boilerplates. The results are a better understanding of the code, and ultimately, a cleaner finished product. The Woodwright’s Shop was full of wonderful tools, both custom-made and hand-me-downs. The shop’s collection could not be purchased at the local Home Depot. it was collected and crafted over time … Continue reading

Posted in: