Privacy Laws Skirted by Seemingly Helpful Companies After recently visiting a competitor's website, we were solicited by the agency to partner with them. We had no prior business relationship with the company prior to going onto their website. They wanted…
As you may or may not be aware, Google made an announcement Wednesday about ending the use of email-address-based systems as identifiers on their properties. We have been closely watching the discussion on Google's announcement. What does this mean for…
Two popular methods of driving industrial traffic to your B2B website are Search Engine Optimization (SEO) and Search Engine Marketing (SEM). Search engines play a major role in building traffic for company websites. Getting found online is key to generating…
CINCINNATI, JULY 10, 2019 – Scott Hasson rejoins Lohre & Associates as vice president of sales and marketing July 1, 2019. Hasson brings his experiences from Corbus, LLC (Dayton) where he performed contract work with Procter & Gamble’s global digital advertising for the past six years from their Cincinnati headquarters. Hasson managed search, social, and programmatic advertising campaigns for the Personal Health Care (PHC) category brands that include: Vicks, Pepto-Bismol, PrilosecOTC, Metamucil, Align and Stressballs vitamin supplement. Immediately prior, Hasson was part of P&G’s global digital operations team managing campaign governance, oversight, analysis and reporting across all of P&G’s global brands.
Cincinnati Ohio has one of the most concentrated LEED building collections in the world. A quick one hour tour will show you who’s a part of this movement.
The tour starts at the Fire Station No. 9 in Avondale. After your breakfast at Sugar N Spice, step out side and notice the gleaming white concrete blocks that keep the building cool in the summer. The solar shades on the south side also help along with the concrete parking areas. The grounds have native and adaptive landscaping. The polished concrete floors are stained blue in the living quarters. We have used the community room for classes to pass the LEED AP exam. The only problem is that you have to evacuate if the house gets a call requiring all the trucks to leave! Green Cincinnati Education Advocacy hosted an educational event for the opening of the station. Mayor Mark Mallory came and addressed the attendees.
As we travel south on Reading Road to the North Avondale Cincinnati Public School we’ll discuss how Ginny Frazier, a teacher at CPS who couldn’t catch a breath in the new schools CPS was building, partnered with Joel Stout, president of the local chapter of the U.S. Green Building Council, to convince CPS to build to LEED standards and along the way got legislation passed in Ohio to require all educational funds reach LEED standards. North Avondale has an active after school green mentoring program run by Ginny Frazier and her Alliance for Interconnection and Connectivity non-profit enviromental advocacy organization. Ohio Leads the Nation with 100 LEED-Certified Public Schools and Hundreds More in the Pipeline,“Ohio is the recognized nationwide leader in sustainable school design, with more than 300 total schools either registered or certified through LEED. On average, Ohio’s first 100 certified schools have been designed to use 35 percent less energy and an average of 37 percent less water than comparable buildings constructed and operated to traditional standards. In addition, these schools provide healthier indoor environments conducive to learning.”
It was built to reflect the look and feel of Roto-Disc‘s product catalog about as closely as could be done with a website. It matched Roto-Disc‘s catalogue so very well that the site itself felt like well-designed and well-planned literature.
Pages were designed, not as a whole in cookie-cutter fashion, but for their purpose. Much like a printed brochure, everything was cohesively-branded as one well-collected work – yet each individual page was custom-tailored to best-present the products and services on that page.
The existing outline was near-perfect. Divisions between pages and topics were pretty spot-on, easy to navigate and easy to follow.
Above: The standard HTML site that was.
It was however, as sites made years ago tend to be: static in size and format, with no mobile menus or even alternate mobile version, and no CMS or other way to dynamically-generate new content – all of which we know to be a problem today for these reasons:
Google now gives better indexing for mobile-friendly sites, and penalizes sites that do not have mobile-friendly design or versions.
Engineers and other decision-makers in the Process Industry cannot easily view these sites while they are out in the field, which is about the time that needs for new equipment tend to arise or happen to be revealed.
Sites not viewed by mobile users do not get shared by mobile users, who make up for an increasingly-large percentage of internet viewers.
Sites that are blogs, WIKIS, or otherwise CMS-driven, have a sizable SEO advantage over most sites that are not. Growing content and fostering inbound links are incredibly-important to SEO. Blogs also enable a company to position itself as an industry leader, and give them the tools to build and maintain better customer relationships.
From This We Created A Short List of Initial Project Goals:
Emulate the general look and feel of Roto-Disc‘s catalog, which we had recently updated for the new product line.
Preserve the image-based menu and allow for more menu items to be added.
Make their site completely responsive and mobile-friendly.
Make navigating and reading the site easy for *all* sizes: large screens, smartphones, *and* tablets.
Build it as a CMS (WordPress in this case) for blogging, scaleable SEO, Inbound Marketing, and ease of content editing.
Include the best SEO plugins available so that the SEO approach can be updated for new search rules and algorithms.
Which Enabled Us to Build This List of Challenges:
The new catalog was rich with very in-depth charts for most every product. Some of these would require tables with at least 15 columns. Large tables are very difficult to display on mobile devices and harder still to display in a size and format that is easy to read and does not require scrolling or turning the device to horizontal view.
We wanted the image-based menu to look good on desktop systems, and did not want to lose it to a simple mobile menu at tablet and mobile sizes.
The image-based menu would require dropdowns so that viewers would have direct access to the spefic product information they were looking for.
We needed dropdown menus to work for desktop, laptop, tablet, and smartphones. Since touch devices do not have a hover state for links, we needed to make the menu expand and contract when clicked, not moused over. This was a major consideration when it came to tablet users, because the image would present somewhat like the desktop version, but with no mouseover capabilities.
We wanted to preserve the image menus even in the mobile version if possible.
Having “sticky” always-on-top navigation is always nice when it comes to desktops and laptops – We wanted to find a way to do this for both the header and standard navigation, as well as the image navigation. We wanted to do this without these items completely consuming the available viewport. We also wanted the sticky image menu to not be sticky on tablets because of limited space.
For tablet users who would lose this sticky navigation, we needed alternatives, such as an easy way to return to the navigation and/or adding navigation also to the footer of the pages.
Wide-open: The site design is based on the Brochure, but made for web, driven by WordPress, with an image menu plugin for ease of editing the image-based menu.
An Additional Consideration: For Desktop users, the image links display an instruction when moused over, letting them know that clicking will open and close the submenu (though the submenu will go also away on its own when no longer in focus).
The benefits of using a plugin and not hard-coding this aspect: All of the above menu and Submenu items can be added, removed, or edited through the control panel.
Two Sticky Menus in motion: The Image menu slides up onto the header when the page is scrolled, and stays – leaving the most important items of both sets of navigation always at the top of the screen for easy access.
Not so sticky: On smaller-sized screens not quite small-enough for the mobile menu the image menu items switch size to fall into three rows of three icons. The menu no longer sticks at the top so that content can be seen when scrolling.
Large Tables: These charts do not seem like they will fit well on a smaller screen… especially not on mobile, not even in landscape aspect. What can be done?
AHA! Jquery to the rescue: By rotating the table header text 90% and re-scaling those cells accordingly, we have a LOT more space to work with when presenting these tables on mobile devices. No scrolling necessary. Some strategic line-breaking in the product number column and Viola!
The Mobile Menu: It seems as though the image menu has been lost… and that would be sad. … but we can do better!
Huzzah!: There is that image menu again, not lost afterall.
The “Open/Close” Instructions: They are pointless here, because you cannot mouseover on a tablet or other mobile device, but they won’t be seen for this reason. Plus: They are still handy if you like keeping your browser window very small.
Tricky: Submenus on an image menu in a mobile menu. I can’t think of any place I have seen this before – actually *many* aspects of this project were something completely new.
Falling in line: Divs and most tables break apart – images set themselves to fill the viewport, and horizontal content becomes vertical in order to keep images large enough to view, also keeping text from being crammed awkwardly on the smaller screen.
Below: You’ll notice the menu does not stick to the top in mobile view. Sticky menus on mobile, especially for sites with many pages, are not a good idea. If the menu extends beyond the viewport, and does not scroll – then the only part of the menu that can be accessed is the part at the top of the screen. This will leave visitors stuck and incredibly frustrated. You can in some cases make another scrollbar just for the navigation, but if it is not seen visitors will think they have arrived at a broken site and move on.
Lohre & Associates, Inc. is an Industrial Marketing Company, serving local companies and in business since 1934. We know industrial businesses, and we offer quality in-person service for Cincinnati-area industrial businesses.
Lohre Cincinnati Industrial NewsletterTips, Pointers, and News for Cincinnati-Area Industrial Leaders
Subscribe to our newsletter for news related to Industrial Machinery and Manufacturing for the Greater Cincinnati area. Offerings include marketing and advertising tips and pointers and well news about industrial companies in our area.