Instagram
[fts_instagram instagram_id=256737344 super_gallery=yes image_size=100px icon_size=50px space_between_photos=1px hide_date_likes_comments=yes center_container=yes image_stack_animation=yes type=user]
Twitter
[fts_twitter twitter_name=elliance]
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
Leave a comment
As discussed in a previous blog post, we recently redesigned the Carnegie Mellon Today online magazine. With this redesign, the focus changed from a print-based quarterly issue to an online-only site with new stories both produced and promoted on a weekly basis. With roughly 80% of existing site traffic coming to articles (a number that is expected to increase with this new model), one of our project goals was to create an explorable experience that engages readers and increases the flow of traffic through the site. Keeping that in mind, we set out with a few ideas. A website’s navigation is it’s roadmap. It is the best place to start engaging the audience. We also know that it is the most popular way to explore. Like most navigations, ours is visible and consistent throughout all of the site, however, it becomes minified as readers scroll through articles, creating less busyness on the page while still keeping the navigation close by … Continue reading
In relaunching the online Carnegie Mellon responsive university magazine, we have created a technologically sophisticated online university magazine which is commensurate with the Carnegie Mellon brand. It has a singular mission: to build brand awareness for Carnegie Mellon name with people who are not aware of the brand name (“brand unawares”). Two forces are powering this new relaunch: big data and branding. Let me begin with two high-level views: Let me now illustrate the smarts behind this: 1. Data powers the entire user experience: The online magazine sections (aka departments in print parlance) are based on a combination of popular SEO keywords and CMU strategic priorities and. The story tags too are intentionally hand-picked by use of popular SEO keywords. Instead of displaying popular tags alphabetically, they are prioritized in descending popularity order, with ability for site administrators to designate a couple of tags as sticky tags based on university’s strategic priorities. 2. New interactive design deepens the brand: CMU … 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: web development tools
Over the past few years, the web industry has been very focused on devices. So much so that responsive design is defined as “building web content that shows up well on any device.”But focusing on devices isn’t enough anymore. By focusing only on devices, we are missing other experiences. Our web content is no longer stuck to a browser. It is traveling beyond it’s traditional medium. Take something like a news article — a simple piece of web content — and look at all of the different places this story can, and will, show up: Perhaps its original print medium; As a webpage on any device with a web browser — a computer, phone, TV screen, tablet, game console, watch, etc; On the homepage of your website; On a search results page; – or you can say on google but i would recommend keeping it open ended to all search engines. On a 3rd party website; In an ad on … Continue reading
Posted in: responsive web design
Elliance is proud to launch the first responsive website for naturopathic medicine in North America for Southwest College for Naturopathic Medicine (SCNM). By outsmarting the competition and with its history of firsts, SCNM has once again proven that it is indeed the most innovative college for naturopathic medicine. The entire process of launching the website took almost one year, the four months being spent on articulating their new brand position: “Simply Inspiring”. Our interviews with SCNM faculty, students and patients made us realize that SCNM is a storehouse of inspiring stories of patients being healed by craft-minded Nauturoapthic Doctors. We also met a wide array of alumni who were respectable leaders living lives as ND’s, as researchers for Neutrceuticals, as authors of ground breaking work in Naturopathic healing, and as members of integrative medicine practices. The new website is the first expression of the new brand position and comprises of two parts. The first part is the website for the … Continue reading
Friendship between First Commonwealth Bank and Elliance goes back a long way. In 1998, Elliance designed the bank’s second website. Since then, Elliance has redesigned the bank’s website three times – most recently three years ago before responsive design movement took off. Last fall, First Commonwealth Bank reached out to Elliance and posed an interesting challenge: make the current website responsive without redesigning it. The bank’s customers still loved their branch-architecture-inspired website design but wished it was mobile/tablet friendly. Elliance welcomed the challenge. In short three months, we delivered well-documented responsive templates to their Web/IT team, and walked them through the template architecture. Then we supported them for another three months while the wonderful Web/IT team incorporated the new templates into their Content Management System. The entire process worked very smoothly. Two happy teams! Most importantly, the site visitors are now enjoying the perfect website experience whether they are visiting the bank website from their desktops, tablets or smartphones. Now, … Continue reading
Today was a great day for Elliance, and Aerotech. We accomplished an engineering feat which is a rare occurrence in any company’s history. A little over a year after launching their English website, we launched the German version of the website for Aerotech. The intriguing part of the story is that the German website wasn’t built as a standalone website; instead, a common code base, data model and content management engine powers both their English and German websites. This translates into nominal costs for creating each additional international website and fixing a problem in all international versions in case a problem is discovered. Doing this for a marketing website is an accomplishment in itself, but doing this for a marketing website with complex add-ons such as site search, facet search, international dealer locator, a complete product catalog and SEO hooks is an accomplishment on a different scale. It’s as if we were climbing uphill with extra weights added to our … Continue reading
For the past two years, I have been using SCSS to build my websites. Developers everywhere have touched on the many benefits of SASS/SCSS compared to LESS and vanilla CSS in the past, so let’s just skip ahead to doing something cool. With large higher education websites, I was finding that I was rewriting the same code many times in many different areas. To simplify this, I started building a “style-guide” to help me keep track of these elements for future use. The easiest way I could think of to show this was to give you an image, then explain it. So let’s break it down: Looks This starts out with variable names for every color that I use with the “theme” of the site. I like to name them with “$client-color: “as a variable name(client being changed to the actual client name), in case we have to cross the css with another file that also has a $yellow variable … Continue reading
Being a responsive web design agency, we know the importance of adding content on the web. But in app-centric world, it’s often forgotten how important content on the web really is. With the CMU Today project completed, I reflected on the benefits a responsive online magazine provides. Those benefits are directly related to what the web is for — a medium for sharing information. Here are three things you gain by making your site online and responsive. 1. Increase Social Reach – “Going viral” is every marketers dream. Right now, it’s easier than ever on the web. We live in a time of social networks, emails, and texts. Every article on CMU Today can be instantly and easily shared by its readers. Social shares allow you to tap into your readers’ personal networks. This lead to more people seeing the article and more shares by these people. Your article may not be the next viral cat video YouTube hit. But … Continue reading