Custom WordPress Plugins with Responsive Website Redesign

January 29th, 2015 Karen Callahan

Congratulations to Your Gift Certificate (YGC) who recently launched its redesigned website! YGC, located in Southborough, MA, is the brainchild of Ken Kahn and Steve Brideau. YGC offers unique marketing programs that put businesses in front of homebuyers at peak purchase time as homebuyers transition into their new homes. Late in 2014,  YGC chose Adventures Online to redesign and develop its website.

Key Business Objectives

  1. Present consistent branding across Your Gift Certificate’s websites
  2. Provide a familiar user experience across platforms (desktops, laptops, tablets, and cell phones) aka a “responsive design”
  3. YGC staff to update website content including clients and industries
  4. Website visitors to view the list of clients sorted by their choice, either by client name or industry, with just one click

Working toward the solution…

(Click images to see larger versions.)

1. Design requirement: Make the .COM website look more like the .BIZ website.

(A major portion of the re-design  had been completed in 2013 when Adventures Online developed YGC’s sister website for consumers.)

before website redesign
.COM website BEFORE redesign
dot-biz-website-design-250Target design similar to .BIZ website

2. Working Mock Up

redesign mockup

  • Logo top left
  • Menu strip below logo and across the page
  • Green strip for header consuming ¾ of the page
  • Right sidebar consuming ¼ of the page
  • Page Title in header on the left
  • Subject-appropriate image in header area
  • Content consuming white space below header area

3a. Final Redesign (desktop version)

During development/client review, the client requested that the header images be right-justified to abut the right sidebar. The orange portion of the top menu bar (right) was abandoned in anticipation adding more pages. Once added, the links to the pages will use the green/white combination of the menu items in order to maintain consistency and balance. The sidebar was filled with at-a-glance contact information, client testimonials and links to whitepaper downloads.

desktop view of redesigned website

3b. Final Redesign Demonstrating Responsive Design

On tablets and cell phones the top menu collapses to the generic menu symbol (of three horizontal lines )

LG G2 with Android version of menu
AFTER redesign: Condensed menu on LG G2 Android cell phone
Cell phone menu overlayAFTER redesign: Menu overlay on LG G2 Android cell phone

Solutions to Satisfy the Business Objectives

The first two business objectives were accomplished via the design as demonstrated above.

To satisfy objective three (YGC staff to update website content including clients and industries),WordPress was chosen as the foundation on which to build the redesigned website. YGC staff were familiar with the ease-of-use of WordPress as a content management system. Further, custom WordPress plugins were developed in order for staff to maintain the list of their clients and industries. The maintenance screens are accessible via the WordPress Dashboard menu.

To satisfy objective four (Website visitors to view the list of clients sorted by client name or by industry with just one click), custom programs were written. Each time the Client page displays, the client-industry combinations are extracted from the WordPress database so that the most up-to-date list is always displaying. There are buttons in the Client and Industry columns. When one of the buttons is clicked, the list of clients re-sorts itself without the page re-loading.

Dynamic Sort Inside WordPress Post

Technology note: Programming included PHP, jQuery and Ajax with MySQL views. The programming is invoked via a custom shortcode on the Client page.

The website recently launched and staff has attended a refresher WordPress training session.
~~~~~~~~~~~~
Thank you, Ken and Steve of Your Gift Certificate for once again trusting Karen Callahan of Adventures Online with your website work! It was wonderfully challenging with a good mix of components!

Rotary International U.N. Day

November 3rd, 2014 Karen Callahan

Saturday, Nov. 1, 2014, I had the privilege of going to the United Nations with other local Rotarians to participate in Rotary Day at the U.N.

“Each year at Rotary UN Day, more than 1300 Rotarians including many Rotary International Directors, Foundation Trustees, past Senior Leaders, and guests come together at UN Headquarters in New York. The program is designed to inspire and educate all participants as well as provide insight into the relationship between Rotary and the United Nations…” (from http://riunday.org/)

It was a wonderfully UPLIFTING and SOBERING experience.

It was uplifting hearing about the positive results of global and single-location programs.

At the Economic Development break out session, the panel spoke about an Entrepreneurship Camp (video) that was held in Port-au-Prince, Haiti in June, 2014. The program included two weeks of business workshops, taught networking skills, and paired each Haitian participant with a mentor with whom he/she will connect periodically via technology.

At the Human Trafficking break out session, the panel spoke about the magnificent progress made in Bihar, India. The programs teach and empower women, at-risk and survivors of slavery and sex trafficking, to make a salary to support themselves.  The audience was introduced to several of the participants in the program via a video. Sadly, we were introduced to a tiny young girl who was later raped and murdered and thrown in a river.

The call to action was to practice conscious buying by purchasing fair trade products. Purchasing fair trade products will raise the demand for products that have been certified to use vendors whose workers are paid legitimate wages and work “regular” hours. The name of one program in Bihar is Nomi Network. Nomi has its own label, and is active in Cambodia as well.

It was sobering to hear the numbers of human beings who still need help, and, in particular the numbers of humans who are being preyed upon by other humans. The statistics related to human trafficking are astounding.

“Approximately 32 million people live in slavery today. This modern day form of slavery is a $99 Billion industry. Said to be the most profitable illicit industry in the world, it is quickly growing and surpassing the illegal sale of drugs and arms.” (from http://NomiNetwork.org)

Staggering information. I will be practicing conscious buying by looking for Fair Trade labels and shopping at the Nomi Network website.

So, it was a surprising day. I expected to network with other Rotarians and learn about programs that I had no knowledge of previously, but, I didn’t expect to return home, still  shaking me in disbelief at the numbers associated with human trafficking and now knowing that my country, the United States of America, the Free country is one of the #1 consumers!

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Here’s some photos of the day:

commencement-speeches

Commencement speeches

entrepreneurship-camp-haiti

Economic Development Panel

karen-callahan-marilyn-perry

Me and Marilyn Perry before session

waiting-for-session-to-start

Fellow Rotarians waiting for session to start

WordPress Website with Redesign

September 5th, 2014 Karen Callahan

Adventures Online has been chosen to redesign the Bodkin & Mason, LLP website. Bodkin & Mason, LLP is a personal injury law firm headquartered in Worcester, MA.

Bodkin & Mason’s primary business requirements include:

  • A fresh, new design that meets the website standards of 2014
  • A website redesign that maintains a consistent look across platforms: desktops, laptops, tablets, and smart phones.
  • Ability for Bodkin & Mason’s staff to update the content, and even add content, and perhaps add pages, at will.
  • A redesign that gives a tone of strength, success, and modern
Bodkin & Mason HTML website

Bodkin & Mason HTML website (click larger before)

Bodkin & Mason’s current website is built using HTML, JavaScript, and PHP (for behind-the-scenes processing of forms). Pull-down menus display as the cursor rolls over main menu items on tabs across the top. Most pages include content with a related images and each page links to other pages in the website.

Website Solution

The redesigned website will be built on a WordPress platform. Building the website on WordPress was an obvious choice in order to accomplish two of Bodkin & Mason’s goals:

  • A website design that maintains a consistent look across platforms: desktops, laptops, tablets, and smart phones.
    This is called a responsive design. The consistent look across platforms is accomplished via the underlying infrastructure of the design and the lengthy and complicated style sheets that are built into the most recent versions of WordPress.
  • Ability for Bodkin & Mason’s staff to update the content, and even add content, and perhaps add pages, at will.
    The WordPress package comes with built-in tools for maintaining content; content on pages and content in a blog. Staff use a simple dashboard of icons to bold, italicize, and indent content, create bulleted and numbered lists, upload photos and PDFs, create  links, and more!

Bodkin & Mason’s other two goals are accomplished via the new website design.

Bodkin Mason WordPress website

Bodkin & Mason WordPress website (click larger after)

  • A fresh, new design, that meets the website standards of 2014
    • The width of the website page has been enlarged in order to match popular 2014 designs
    • The font has been changed from a stiff Times New Roman to a more modern font
    • A popular slide-out search button was added to the right of the top menu. The search box does not display until the button is clicked. Then it displays overlaying the design below the top menu. Upon clicking “Enter”, it scrolls away and the search results page displays.
    • The top menu still uses pull-down menus, but the style of the menus and the displays upon roll over and clicking have been updated to be consistent with popular menus on modern websites.
  • A redesign that gives a tone of strength, success, and modern
    • A tone of “strong, successful and modern organization” has been accomplished via the fonts, colors, images, components and functionality of the newly designed website. Prior to the design concept being created, research was done with regard to the look-n-feel and functionality of the websites of other successful personal injury law firms. This new design for Bodkin & Mason aligns with and exceeds the website offerings of those law firms.
    • Components that contribute to giving that tone are: the large graphic background, silhouette image of Bodkin & Mason on home page, use of deep, rich blue color, use of modern components like the slide-out search

The newly designed website is currently being built on a WordPress platform. More when the website redesign is launched!

More WordPress Editor Shortcuts

July 23rd, 2014 Karen Callahan

Computer keyboardThe last post introduced WordPress Editor Shortcuts that use the CTL key + a letter (Command key + letter on a MAC). This post continues with the same theme of using keyboard shortcuts while blogging with WordPress. These keyboard shortcuts use the Alt + Shift keys to signal the command.

Here’s a list of the Keyboard Shortcuts that use the ALT + SHIFT + Letter:

What do you want to do?

  1. Align Center
  2. Align Left
  3. Align Right
  4. Distraction Free Writing (Full screen)
  5. Help
  6. Insert Image
  7. Insert Link
  8. Insert More tag
  9. Insert Page Break tag
  10. Justify Text
  11. List – Bullets
  12. List – Numbers
  13. Spell – Check
  14. Strikethrough Text
  15. Quote
  16. Remove Link

Letter

  1. c
  2. l
  3. r
  4. w
  5. h
  6. m
  7. a
  8. t
  9. p
  10. j
  11. u
  12. o
  13. n
  14. d
  15. q
  16. s

More WordPress Keyboard Shortcuts

WordPress Editor Shortcuts

July 21st, 2014 Karen Callahan

When you start out blogging with WordPress, using the visual editor and icons on top of the editing box are easy and convenient. When you become a power blogger and blog from different devices like your phone, your tablet, and your desktop, you get in a groove and don’t want to lift your fingers from the keyboard to get the mouse. It is at this point that it becomes easier to use the editor shortcuts.

Here’s a list of the Keyboard Shortcuts that use the CTL key (Command key on a  MAC):

What do you want to do?

  1. Bold
  2. Copy
  3. Cut
  4. Italicize
  5. Link: Insert/Edit
  6. Paste
  7. Redo
  8. Select All
  9. Underline
  10. Undo

Letter

  1. b
  2. c
  3. x
  4. i
  5. k
  6. v
  7. y
  8. a
  9. u
  10. z

More WordPress Keyboard Shortcuts