skip to Main Content

Welcome

Our new location is in Blue Ash Ohio. We moved our marketing agency from Cincinnati's Over the Rhine in December of 2019. If you would like to arrange a meeting, please call us at (513) 463-3429. In order to keep our employees healthy and safe, walk-ins are not currently welcome.

Get In Touch

Phone: (513) 463-3429
Address: 11223 Cornell Park Drive Suite 301, Blue Ash Ohio 45242

Our Location

Lohre Industrial Marketing Location

Lohre & Assoc. Welcomes Noted Artist and Web Designer Myke Amend to its Team

Web Design and Web Development Guru, Grphic Artist and Graphic Designer, Myke AmendCincinnati native Myke Amend recently joined Lohre & Associates, the Over-the-Rhine-based marketing communications agency, fulltime as Web Design & Internet Development creative officer. Amend has worked with Lohre for the past 10 years as a web designer and web developer on a freelance basis from Grand Rapids, Mich.

Amend, who returns to Cincinnati for the new position, brings two decades experience as a graphic designer, web designer, programmer, and Internet developer, working on a variety of business-to-business and consumer accounts. Additionally, Amend is an illustrator, engraver and painter, whose work has been commissioned by other artists in film, music and literature.

“We’re very excited to have Myke working with us,” says Chuck Lohre, president, “He brings the creativity and skills of a fine artist, with his vast digital expertise. It’s a perfect combination for our agency, which is known for creative solutions to the wide variety of branding, strategy and digital implementation projects we handle for our clients.”

Adds Amend, “It’s gratifying to know Chuck and his team of designers, writers, strategists and brand experts welcome the years of experience I bring from fine arts with the in-demand digital know-how. I’m excited to develop ways we can continue to solve challenges for the companies who have looked to Lohre for ways to set them apart from their competitors.”

Amend’s illustrations have been featured in “Weird Tales” magazine, “Beneath Ceaseless Skies,” “Gatehouse Gazette,” “Kilter” magazine, “Gothic Beauty” magazine, the art collection “Gothic Art Now,” the art collection “Vampire Art Now,” the “Airship Pirates RPG” and many more print publications as well as popular online resources such as “IO9,” “Elfwood,” “Dark Roasted Blend,” “Fantasy Art” magazine, “Lines and Colors,” “Brass Goggles,” “Gawker, “BoingBoing.” His work has also been featured on the sites of literary creatives including Warren Ellis, Thomas Ligotti, Neil Gaiman and Clive Barker.

Additionally Dexter Palmer, Cherie Priest, The Pickled Brothers Sideshow, Vernian Process, Veronique Chevalier, the Borgia Popes, Automaton, Abney Park and others have commissioned Amend for works. He is often a special guest of art, horror and steampunk conventions. He also works in sculpture and kinetic art, most notably having created a 4000-lb. solar and wind-powered rotating mural and 3D work called “the Infernal Device,” which was displayed at the Gerald R. Ford Museum for ArtPrize 2011.

In between Myke has filled his time working on ModelARestorers.org, as sole designer, webmaster, and server admin of a site serving 180 chapters Worldwide, creating advertising art for Disney Fine Art Gallery, and of course working for Lohre and Associates, for whom he now works full time.

Read More

GREEN HOME TOURS: REVEALING WHAT’S POSSIBLE

Event highlights home technology that saves money, helps environment. Published online March 16, 2015. Published in the paper March 20, 2015.

Carrie Blackmore Smith 

 

Wright Green Home, Cincinnati Enquirer photo by Meg Vogel
Jaws dropped around the modern kitchen in the two-story home in Mount Airy.

Visitors were there for a tour of the energy-efficient three-bedroom, three-bath home – equipped with an office, woodshop and garage. They’d just learned that heating and cooling the house cost only $300-$400a year.

“You want to go see it?” owner Edward Wright asked, referring to the geothermal system in the basement which pulls heat from down in the ground in the winter and circulates cooler temps up from below in the summer.

Heads vigorously nodded. And Wright led the group into the basement to see how green energy works on a small-scale.

There are no gas lines running to the airtight home, architect Wright continued to explain, everything runs on electric. Much of the cost will be made up in energy savings and tax abatement, he said.

The Wrights were the latest homeowners to open their doors to a tour started at the end of last year by Chuck Lohre, a marketing professional and Clifton resident with a passion for green living.

Lohre is a volunteer and former board member of the local chapter of the U.S. Green Building Council, an organization on a mission to “transform the way buildings and communities are designed, built and operated, enabling an environmentally and socially responsible, healthy and prosperous environment that improves the quality of life,” according to its website.

These tours show the public what is possible, Lohre said, and they help individuals understand what sort of tax breaks are available when going the green route.

Brad Cooper’s tiny home – a winner of a $100,000 grant from People’s Liberty – is on the tour in November and a farmhouse in Verona, Kentucky, where a woman is growing edamame will be featured in September.

On the first tour, visitors saw the Kinsman home in Northside. LEED Silver certified, it was built with a tight form and heated with solar hot water panels on the roof, Lohre said, which send warmth into the floor on the first and second stories of the house. There is no furnace.

“I’m trying to start a movement for the general public to learn that there are better ways to live – and your home and community should be a central part of it,” Lohre said. “I have gotten to know just about all of the architects, engineers and developers in the region but the public still wasn’t learning about these better ways to plan, build and live.”

Spots are still available for the free tours coming up this year. To register, email , or call, 513-260-9025.

The tours include: 

The Nutter residence in Mount Carmel, March 21 is fully booked. 

Imago for the Earth Conscious Community in Price Hill, April 25, 9-11 a.m. 

The Fritz residence at Sun Sugar Farms in Verona, Kentucky, Sept. 12, 10 a.m. to noon 

The Fischer residence in Milford, Oct. 3, 10 a.m. to noon 

Brad Cooper’s tiny OTR home, Nov. 14, 10 a.m. to noon.

Wright Green Home, Cincinnati Enquirer photo by Meg Vogel

Architect Edward Wright designed his Mt. Airy home three years ago and presented it at the Green Homes Tour in early March. 

THE ENQUIRER/MEG VOGEL

Read More

Wright Residence Green Home Tour Feb 21

Wright_Masthead-630x260

Wright Residence – 
Free, Green Home Tour
Feb 21
10 am till Noon

This Mt. Airy / Northside home has achieved the U.S. Green Building Council’s Leadership in Energy and Environmental Design (LEED) Gold Certification They should save about $40,000 over the additional five year period of the tax savings, easily paying for the approximate $20,000 in better materials, systems and fees. This home is designed so the owners can age-in-place, accessibility and adaptability are planned into the project. Zero-step entry, Doors are wider, wider hallways and bathrooms.

Wright_3-_630x260

Thanks to Owner/Architect Edward Wright of Wright Design for inviting us into his home. Attendees receive a great swag bag including info about the local U.S. Green Building Council’s Green Living Member Circle, edible Ohio Valley Magazine, Park+Vine, Cincinnati Metro, Building Value and a gift basket raffle chance with items from Method Home, edible Ohio Valley Magazine Subscription, Cresbi Crate and more.

Please join us at the Wright Residence Feb 21, 2015 from 10 till Noon – There’s no charge for the tour, max of 20 people, registration required, email [email protected] or call 513-260-9025 to register. Address will be provided after you register. 

Other tours for 2015: 
• Mar 21, 10 till Noon – Nutter Residence, Mt. Carmel, OH
• Apr 25, 9 till 11 am – Imago for the Earth Conscious Community, Price Hill, Cincinnati, OH
• May 16, 10 till Noon – Boulter Residence, Frank Lloyd Wright Architect, Clifton, Cin., OH
• Sep 12, 10 till Noon – Fritz Residence, Sun Sugar Farms, Verona, KY
• Oct 3, 10 till Noon – Fischer Residence, Milford, OH
• Nov 14, 10 till Noon – Brad Cooper Tiny Home, Cincinnati, OH

Sincerely, Chuck Lohre, Chair Green Living Member Circle U.S. Green Building Council Cincinnati Regional Chapter

There’s no such thing as a free lunch . . .,“Krista Atkins Nutter, Architect.

Register for the Free Wright Residence LEED Gold Green Home tour Feb 21. Be amazed, get a great swag bag and possibly win the raffle!
Read More

Redesigning a Website to be Mobile-Friendly on a Budget


Website Redesign Does Not, Should Not Always Mean Replacement:

We all know how increasingly important having a mobile-friendly website has become to search engine placement, but for many reasons, a company might not be ready, or able to do a complete overhaul of an antiquated website or website design.

I am going to go over a few ways a company can hold onto the site they have (as well as a few reasons they might want to) while quickly and inexpensively bringing their site into the 2010s with mobile-friendly styling.

Common reasons not to upgrade a website:

  • It is not in the budget: This might because money was already recently put into a new website design, or that the ideal and perfect website for the company will require more capital than is currently available.
  • There isn’t time: Funding aside, major web development tends to require time from the client for gathering promotional literature and other collateral materials, approving designs, flow charts/site maps, discussions on what the new website should be able to do. When it comes to building a new website, some level of collaboration is necessary.
  • Google and other search engines really like old sites: It is true that the older a website is, the more reliable the website appears to search, but one must also consider that regularly-updated sites are also favorable. The perfect mix, we’ve found, is having a site with an old domain, and regularly updating it.

Rome wasn’t built in a day – Good websites also take time.

The very best sites are not made in a day, or even a month – The best websites are the product of years or more of regular updates and upgrades, close attention to not creating broken links in the process, and minor design improvements made regularly. This is especially true when it comes to SEO.

Coming from an artist who has spent over 20 years as a web developer, over a decade more doing graphic design, and an entire lifetime creating fine art: There really is something to be said for works that have had a lot of time, passion, and care for detail put into them. This level of attention to detail does not happen with purchased templates, it does not come with even the largest budget for website redesign. Sure, it can begin there, but the very best websites come from many, many minor changes.

As important as it is to regularly update your CMS (content management system) software, update plugins, check your site’s and servers security, check for broken links, create new blog posts, create new pages, create other content, check directories and other inbound links – making regular minor changes to design, function, and architecture is what brings a website ever-closer to perfect.

“Minor changes”?? Making our website mobile-friendly is a huge undertaking!!

It is easy to think this. Your site might have a lot of pages… hundreds, even thousands. You might even have several different templates for several different types of pages within your site. Your site might even be built on an older/outdated CMS, a long-extinct version of one, or something completely proprietary and unsupported **

Regardless of the type of server you are running on, whether your pages are php, asp, HTML, regardless of what CMS you are using or how old your site is, the end result is that all web site pages are outputted as some sort of HTML, the language a web-browser reads to present a web page for your viewing, and all HTML is, or rather should be formatted with stylesheets – which are all some form of CSS.

Restyling/Redesigning the website to work well with mobile from here is mostly a matter of adding of taking these steps:

  • Adding the viewport meta tag to the header is the first thing I do: Re sizing my browser, I can see how the site and its pages are going to look at different widths, but for a lot of mobile devices the site will not present the same without this tag, which can be easily forgotten.
  • Use media queries within the css to make the web pages and their elements behave differently at different screen sizes: This is mostly a matter of making sure all elements (images, layers, paragraphs) have a max-width of 100% or less (including their margins, borders, and sometimes padding), and that their contents will not overflow those boundaries (by declaring how to treat overflow).
  • Make sure things fall properly into line: Images, layers, and paragraphs ideally should, most-often each take up the full width of a mobile device. I tend to make elements expand to this size, then add  “clear: both” and “float: none” to their styling.
  • Make sure they fall into the proper order: Things that were floating left end up above the elements that were to their right, this is not always the best order for viewing. Sometimes element a, b, and c need to be read top-to-bottom as c, b, and a. To address this, I tend to go the Flex/ Flex-flow/Order method, but this and a number of other methods are covered in this stack overflow thread.
  • Make a simple mobile menu/thumb menu: You need only use CSS to do this. A very simple drop down thumb menu can be found here, on Medialoot. Sometimes, especially if there are few pages, it is even more simple. For both Dynamic Industries (large scale machining) and Vertiflo Pump Company (vertical submersible centrifugal pumps), I didn’t even make a thumb menu – I simply made it so that menu items fell into new rows, evenly, and gave them a layered tab appearance on mobile devices.

Mobile-friendly Website redesign for Dynamic IndustriesMobile-friendly Website redesign for Dynamic Industries

Above (left and right) The pages of this standard HTML site were given a mobile-friendly re-design through simple CSS styling changes. A mobile menu was also added simply by re-styling the existing links/navigation

Foreseeable difficulties:

For a lot of older, really older sites, or for sites that were designed by people with limited design knowledge, or no design knowledge at all, these are some common snags run into:

  • The website, site pages, or site content were created in MS Word: The result of this is a massively huge file, horribly coded, and especially badly-coded for trying to restyle with CSS. There is a large amount of proprietary code in there, and unique styles are applied to most every element, if not each and every character. There are a number of ways to clean this up, I am not going to recommend any of them in particular (but advise you try several of the free ones first).
  • There is no CSS style sheet, and there are no CSS styles applied: Actually, often this is even better – it means that you will not be fighting competing style declarations and addressing most things element by element. CSS will override HTML in most cases (unless there is inline CSS). Just attach a stylesheet to the pages or template and work from there.
  • There are inline styles for a number of elements or for every element: I really hate to use it, but if a very object-specific CSS declaration won’t do, you can use “!important” at the end of your declarations to override these. Use them sparingly. If all else fails, any good text editor with “find/replace” can possibly be used (locally) to remove these as you find them. If these inline styles are used within post and page content, a good find/replace plugin might be available for your CMS. If it is WordPress, I use “Better Search/Replace“.
  • Tables??… who still uses tables?? A decade after most designers should have stopped using them, they are still a fairly common thing. Sometimes, they are even necessary… at least until Mozilla Firefox starts handling flex correctly. Though tables are something to be avoided for layout, they are still handy as far as what they were intended for: Displaying specs and data. Generally, if tables are used to layout content, I break them apart with “display: block; overflow: hidden; float: none; clear: both;” and then work on the styling from there. Since a majority of our clients are Industrial, and more specifically: in the process industry tables filled with data are pretty common. I use CSS to break lines and to rotate the table headers at smaller sizes, like so (LEFT/top: normal website view of the table, RIGHT/bottom: Mobile website view of the table):

Website Design: Table Rotation example 1web-design-table-rotation.png

 

So… Why are we doing this again?

1. Search engines now favor mobile-friendly websites.

2. Content that is mobile-friendly reaches a wider audience/is more accessible.

3. Content that is mobile-friendly is more likely to be shared, if only because of the wider audience provided by being mobile-friendly and having better search placement.

4. It is actually not as hard as it might seem:

I know it might seem like a lot of work, all of these steps might not be necessary, and taking these steps could get help your website by in the mean time, and possibly for a while – maybe much longer if the website is regularly kept up to date with internet standards. It is also often easier, and more cost-effective to maintain a website than it is to completely replace it. Making your website mobile-friendly will put you back on the right path.

These changes, are changes that should be applied over a handful of days, and improved upon as time goes by. If you do not have a web designer who is capable of doing this in this time frame, we’d be happy to help – Just contact us.

Making a website mobile-friendly is very important in that Google and other search providers use this as a standard when giving search placement. If you also consider that an increasing amount of website visitors are using cellphones or other mobile devices, and that this portion of visitors and potential visitors is fast-becoming the majority, you know that not having a mobile-friendly site is like being on only a very small portion of the internet. It is not a very nice thing to do to yourself, your company, or all those who might wish to be connected with your product or service.

 

 

 


** In the latter case: Yes, I would suggest some sort of overhaul – because any CMS or plugin version even an hour old might have some exploit or other vulnerability that will end in your site being loaded with malware and pharmaceutical ads, if it is not already. I won’t go into that here, You can read more about that here, for the sake of this article I am going to assume your site is secure and sound against these things.

Read More

Mobile Friendly Website on a Budget


Website Redesign Does Not, Should Not Always Mean Replacement:

We all know how increasingly important having a mobile-friendly website has become to search engine placement, but for many reasons, a company might not be ready, or able to do a complete overhaul of an antiquated website or website design.

I am going to go over a few ways a company can hold onto the site they have (as well as a few reasons they might want to) while quickly and inexpensively bringing their site into the 2010s with mobile-friendly styling.

Common reasons not to upgrade a website:

  • It is not in the budget: This might because money was already recently put into a new website design, or that the ideal and perfect website for the company will require more capital than is currently available.
  • There isn’t time: Funding aside, major web development tends to require time from the client for gathering promotional literature and other collateral materials, approving designs, flow charts/site maps, discussions on what the new website should be able to do. When it comes to building a new website, some level of collaboration is necessary.
  • Google and other search engines really like old sites: It is true that the older a website is, the more reliable the website appears to search, but one must also consider that regularly-updated sites are also favorable. The perfect mix, we’ve found, is having a site with an old domain, and regularly updating it.

Rome wasn’t built in a day – Good websites also take time.

The very best sites are not made in a day, or even a month – The best websites are the product of years or more of regular updates and upgrades, close attention to not creating broken links in the process, and minor design improvements made regularly. This is especially true when it comes to SEO.

Coming from an artist who has spent over 20 years as a web developer, over a decade more doing graphic design, and an entire lifetime creating fine art: There really is something to be said for works that have had a lot of time, passion, and care for detail put into them. This level of attention to detail does not happen with purchased templates, it does not come with even the largest budget for website redesign. Sure, it can begin there, but the very best websites come from many, many minor changes.

As important as it is to regularly update your CMS (content management system) software, update plugins, check your site’s and servers security, check for broken links, create new blog posts, create new pages, create other content, check directories and other inbound links – making regular minor changes to design, function, and architecture is what brings a website ever-closer to perfect.

“Minor changes”?? Making our website mobile-friendly is a huge undertaking!!

It is easy to think this. Your site might have a lot of pages… hundreds, even thousands. You might even have several different templates for several different types of pages within your site. Your site might even be built on an older/outdated CMS, a long-extinct version of one, or something completely proprietary and unsupported **

Regardless of the type of server you are running on, whether your pages are php, asp, HTML, regardless of what CMS you are using or how old your site is, the end result is that all web site pages are outputted as some sort of HTML, the language a web-browser reads to present a web page for your viewing, and all HTML is, or rather should be formatted with stylesheets – which are all some form of CSS.

Restyling/Redesigning the website to work well with mobile from here is mostly a matter of adding of taking these steps:

  • Adding the viewport meta tag to the header is the first thing I do: Re sizing my browser, I can see how the site and its pages are going to look at different widths, but for a lot of mobile devices the site will not present the same without this tag, which can be easily forgotten.
  • Use media queries within the css to make the web pages and their elements behave differently at different screen sizes: This is mostly a matter of making sure all elements (images, layers, paragraphs) have a max-width of 100% or less (including their margins, borders, and sometimes padding), and that their contents will not overflow those boundaries (by declaring how to treat overflow).
  • Make sure things fall properly into line: Images, layers, and paragraphs ideally should, most-often each take up the full width of a mobile device. I tend to make elements expand to this size, then add  “clear: both” and “float: none” to their styling.
  • Make sure they fall into the proper order: Things that were floating left end up above the elements that were to their right, this is not always the best order for viewing. Sometimes element a, b, and c need to be read top-to-bottom as c, b, and a. To address this, I tend to go the Flex/ Flex-flow/Order method, but this and a number of other methods are covered in this stack overflow thread.
  • Make a simple mobile menu/thumb menu: You need only use CSS to do this. A very simple drop down thumb menu can be found here, on Medialoot. Sometimes, especially if there are few pages, it is even more simple. For both Dynamic Industries (large scale machining) and Vertiflo Pump Company (vertical submersible centrifugal pumps), I didn’t even make a thumb menu – I simply made it so that menu items fell into new rows, evenly, and gave them a layered tab appearance on mobile devices.

Mobile-friendly Website redesign for Dynamic IndustriesMobile-friendly Website redesign for Dynamic Industries

Above (left and right) The pages of this standard HTML site were given a mobile-friendly re-design through simple CSS styling changes. A mobile menu was also added simply by re-styling the existing links/navigation

Foreseeable difficulties:

For a lot of older, really older sites, or for sites that were designed by people with limited design knowledge, or no design knowledge at all, these are some common snags run into:

  • The website, site pages, or site content were created in MS Word: The result of this is a massively huge file, horribly coded, and especially badly-coded for trying to restyle with CSS. There is a large amount of proprietary code in there, and unique styles are applied to most every element, if not each and every character. There are a number of ways to clean this up, I am not going to recommend any of them in particular (but advise you try several of the free ones first).
  • There is no CSS style sheet, and there are no CSS styles applied: Actually, often this is even better – it means that you will not be fighting competing style declarations and addressing most things element by element. CSS will override HTML in most cases (unless there is inline CSS). Just attach a stylesheet to the pages or template and work from there.
  • There are inline styles for a number of elements or for every element: I really hate to use it, but if a very object-specific CSS declaration won’t do, you can use “!important” at the end of your declarations to override these. Use them sparingly. If all else fails, any good text editor with “find/replace” can possibly be used (locally) to remove these as you find them. If these inline styles are used within post and page content, a good find/replace plugin might be available for your CMS. If it is WordPress, I use “Better Search/Replace“.
  • Tables??… who still uses tables?? A decade after most designers should have stopped using them, they are still a fairly common thing. Sometimes, they are even necessary… at least until Mozilla Firefox starts handling flex correctly. Though tables are something to be avoided for layout, they are still handy as far as what they were intended for: Displaying specs and data. Generally, if tables are used to layout content, I break them apart with “display: block; overflow: hidden; float: none; clear: both;” and then work on the styling from there. Since a majority of our clients are Industrial, and more specifically: in the process industry tables filled with data are pretty common. I use CSS to break lines and to rotate the table headers at smaller sizes, like so (LEFT/top: normal website view of the table, RIGHT/bottom: Mobile website view of the table):

Website Design: Table Rotation example 1web-design-table-rotation.png

 

So… Why are we doing this again?

1. Search engines now favor mobile-friendly websites.

2. Content that is mobile-friendly reaches a wider audience/is more accessible.

3. Content that is mobile-friendly is more likely to be shared, if only because of the wider audience provided by being mobile-friendly and having better search placement.

4. It is actually not as hard as it might seem:

I know it might seem like a lot of work, all of these steps might not be necessary, and taking these steps could get help your website by in the mean time, and possibly for a while – maybe much longer if the website is regularly kept up to date with internet standards. It is also often easier, and more cost-effective to maintain a website than it is to completely replace it. Making your website mobile-friendly will put you back on the right path.

These changes, are changes that should be applied over a handful of days, and improved upon as time goes by. If you do not have a web designer who is capable of doing this in this time frame, we’d be happy to help – Just contact us.

Making a website mobile-friendly is very important in that Google and other search providers use this as a standard when giving search placement. If you also consider that an increasing amount of website visitors are using cellphones or other mobile devices, and that this portion of visitors and potential visitors is fast-becoming the majority, you know that not having a mobile-friendly site is like being on only a very small portion of the internet. It is not a very nice thing to do to yourself, your company, or all those who might wish to be connected with your product or service.


** In the latter case: Yes, I would suggest some sort of overhaul – because any CMS or plugin version even an hour old might have some exploit or other vulnerability that will end in your site being loaded with malware and pharmaceutical ads, if it is not already. I won’t go into that here, You can read more about that here, for the sake of this article I am going to assume your site is secure and sound against these things.

{{cta(‘da79168e-87d6-4dd7-9751-d71d731e54a9’)}}

Read More

Mobile-Friendly Website Design with an Image-Based Menu

When Lohre and Associates began this project, Roto-Disc, Inc. had a standard HTML web site that they liked, as much as we did, for a number of good reasons:

  • 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.

Web Design for Rotodisc CincinnatiAbove: 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.

Another need to consider was that Roto-Disc‘s Product line would soon be expanding. In addition to the Heavy-Duty Spherical Valves, Lighter-Weight Spherical Valves, Sanitary Spherical valves, Inflatable Seal Spherical Valves, Heavy-Duty Clean Flow Diverters, and Airlock/Double-Dump Valves Roto-Disc already had a new section for Flange Adaptors, Wedge Inserts, and Stub Adaptors that needed to fit into the current image-based menu. Soon Roto-Disc would need to also add Process Transitions, and Splitters/Convergers, as well as the Flange Adaptors to this small swatch of internet real-estate.

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.

Our Solutions:

Web Design /Website Design for RotoDisc Cincinnati

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.

Web Design / Website Design for Rotodisc Cincinnati

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).

Mobile-friendly Web Design / Website Design for Rotodisc Cincinnati

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.

Mobile-friendly Web Design / Website Design for Rotodisc, Cincinnati

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.

Mobile version of Web Design / Website Design for Rotodisc Cincinnati

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.

Web Design / Website Design Tables for Rotodisc Cincinnati

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?

Mobile width view of Web Design / Website Design for Rotodisc Cincinnati

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!

Mobile width view 2 of Web Design / Website Design for Rotodisc Cincinnati

The Mobile Menu: It seems as though the image menu has been lost… and that would be sad. … but we can do better!

Mobile width view of Nav menu for Web Design / Website Design for Rotodisc Cincinnati

Huzzah!: There is that image menu again, not lost afterall.

Mobile menu of Web Design / Website Design for Rotodisc Cincinnati

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.

Mobile menu view for Web Design / Website Design for Rotodisc Cincinnati

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.

Mobile width view 3 of Web Design / Website Design for Rotodisc Cincinnati

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.

Mobile width view 4 of Web Design / Website Design for Rotodisc Cincinnati

{{cta(‘da79168e-87d6-4dd7-9751-d71d731e54a9’)}}

Read More
Back To Top
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.