Dr. Galati recently launched his Your Health First site upgrade with a fresh, mobile-responsive layout to make his podcasts readily accessible and to cross-promote his practice and his book. His website’s beautiful new theme was chosen to align the branding sites for his podcast, blog, new book Eating Yourself Sick, and his practice – The Liver Specialists of Texas. This ensures consistent branding, which is key to recognition!
As The Brooks Law Group went through the rebranding process last year, they relied on the feature-rich Tendenci Content Management System (CMS) to build a fresh modern look and an engaging interface that makes information readily accessible.
In addition to the fresh, mobile-responsive design, they are currently implementing Tendenci’s groups and newsletter mailing features to streamline the accessability to their legal and consulting services, as well as to disseminate information to individual subsets of clients.
We are proud to partner with The Brooks Law Group as they achieve their vision to provide aggressive representation and creative solutions for home healthcare and hospice providers throughout the country.
As marketingland states in their article, it’s not that the desktop doesn’t matter given most commerce still happens there. It is just that the buyers or donors started the journey with a search on a mobile device.
For the designers out there it is official that serving the clients means showing them the site on their mobile devices FIRST.
Mobile first design simplifies the information architecture process and focuses the team on outcomes. Focusing on your end users, the people googling your site on their iphone the vast majority of the time, is a success for everyone.
Mobile first changes the question from the ego-driven and outdated mindset of:
“How does my website look on the giant 4k monitor in the conference room?”
to a results oriented view of:
“Does this site reach our audience on their mobile devices effectively?”
Mobile first has been baseline for years. This data just confirms it once again.
Note: Tendenci, The Open Source AMS, is fully responsive across all viewports. If you are on an older version of Tendenci (v5 or earlier) we strongly recommend you talk to your developer to upgrade your site.
Listening to a client I realized that maybe “geek speak” on my part was part of the challenge. Definitions:
Themes – The “theme” is the visual part of your site that makes you unique. When a major change happens, like the rapid growth in mobile traffic, it is not uncommon to have to purchase or pay to upgrade your theme with WordPress, Drupal or Tendenci.
Software – The “software” stack is all of the functionality below the theme. Open source projects are driven by a community and most modules or add-ons strive to be backwards compatible.
Game changers – sometimes a company like Apple will invent a “game changer” like the iphone. Awesome! Oh, but wait. You can’t write software that works on a device that either didn’t exist or was a tiny fraction of visitors to your site when you first deployed your theme.
LTS Timelines – Who sets the timeline for LTS (Long Term Support) major releases? In Open Source it is driven by the community around a project. Frequently it is a combination of software and “dependencies”.
To use a large open source project as an example, WordPress users (like me – my blog is on wordpress) sometimes need to pay to upgrade a premium theme when WordPress does a major release.
As WordPress makes changes and improvements, sometimes these impact WordPress Themes and their underlying code and use of Template Tags. When a new version is announced, WordPress users are recommended to check the various WordPress Theme Compatibility lists to ensure their WordPress Theme is updated and ready for the new version.
Tendenci, a much smaller but growing open source project, is doing the same thing for the same reasons. You want a unique brand (your theme) and new functionality (the software) and you’d like it to be as low cost as possible. Hence software updates are “usually” free, it’s just when a “game changer” happens that you need to update your theme.
Checking your web site for quality is an ongoing task given the number of authors on a given web site. In this post I’m going to link a few of the tools we use to check up on ourselves. And on clients as they author on their sites as well, right? So here goes:
Tendenci 4 used basic Dreamweaver DWT files so designers could see everything they were doing. Then we used very strongly typed and very exact html comments along with Python to chop up the template to integrate it with the code.
The benefits were huge in that designers could design, programmers could program. Life was good. Well, almost, there was the whole 2002 use of tables because Netscape and IE were fighting and munged up generated HTMl inside of the script blocks rendered out. Very non MVC but it worked. And it allowed for amazing designer freedom.
Django – Tendenci has been a team effort since 2001 and the big jump came in 2009 when we started the rewrite in fully open source code (old news, I won’t bore you with it, but you can google it.). Django, a web framework written in Python, replaces the custom written framework we built in Tendenci 4 from scratch (hint – avoid writing frameworks from scratch. It makes no sense anymore. Time changes things.)
The problem? Django templates are out of date, they use too much magic (how many times does a designer add a code block and forget the templatetag? Or more common, remove a code block and leave the templatetag out of forgetfulness or fear.
And the worst part – you CAN’T SEE IT unless it is rendered. No more Dreamweaver or any other wysiwyg tools. We take visual people and thrown them into a text based world. For comparison, this would be like coding in Python in Photoshop. It doesn’t make sense.
I wish this post had a happy ending. It is a happy goal. A worthy goal. But the state of affairs with Django and Templates remains stagnant at best as explained here:
In our latest video, two of our Schipul designers Mary Shamburger and Erica Bogdan share some of their favorite sites to visit for inspiration on the web – from web design ideas to design trends to fonts and images!
At Schipul, we are often working on “redesign” projects, where a client has an existing website and design that needs to be updated. We know that just because a website is “attractive” doesn’t necessarily mean it is successful.
Every day, we are looking at current Analytics data from tools like Google Analytics to shape the design of a new website. Analytics tell us when to change a site from desktop only to mobile ready. Analytics tell us if we did well in search optimization. Analytics tell us what content should be presented for visitors. We use Analytics to determine the success and failure of projects – and hope to share some tips for you to use that data as well!
Below are Aaron’s slides and some insight from his presentation on how we use insight from Analytics in our designs.
Traffic patterns tend to be highly correlated year after year after year. Online traffic should reflect what’s happening offline. If your busiest times are during Spring Break and Summer – your online traffic should reflect that pattern.
Incorporate These Traffic Patterns Into your Web Marketing Strategy:
Take advantage of peak times with seasonal content
Consider boosting low times with special offers or campaigns
Track your progress by looking at year over year data (if you measure your success comparing month to month, you may miss these seasonal shifts)
Plan in advance! Start your website redesign project early so you don’t miss out!
Tip: When comparing timelines in Google Analytics, choose “Compare to: Previous year” from the drop down to automatically select the same time frame last year.
2. Mobile Traffic Has Increased
Across the board, our clients are seeing increases in Mobile Traffic year over year. Our nonprofit clients saw an average 30% increase in mobile traffic from 2012 to 2013. Make sure you are accounting for mobile in your designs.
Don’t Ignore this Mobile Stat: According to Google, 57% of users say they won’t recommend a business with a poorly performing mobile website.
Make sure your site at a baseline “works” on a mobile device. Better yet – design it to be mobile and tablet optimized!
Use Analytics to Discover:
What percent of traffic comes from Mobile Devices
Filter down to the device level – does your audience primarily come from iPhone, Android, or Tablet?
Tip: In Google Analytics, navigate to Audience Tab > Mobile > Devices to see specific devices
Navigate to Audience Tab > Mobile > Operating System to view your traffic breakdown of Android vs. iOS
3. Consider Responsive Design
Responsive Design is the most modern and scalable way to handle mobile and tablet browsers – and a best practice as recommended by Google and other search engines. A site with a Responsive Design uses one style sheet and the content adjusts fluidly based on the width of any browser.
This means that a mobile, tablet, or desktop device serves up the same content on your website – which in turn means you only have to update content in one place to account for all devices.
Look at Analytics for top visited pages and navigation paths. Make sure you are making your most popular content easy to find.
Tip: Drill down into the Content Tab > All Pages and select your homepage. Click the “Navigation Summary” tab to see which pages people visit most after your homepage.
5. Discuss Content Improvements with Clients
It’s not all about the design – the website’s content has to support the design to really be successful. Educate clients on content best practices and how they can improve their content strategically.
For instance, Google’s recent Penguin and Panda algorithm updates punish low quality content and overoptimization. Discuss what “High Quality Content” means and ideas for creating that type of content.
6. Remember – You Can Pay Your Way
Search Engine Optimization takes time – it takes about three months for Google to fully index a new website. You can use online PPC advertising to drive traffic to your site immediately – but note that it can get expensive, especially in a crowded or competitive space.
Use tools like the Google Traffic Estimator to see estimates of how much your keywords might cost. Remember to target ads by geography to get the most for your money.
Use the data you have to look at what your audience is interested in. Where do they spend their time and money on your site? If you are getting most of your traffic through photos or revenue through events, make sure those items are easy to navigate and find on your site.
In this example, 21% of traffic and over $1 million in revenue comes through Events. It was an easy decision to make Event content (including content on upcoming events and photos and video from past events) easy to find on the site!
9. Tap Into the Three Motivations of People – Social, Material, Ideological
Social Motivations – Identity, relationships, a sense of belonging
Material Motivations – This is the most straight forward of the three, you give something (time, money, etc.) to get a material gain
Ideological Motivations – Identifying with a cause or higher purpose
Think about what really motivates your audience when designing. Your audience may initially be Socially Motivated to attend your events because their friends are involved before they know anything else about your organization – or they may be looking for Material discounts or special offers. Particularly for nonprofits – tap into Ideological motivations with storytelling focused photos and visuals to compel them to donate!
Set up Goals in Analytics and track them. This adds Conversion data to any report and allows you to see not just where traffic is coming from – but which keywords, sources, content, etc. are actually converting.
Note that you can only see retroactive Goal Tracking data in Analytics – so don’t wait to set up these Goals so you don’t miss any data!
Short video on setting up Goals in Analytics and tips for determining what your goals should be:
In Conclusion: Analytics are Powerful!
Website Analytics give us powerful insight into how an audience is engaging with a website. Use this data to shape how you think about any design work – even if it is as simple and reworking one piece of the website.
Make sure Analytics is installed and Goal Tracking set up now to start using this data to shape your design!
Social media is always evolving. Aside from new tools being introduced constantly, established players are tirelessly innovating and adding new features, tools, and settings to stay ahead of the technology curve (i.e. this year’s Facebook timeline profile design overhaul).
Some of those changes are functional, some are aesthetic, and some are sort of… both.
Last week, Twitter implemented one of these such changes.
Twitter Adds Cover Photos Header Photos to Profiles!
So let’s get to one of the recent changes we’ve seen in Social Media tools this week that follow this idea. Similar to Facebook’s profile update earlier this year with the addition of a Cover Photo, Twitter has enhanced user profiles with its own version called a Header Photo.
How to Add Your Own Twitter Cover Photo
Implementing a header design to your profile is easy:
Step 1 – Under Settings, click “Edit Profile” and then choose the Design Tab
Step 2 – Scroll down to where yo see the word “header” and click “Change Header” to upload your image
Step 3 – Adjust your image placement and cropping and click “Save”
“Design, more than anything else, has led to the success of Mint” – Aaron Patzer
So why does it matter? A few years ago, I had the privilege to see Aaron Patzer speak at SXSW Interactive. Aaron is the founder of Mint.com, the fantastically easy to use budgeting/personal finance website that I love (and is now owned by Intuit).
The main thing I walked away with from that talk is the importance of design and visuals in a complex web application like Mint. I pull these quotes from Aaron from my notes of the session, illustrating this concept:
“When you come to Mint, it’s beautiful and it puts you at ease.”
“Mint makes finances friendly.”
“When you have a comfortable website, people trust you inherently”
And perhaps most notable: … “Design, more than anything else, has led to the success of Mint”
The Importance of Visuals in Social Media (And All Web Applications!)
Those are powerful words – and I see a similar evolution in Social Media applications. Many of the tools we use every day were not the first of their kind to do what they do – there were photo sharing sites before Instagram and microblogging platforms before Pinterest. But those that are “winning” are applying visual elements better than anyone else. So it makes sense that the developers of these tools constantly test and mold the visual elements of their applications to continue to push them forward. And I, for one, can’t wait to see what comes next!