Responsive Design 15
When GF&M Law contacted 4x3 for a redesign of their website, we worked closely with the firm to create a site that reflected the class and professionalism of GF&M but also was functional on all devices and SEO-friendly.
Thoughtful Structural Design for Businesses
4x3 specializes in business web design; we strive to create just the right website for each client. Our services range from custom CMS design and development to logo design and visual branding and beyond.
Our work with GF&M Law focused not only on a functional responsive design, but also site architecture and accessibility. The GF&M law firm website homepage and interior pages are optimized for search engines, potential clients, and fellow peers. 4x3's thoughtful design integrated SEO-friendly structure into every aspect of the website.
Why Structure Matters
Good site structure is at the very core of organic SEO.
GF&M Law's SEO-friendly site structure is one of the most crucial aspects of a site’s SEO performance. We purposely created a site with logical and hierarchical site structure. This allows users to finding pages where they’re expected, thus locating what they are seeking more quickly. The more appealing GF&M Law's site to users, the more appealing it is to search engines, too. Google’s algorithm uses information from users to rank the site.
Good site structure enables great user experience, which in turn provides the site with higher Google ranking and sitelinks on search engines.
ABOUT GF&M LAW
Gordon, Fournaris & Mammarella, P.A. is a law firm located in Wilmington, Delaware. Their staff boasts a number of highly skilled attorneys and paralegals prepared to fight for their clients in cases about Captive Insurance, Trusts and Estate Planning, Fiduciary Litigation, Commercial Real Estate, and more.
The firm is also affiliated with The First State Registered Agent Company. GF&M Law can provide incorporation services for Delaware corporations and formation services for Limited Liability Companies and Limited Partnerships.
When approached by the Historic Odessa Foundation for a website redesign in 2010, 4x3 was tasked with implementing an efficient, user-friendly solution that prioritized content rich management and custom navigation. The resulting website design allowed visitors to clearly discover and understand Historic Odessa's wealth of information.
Organizing a Content Rich Website
To effectively organize all the important historical information about Historic Odessa's buildings and grounds, as well as their nonprofit mission, 4x3 created a responsive website design that divided the information into readable, easy to navigate sections. On the top of the page, there are two custom navigation bars for visitors to quickly find the information they need.
Historic Odessa's Dual Navigation Bars
The top dark green navigation bar showcases general links that invite visitors to learn more about Historic Odessa Foundation, such as the "About Us" and "Sponsors" pages. Alongside these links, there are more direct call to action links, which provide functionality and ease of accessibility to the first-time visitor, such as directions and contact information.
4x3 decided to further clarify the user experience for Historic Odessa visitors by complementing the top dark green navigation bar with a second navigation bar below the logo. This navigation bar features links that showcase current updates as well as other callouts to encourage visitors to plan their visit. In unobtrusive but visible all-caps text, the navigation bar suggests that you learn about Historic Odessa's history, become a member, and keep up to date with foundation news.
The Importance of Custom Navigation Bars
For both returning and first time visitors, these dual navigation bars highlight current happenings at Historic Odessa that they might be interested in attending. This not only encourages visitors to want to return to the website and visit Historic Odessa's grounds again, but also enables better organic search results through fresh content updates. The integration of content updates with a seamless, simple but beautiful website design is the best way for visitors to find what they're looking for and facilitate ongoing engagement with the Historic Odessa Foundation.
Updating and Managing Content on Historic Odessa Foundation
In addition to organizing Historic Odessa's information through good web design, 4x3 also updates and manages content for the foundation regularly. 4x3 creates and pushes out social media posts across all platforms, promotes Facebook event posts, and sends out a reminder newsletters for Historic Odessa's various exhibitions and memberships.
By creating a user-friendly, accessible destination in the form of Historic Odessa's website, 4x3 was able to ensure that any social content updates link to a source that guides the visitor to more information and motivates them to visit Historic Odessa, Delaware.
ABOUT HISTORIC ODESSA
The mission of the Historic Odessa Foundation is to preserve and promote the homes, grounds, collections and historic legacy of Odessa, Delaware. The Historic Odessa Foundation is charged with raising money, maintaining Odessa’s historic assets, supporting scholarly and archeological work and educating the public in the history of the town and the state of Delaware in the 18th and 19th centuries.
Relevant and timeless content is invaluable when developing a brand. 4x3 develops custom, fully functional sites to manage content in a SEO-friendly and organized manner.
Developing Arizona Opera
In 2014, Arizona Opera was looking to upgrade its web presence and reorganize the large amount of content on its website. 4x3 partnered with Cause Design on the redesign, redevlopment and rearchitecture of azopera.org. The Arizona Opera website required an organized way to publish and manage everything from news and press releases to performances and events.
4x3 was up for the challenge!
4x3 developed a full site rebuild in Drupal, creating an inviting, user-friendly website for the opera's many visitors and stakeholders. We also integrated custom Drupal modules and and intelligent navigation tools to ease the burden of updates for this content-rich website and enhance the functionality of the site. The site can now be managed without any high-level programming expertise while remaining while fully incorporating responsive web design.
Due to the heavily content oriented aspect of the website, a high level or organization needed to be applied during the development process. We worked closely with Arizona Opera to create a detailed site map to guarantee a simple layout and easily navigated internal pages. This level organization was implemented in every step of development.
About Arizona Opera
Arizona Opera, originally the Tucson Opera Company, was founded in 1971 by a dedicated group of opera enthusiasts.
Since its inaugural year, Arizona Opera has produced over 170 fully-staged operas and concerts. The company’s artistic history is rich with a blend of opera’s traditional repertoire featuring baroque, bel canto, and verismo works, turn-of-the-century masterpieces, operettas, and American operas. Arizona Opera preforms complete seasons in both Tucson and Phoenix.
About Cause Design
Cause Design Company was founded by Principal and Creative Director Rodd Whitney, an award-winning designer who has more than 20 years of experience at the intersection of design and the corporate and non—profit sectors.
Years of Experience in Web Development
4x3 has been developing websites since it was founded. As an integral part of our web design process, 4x3 implements thoughtful web development during all phases or building and programming (or reprogramming) a website; including Drupal, eCommerce, and custom CMS.
4x3 has been partnered with the Penn Green Campus Partnership since September 2012. Back then we created a new website with a Drupal powered content management system; and now we have redesigned the site once again to be responsive on all devices for greater visual impact.
In a world of quickly evolving technology, it is imparitive to constantly update and improve your website. An untouched website will easily break in two years due to CMS software updates and out-of-date design modifications.
Penn Green Campus' brand and idenity remained the same, along with other design elements, and instead focused their redesign on mobile responsive design and overall web presence.
One Website, Many Devices
One of the most appealing aspects of responsive web design is that a responsive website can provide a great user-experience across many devices and screen sizes. This is important because it is nearly impossible to anticipate which device a visitor will use to access your website.
By implementing larger thumb-nail images, drop down menus, new cropping software and a mobile repsonsive design, the Penn Green Campus Partnership improved user experience and created a mobile friendly interface.
Responsive design is a necessary feature for any modern website. In fact, Google has new mobile friendly test that can inform visitors if your site has a repsonsive design. This can inevitably affect your website's credibility, local SEO, click-through rate and lead generation. Google has evn gone as far to state that responsive web design is its recommended mobile configuration for any website.
About our Client
The Green Campus Partnership is the umbrella organization that was formed in 2007 to address environmental sustainability planning and policy development at the University of Pennsylvania and to coordinate programs and initiatives for a more sustainable campus. Penn President Amy Gutmann was the first Ivy League President to sign the American College and University Presidents Climate Commitment (ACUPCC).
4x3 is honored to be involved with Penn Green Campus Partnership to build a culture of sustainability.
Back in 2013, 4x3 designed and developed a website for Northern NJ SAFE KIDS/Safe Communities. But it was time for an upgrade... so this year we worked closely with Prevention Works! to redesign their website.
A website “redesign” doesn’t necessarily mean that you completely scrap your old website and start anew. Brand and identity can stay the same, along with other design elements. But as your company and technology both evolve, it is necessary to make functional modifications that help your website and its visitors run more smoothly.
Responsive design makes a website easily adaptable to fit the screen sizes of any mobile device.
With an on-the-go lifestyle that many of us lead, it is no surprise that most websites have a high mobile usage rate. A responsive design makes it possible for visitors to navigate the Prevention Works! website easily across all unique devices, providing a great user experience.
Responsive design is a necessary feature for any modern website. In fact, Google is now telling searchers whether your website is mobile friendly or not with their new mobile friendly test. This will inevitably affect your credibility, click-through rate, lead generation and sales.
Custom Google Maps
Prevention Works! hosts several location-based services across Northern New Jersey.
We also built and integrated custom Google maps and other location-based assets into mobile and desktop redesign. Our Drupal-based web platform allows for sophisticated multi-layer, interactive map that enhances the website's usability, social integration and local SEO.
About Our Client
PreventionWorks-NJ.org is the official website of Northern NJ SAFE KIDS/Safe Communities. The Northern NJ SAFE KIDS coalition work is to prevent childhood injury through research, community outreach, legislative advocacy and media awareness campaigns. Safe Kids Worldwide has over 500 chapters and coalitions in all 50 states, and has partners in 25 countries.
As a non-profit sponsored by Morristown Memorial Hospital, their mission is to reduce fatalities, injuries and property damage due to unintentional injuries on the road, at home and at play. As such, Prevention Works! provides complementary safety services through Northern New Jersey.
When we began the web design process the other day with a client, we stumbled across a new phrase in the RWD world: Age Responsive Design.
We already have the ability to make sites adapt based on screen size. But this is only the first step. As technology has evolved we have developed the ability to adapt web structure and content based on a user's age.
We have the technology!
While we might not be making a Six Million Dollar Man, Age Responsive Design is not an unattainable concept imagined in some science-fiction realm.
In fact, the gaming industry has been using a player's age and experience to adapt First Person Perspective (FPP) games by using dynamic game balancing (DGB) for years!
DGB is the automatic process that changes parameters, scenarios, and behaviors in a video game in real-time, based on the player's ability. This is utilized to avoid making a player bored or frustrated. If you're a beginner, you will only fight enemies that have reduced speed and health. But if you're a pro, the game will become much more difficult and increase the gameplay duration.
The concept is similar to what the age-responsive design will do to websites. And, just as we have the information to determine a user’s age, this data can be used to combine those existing technologies to create universally user-friendly experiences. As we enter 2017, websites will be able to combined this information to make subtle changes to accommodate younger or older audiences.
One size DOES NOT fit all.
A 7-year-old and a 70-year-old do not read the same books or wear the same clothes, so why should they be subjected to the same online experience?
Age Responsive Design is made with the ability to focus on how the site looks; but also how it works, what type of content it displays, and what a user can do with it. Just a few examples of what Age Responsive Design could do, include:
- bigger vs smaller font sizes and spacing
- muted vs saturated color schemes
- video presentations vs text explanations
- social media sharing vs email conversion
- expanded vs condensed navigation menus
- typographic vs traditional content
While automatic age design is not currently in use, targeted web content is... So the application of Age Responsive Design is just around the corner - it's only matter of who impliments it first.
Ever wish news articles in Google search or Facebook feeds would load faster on your phone? Our benevolent Web overlords feel your pain. There’s a mini horse-race going on right now between Google and Facebook over which will attract the most publishers to their new content platforms designed to make loading articles lightning fast in iOS and Android.
Facebook’s platform is called Instant Articles, and the company brags that articles and photos accessed through the social network will load 10 times faster than through the standard mobile Web.
Publishers work with Facebook and Google to set up their content on these platforms, and both companies are busy wooing partners. Facebook touts cool-looking content from National Geographic, while Google is already working with big players like Hearst.
Both Google and Facebook may be reacting to Apple’s built-in News app, which rolled out on all iOS devices last year. News, for its part, was inspired by the Flipboard app. News and Flipboard make it easy and more convenient to browse and load news articles. Google and Facebook surely want to bring that same functionality to their ecosystems.
Keeping up with Apps on Mobile
All this is interesting to Web developers because ever-more complex and dynamic websites have created challenges on mobile. A Wordpress plugin will be available to make it easy for publishers to create Instant Articles for Facebook, while Drupal developers have released a custom module compatible with the Instant Articles program.
Expect more innovations as developers and tech companies seek new ways to improve the mobile experience.
Here at 4x3, we’re always looking for ways to do things better. The conversation today revolved around making e-newsletters more responsive. Since so many people open emails on their phones, it makes sense to set best practices for design and content that optimizes the reading experience.
Turns out, Google has been thinking a lot about this, too. Back in June, the company announced a comprehensive design initiative called Material Design. “It's Google's first design manifesto, and within it lies a message about how the company sees its users interacting with everything from watches to cars,” Gizmodo noted at the time.
Responsive Design From Google
Google, always taking the long view, is looking beyond smartphones and tablets to the day when we are interacting with the Web in a wide range of environments—the much-heralded “Internet of things.”
It makes sense they would be working hard to unify the user experience for all these applications, especially as they try to stay one step ahead of Apple’s iOS. Perhaps Google imagines a day when Android is the “videotape” of Web design, and iOS is the “betamax.” Even if their agenda is not quite that aggressive, this type of standardization obviously makes a lot of business sense.
So what principles does Google believe are important? Bold graphics, clean lines, seamless transitions, spacing to create hierarchy, “familiar tactile attributes” and visual cues grounded in reality, such as can be seen in the hundreds of free-to-use icons the company just released under a Creative Commons license.
Anybody interested in Web design and how to create the best experience for online audiences should pay attention to what Google is up to.
About a year ago, I programmed my first ever responsive website. I had heard of and seen them in action, but I never actually made one myself. It definitely was, and still is, a learning experience. My first few sites had some clunky and less than elegant responsive solutions in them. But in the past year, I’ve learned lots of tricks that make responsive sites easy to build and wanted to share.
Client Side Adaptive Image
So for this first post, here’s a helpful module that I use all the time. It’s called Client Side Adaptive Image and makes formatting images for different breakpoints super easy.
I tried several other modules for generating dynamic images in views or content type displays. Some didn’t work exactly as I had hoped or the setup was anything but easy to understand. But Client Side Adaptive Image (CSAI) just worked and the setup was very straightforward.
After you install and enable the module, you’ll be given the option to use ‘adaptive image’ when adding images to views, to panels or changing settings in a content type display. When selected, you enter breakpoint values, the image style you want to use for each and what style to use as the maximum.
When your browser is open all the way, your site will use the maximum size style. Make it a little smaller and once it hits a defined breakpoint, it loads a new image with the specified styled. It continues to use that image until you hit another defined breakpoint, and then the process is repeated.
Here are the breakpoints I use when designing with the Omega theme...
- 1219px - If you’re using the wide layout that comes with Omega, this breakpoint sets the image for the standard/normal 960px wide layout. If 960px is as wide as your site will get, you can skip this one.
- 979px - Sets the size for images on tablets and smaller screens
- 739px - The last breakpoint that sets the sizes for phones, phablets and other smaller displays
I like to keep it simple and use as few breakpoints as possible, but you have the option to add as many as you want or need!
4x3 is proud to announce that AGA Developers has been added to our list of clients. We will be providing AGA Developers with a variety of services including website development and design as well as branding.
AGA Developers are builders that specialize in development in urban sections of Philadelphia. Energetic, determined, and goal-oriented, AGA is a fantastic company that shows an incredible level of attention to detail. We're beyond confident that the branding and web design we develop for AGA will reflect these qualities and give them a more polished, dynamic web presence.
It's always exciting for us to work with a business as dynamic as AGA Developers. We are looking forward to giving their web presence and branding a jumpstart, and can't wait to unveil their new website in December 2013!
Recently one of our clients received an email with the subject line: "I noticed a problem with your mobile website."
Mobile Web Traffic Doubling
What we've noticed is that many of our clients websites have doubled their mobile traffic from 2011 to 2012, then doubled their mobile traffic again from 2012 to 2013. We're getting to the point where we're talking ~22% of web traffic is coming through the phone or the tablet on some sites. That's a huge shift. Though 22% is on the higher side of what we've seen, the doubling effect is consistent across most clients.
For many reasons, we like to compare Google Analytics data for a time period from one year to the same period the year before. Based on the industry, we feel we need to get an apples-to-apples comparison. Even then other factors need to be taken into consideration. For instance, a heavy equipment rental company might conduct business similarly from year to year in the spring, but if they received a lot of rain one year compared to the other, certainly the numbers will be skewed.
I'm not positive, but I don't think that the guy who wrote the email about the problem with my clients website was really able to scare anyone. I guess for those of you without a web vendor to turn to it might have been cause for alarm. I'm not sure. Maybe that marketing tactic works for some.
A Website Only Lasts Two Years
I'll be honest; we need to shift the way we do business - yet again. We can't expect a website to last 5-6 years like it did in the past. Ironically proposals we wrote 2 years ago had a completely different spin on mobile browsing. Two years ago we did look at the browser and the sites we created in that time frame, proudly still work well. Or should I say they work as intended. I think that's a better explanation.
Fred Needs Responsive Web Fingers
I remember meeting with a particular client approximately 2 years ago. I remember that our client had an iPad. I remember discussing how cool it was. I remember that when the site launched we made sure it looked good on the iPad and the iPhone. They still do. But, I'm calling the latest phenomenon - the Fred Flintstone effect. I have big fingers just like my childhood idol Fred. With people like Fred using the phone to surf the web - all of us really - we need bigger buttons and scrolling information. Our phone design comps are weird looking. They consist of a long skinny tower with big buttons.
Responsive Web Design
What we need these days is a website that is responsive. The phrase 'responsive design' is the latest buzz, but as phone web access increases, it's something we need to address. What responsive means is that your site will respond differently based on the size of your display. If it's on a small device like a mobile phone it will display differently than if it's on your desktop.
I try not to be a pressure salesman, but it may be time to re-evaluate what our website is doing for us. Not just you our clients but 4x3 - our site - our focus - the future of our industry. In the past we have been offering mobile sites and responsive design as an option. And maybe we're just not selling the options hard enough. Maybe we're just not doing our job to make you understand what's happening and how very important is to keep up.
We've always considered our firm as leading edge, not cutting edge. The distinction may seem subtle but it is clear to us. Cutting edge implies the latest and greatest and we all want that, right! but leading edge takes a hard look at your ROI and says, "sure we know you want that, but is it really a cost effective option?" I feel like we are quickly approaching the point where we need to push the responsiveness of your website.
We need to evaluate how content is being delivered to you our clients, and consequently how your content is being delivered to your clients. I believe it's time.
It seems inevitable right? More than half of all cell phone users in the US are using their mobile technology to access the Web. Over 30% of those users, use their mobile device as their primary source to access the Web. Increasingly, traffic is coming via social media, like Facebook, and Twitter, or email campaigns that users access through their smart phone or tablet.
For many sites this in a no-brainer, travel/transportation sites, for companies like Bolt Bus or Amtrak, have embraced mobile technology out of necessity. Their users have come to require quick and easy access directly to information, like train schedules or the ability to buy that last minute bus ticket to NY. Or Wikipedia, that serves to quickly quash late night arguments over the line of succession for US presidents, mobile-ready is essential. But for many other sites, the web continues to be thought of as an experience, a brochure, a chance to experience the brand; a chance for users to take some time to learn more about a company's service, or marvel at their beautiful slideshow.
Its time to get over our love of full screen background images and large slideshows for everyone, and get to what the mobile customers/clients need and want. Don’t get me wrong, these things are still important for desktop users, and those who have time for the full experience on their wide screen 27” iMac, but we need to satisfy both markets and provide solutions for each. There are a few ways we can handle making our websites mobile-ready.
Responsive Web Design
This is a buzz word that has been around for a couple of years, but many have been slow to adopt the practice. It is a great solution if you are developing with mobile in mind from the beginning, but can be more costly to develop. A responsive site exists within the main site and is programmed to adjust to the device which it is being viewed on for the optimum experience. Responsive web design is great when your content should mimic the desktop version, but it is a bit more difficult to reduce un-needed mobile content.
This is a great tool for sites that require limited content or different content delivered via a mobile platform. Typically graphics are limited and the design is fairly simplified. This is a great tool for an ecommerce site. Users usually have the option of using the “Full Site” is they want to. One of the cons to this type of approach is that mobile site exists separately from the main web site and the URL redirects to another domain usually something like mobile.domain.com.
A native app is a standalone application specifically developed to “downloaded” from an app store. Native apps are a good solution for specific functionality that utilizes device-specific features like GPS, a camera, etc. Native apps are many times enhancements to the website experience, like a game or utility. Social networking sites also utilize apps to provide a more targeted experience for the user. App development is usually requires more development time and a larger budget.
Which mobile solution is right for you?
A decision to build a mobile site weighs many factors, budget, timeframe, usability. Here are a few questions to ask yourself when thinking about what type of mobile solution fits your needs. Do you need to target mobile customers with a specific experience, altering architecture or content? Are you starting fresh or planning a redesign of your site? Are you looking to add a utility for your users to use? What is your budget? 4x3 offers both mobile and responsive solutions for its customers.
Contact 4x3, LLC Web Development for more information, we are more than happy to discuss the options and guide you in your decision process.
4x3 designed a dynamic site for the Historic Odessa Foundation that showcases the historical beauty of this uniquely preserved colonial town and its unique museum collection.
One of the website's nicest features is the Virtual Tour. This feature allows a user to explore the grounds at Historic Odessa and learn more information, while planning their next trip.
Custom Drupal CMS
By implementing a custom Drupal content management system, the employees at Odessa can easily upload new images, create news and events, and edit the content on each page. The usability of the CMS has been critical in allowing Historic Odessa to keep visitors up to date with the daily happenings of the Foundation.
With a busy Fall approaching, Historic Odessa Foundation used their site's scheduling program to organize the coming month's events in a clear and informative way. That's just one of the benefits your company will have by using a custom Drupal content management system from 4x3.
The digital world is changing quickly, 4x3 can bring your company up to speed. Whether its a brand overhaul you're looking for, or help managing your social networking sites, 4x3 has the tools and capabilities to give your company the web presence it needs.
4x3 is please to announce their new client, The Historic Odessa Foundation. The project will entail a complete redesign of their current website along with the implementation of a customized Drupal CMS.
The main focus of the new site will be to develop a website for Historic Odessa that provides information for historic preservationists, adult tourists, families and school groups. The site will prominently feature custom photography, provide easy access to information, and include a “virtual tour” that promotes their visual presence.
Historic Odessa Foundation
The mission of the Historic Odessa Foundation is to preserve and encourage the use of it's historic buildings by the general public, students, and scholars in order to learn and appreciate the history, architecture, daily life, and furnishings of Delaware's colonial period with the anticipation that this process will contribute to the quality of life in the town of Odessa and the region.