[vc_row full_width=”stretch_row_content_no_spaces” equal_height=”yes” css=”.vc_custom_1580147359404{margin-top: 0px !important;margin-bottom: 0px !important;border-top-width: 0px !important;border-bottom-width: 0px !important;padding-top: 200px !important;padding-bottom: 200px !important;background-image: url(https://derricksondesign.com/wp-content/uploads/2020/01/PandS-full-spread-template.jpg?id=25283) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}”][vc_column][/vc_column][/vc_row][vc_row full_width=”stretch_row_content_no_spaces” gap=”25″ equal_height=”yes” css=”.vc_custom_1580147390864{padding-right: 10% !important;padding-left: 10% !important;}”][vc_column width=”1/2″ css=”.vc_custom_1580147429188{margin-top: 0px !important;margin-bottom: 0px !important;border-top-width: 0px !important;border-bottom-width: 0px !important;padding-top: 10% !important;padding-bottom: 10% !important;}”][vc_column_text css=”.vc_custom_1580148115497{margin-top: 0px !important;margin-bottom: 0px !important;border-top-width: 0px !important;border-bottom-width: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;}”]

PEN AND STEEL WEBSITE:

[/vc_column_text][vc_separator align=”align_left” border_width=”2″ el_width=”50″][vc_column_text css=”.vc_custom_1612112987939{margin-top: 0px !important;margin-bottom: 0px !important;border-top-width: 0px !important;border-bottom-width: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;}”]

Tony J. Marvin and I have known each other for a number of years and have worked a couple of small projects together in the past.  He is an excellent storyteller and well read in many subjects! Many of his friends have encouraged him to explore this skill and a few years back, he took the steps to self-publish his first novel, “Betrayal: Darkness Engulfs the Knight.”  Knowing my background as a graphic artist and book designer, Tony initially asked me to illustrate his first book cover and to illustrate some of the characters in the novel. As the project came closer to completion, he realized that he needed a larger presence online from which to sell the book.  I was asked to build his author website.

[/vc_column_text][/vc_column][vc_column width=”1/2″ css=”.vc_custom_1580147487639{margin-top: 0px !important;margin-bottom: 0px !important;border-top-width: 0px !important;border-bottom-width: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;}”][vc_single_image image=”25282″ img_size=”full” alignment=”center”][/vc_column][/vc_row][vc_row full_width=”stretch_row_content_no_spaces” gap=”25″ equal_height=”yes” css=”.vc_custom_1580148242656{margin-top: 0px !important;margin-right: 7% !important;margin-bottom: 0px !important;border-top-width: 0px !important;border-bottom-width: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;padding-left: 7% !important;}”][vc_column width=”2/3″][vc_column_text css=”.vc_custom_1580147599805{margin-top: 0px !important;margin-bottom: 0px !important;border-top-width: 0px !important;border-bottom-width: 0px !important;padding-top: 10% !important;padding-bottom: 10% !important;}”]

His goals were to have a platform to not only talk about and sell his novels, but also to explore his hobby in blacksmithing.  Blacksmithing was intended to be a sister subject to the Knights Templar chronicles, providing a hands on experience to learn about the time period by building weapon and armor that would have been employed.

I took this opportunity to put a new skill that I had been learning to the test.  My plan was to streamline users from introduction, to novel brief, to point-of-sale.  Each page achieves this through keyword links that lead to the Amazon sale or by offering a call-to-action at the end of each page.  This assures that a user will never have to navigate more than 1-2 pages before having the option to outlink to the sale, which hopefully cuts down on bounce rate!

The website was created with a mobile-first approach.  Meaning that I designed the layout to work specifically with small devices, such as cell-phones, first, by using media-queries and setting the viewport to device width.  Using this method, as each query stepped up in device size, I was able to make minor tweaks which would adjust the layout and function of the design which optimized the experience for those specific users.

[/vc_column_text][/vc_column][vc_column width=”1/3″][vc_column_text css=”.vc_custom_1580147547995{margin-top: 0px !important;margin-bottom: 0px !important;border-top-width: 0px !important;border-bottom-width: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;}”]

Tablet Portrait Screen showing touch drop-menu

[/vc_column_text][vc_single_image image=”25277″ img_size=”full” onclick=”custom_link” img_link_target=”_blank” link=”http://penandsteel.com/about/”][/vc_column][/vc_row][vc_row full_width=”stretch_row_content_no_spaces” gap=”25″ equal_height=”yes” css=”.vc_custom_1580146657686{margin-top: 0px !important;margin-right: 10% !important;margin-bottom: 0px !important;margin-left: 10% !important;border-top-width: 0px !important;border-bottom-width: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;}”][vc_column][vc_row_inner css=”.vc_custom_1580147719642{margin-top: 0px !important;margin-bottom: 0px !important;border-top-width: 0px !important;border-bottom-width: 0px !important;padding-top: 0px !important;padding-right: 7% !important;padding-bottom: 0px !important;padding-left: 7% !important;}”][vc_column_inner width=”1/3″ css=”.vc_custom_1580147675218{padding-right: 2% !important;padding-left: 2% !important;}”][vc_single_image image=”25278″ img_size=”full” onclick=”custom_link” link=”http://penandsteel.com/blacksmithing/”][/vc_column_inner][vc_column_inner width=”1/3″ css=”.vc_custom_1580147688003{padding-right: 2% !important;padding-left: 2% !important;}”][vc_single_image image=”25279″ img_size=”full” onclick=”custom_link” link=”http://penandsteel.com/blacksmithing/”][/vc_column_inner][vc_column_inner width=”1/3″ css=”.vc_custom_1580147697807{padding-right: 2% !important;padding-left: 2% !important;}”][vc_single_image image=”25280″ img_size=”full” onclick=”custom_link” link=”http://penandsteel.com/home/”][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row full_width=”stretch_row_content_no_spaces” gap=”25″ equal_height=”yes” css=”.vc_custom_1580146657686{margin-top: 0px !important;margin-right: 10% !important;margin-bottom: 0px !important;margin-left: 10% !important;border-top-width: 0px !important;border-bottom-width: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;}”][vc_column][vc_row_inner css=”.vc_custom_1580147797147{margin-top: 0px !important;margin-bottom: 0px !important;border-top-width: 0px !important;border-bottom-width: 0px !important;padding-top: 0px !important;padding-right: 10% !important;padding-bottom: 0px !important;padding-left: 10% !important;background-color: #ededed !important;}”][vc_column_inner css=”.vc_custom_1580147855095{margin-top: 0px !important;margin-bottom: 0px !important;padding-top: 5% !important;padding-bottom: 5% !important;}”][vc_column_text]

A lot was learned after the first generation of the build.  Originally, I had created a separate CSS document for each of the pages.  Talk about an organization nightmare! With better planning and more experience, I would have been better off to use less class attributes and more parent/child properties.  By the second (current) generation of the site, I had re-organized the CSS documents into one master document and cut back on redundancies.

Eventually, I would like to completely redesign the website using new skills that I have learned.  I would like to create a more “interactive” experience that invites the user in new ways. Through use of javascript animation and storyboarding, the user will enter a 13th century world as they navigate through the content of the website!

[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row full_width=”stretch_row_content_no_spaces” gap=”25″ equal_height=”yes” css=”.vc_custom_1580146657686{margin-top: 0px !important;margin-right: 10% !important;margin-bottom: 0px !important;margin-left: 10% !important;border-top-width: 0px !important;border-bottom-width: 0px !important;padding-top: 0px !important;padding-bottom: 0px !important;}”][vc_column][vc_row_inner][vc_column_inner][vc_column_text]

If you would like to purchase the novels, please check out the links below!

[/vc_column_text][vc_separator][vc_separator border_width=”3″ el_width=”70″][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/2″][vc_single_image image=”25291″ img_size=”medium” alignment=”center” onclick=”custom_link” img_link_target=”_blank” css_animation=”fadeInUp” link=”http://www.penandsteel.com/book-1/”][/vc_column_inner][vc_column_inner width=”1/2″][vc_single_image image=”25289″ img_size=”medium” alignment=”center” onclick=”custom_link” img_link_target=”_blank” css_animation=”fadeInUp” link=”http://www.penandsteel.com/book-2/”][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row]