Jump to content


Photo

My Md3 Site For Marketing Coaching - Feedback?


  • Please log in to reply
11 replies to this topic

#1 ianbrodie

ianbrodie

    Member

  • + Legacy Member
  • PipPip
  • 16 posts

Posted 30 January 2013 - 09:27 AM

Hi,

Over the weekend I switched over my site at http://www.ianbrodie.com from a highly tweaked version of the Genesis/Generate theme to MD3. I'm quite pleased with it.

One question - rather than the standard Funnel Page lead with an icon at the top of the box, I'd like to have images. Any ideas how to do this? Shoudl I try to tweak the funnel page lead or use a different box?

Thanks

Ian

#2 Martin Slack

Martin Slack

    Advanced Member

  • + Legacy Member
  • PipPipPip
  • 163 posts

Posted 06 February 2013 - 01:27 AM

Ian,

I am really impressed with your site.

I see you managed to change the colour of the funnel lead icons. Please will you share what you did.

And, the way you have used the product lead with your Powerpress video box on the left and optin on the right is great. Did you have to do a lot of tweaking? If so, please will you share some tips.

Thanks and regards,

Martin Slack
http://homebizzguide.com - your complete guide to home-based business success.

#3 ianbrodie

ianbrodie

    Member

  • + Legacy Member
  • PipPip
  • 16 posts

Posted 07 February 2013 - 02:43 PM

Hi Martin - the funnel lead icon colours can be changed in the relevant CSS section - here's a quick screen capture of mine:

http://screencast.com/t/irLt6BSR7F7

In terms of the video, I did have to tweak a bit.

Here's the CSS I have attached to the optin area:

.product-lead { background-image: url(/wp-content/thesis/skins/marketers-delight/images/whitebg.png); border-top: 2px dotted #cccccc; border-bottom: 2px dotted #cccccc; }
.email-lead .email-form { background: none; }
.email-lead .email-form input { font-size: 14px; width: 210px; }

@media screen and (max-width: 1080px) {
.email-lead .email-form input { font-size: 12px; width: 170px; }

@media screen and (max-width: 850px) {
.email-lead .email-form input { font-size: 12px; width: 190px; }
}

@media screen and (max-width: 600px) {
.email-lead .email-form input { font-size: 12px; width: 220px; }
}

.email-lead .text-area { width: 35%; margin-top: -15px;}
.email-lead .email-form { width: 65%; margin-top: 30px; padding-bottom: 0px; margin-left: 0 !important;}
.email-lead { margin-top: -70px; }
.email-form p { text-align: left; line-height: 1.5em; font-size: 18px; margin-bottom: 12px; }
.email-form ul li { text-align: left; line-height: 1.3em; font-size: 16px !important; margin-bottom: 8px; }
.email-form h4 strong, .email-form p strong, #thin-optin .email-form strong { color: $primary_dark; }
.email-form ul li em { font-style: italic; color: $primary_dark !important; }
.box-outline { box-shadow: 0 0 12px rgba(0, 0, 0, 0.1) inset, 0 0 6px rgba(0, 0, 0, 0.2); }

I've got some responsive CSS in there to change the size of the optin form boxes for name and email as on different sized screens they move to different places and so have more/less room available (e.g. in portrait mode on an iphone there's one box per line so they have more space, in landscape mode there's a couple of boxes on one line so they have less)

The video itself is powered by something called LeadPlayer. It basically plays youtube videos but can overlay them with optin boxes (I don't use that feature here but I do elsewhere on my site). It also makes youtube videos responsive and resizes them to the right size for the device.

Lots of other features too - I love it and am using it extensively on my site.

Ian

#4 Martin Slack

Martin Slack

    Advanced Member

  • + Legacy Member
  • PipPipPip
  • 163 posts

Posted 07 February 2013 - 04:26 PM

Hi Ian.

I did find the icon colour setting adjustment in the package settings. I didn't know to look at the packages more closely until I stumbled upon them. This is why a user guide to MD3 would be so helpful.

Thanks so much for the detailed code. I wondered how you achieved the dotted borders. Now I know. Much appreciated.

Leadplayer looks interesting. Its responsiveness is an important benefit.

Thanks again.

All the best.

Martin
http://homebizzguide.com - your complete guide to home-based business success.

#5 lstoops

lstoops

    Newbie

  • + Legacy Member
  • Pip
  • 4 posts

Posted 14 February 2013 - 02:13 PM

I love your site! I am so lost with this skin. How did you set it up to have a welcome page and then your site? Also, how did you get your video and email optin like that? Awesome.

#6 ianbrodie

ianbrodie

    Member

  • + Legacy Member
  • PipPip
  • 16 posts

Posted 14 February 2013 - 08:34 PM

Hi Istoops - thanks!

The Welcome page isn't related to the theme. That's done by a separate plugin called leadpages. It's a neat online tool for quick design of landing pages. Their plugin allows you to use any of the landing pages you design as a "welcome gate". I believe they also give away the html for a couple of welcome gates free.

The video and email optin are done by the code I showed in the answer above.

Cheers

- Ian

#7 Brent C

Brent C

    Member

  • + Legacy Member
  • PipPip
  • 23 posts

Posted 09 April 2013 - 05:14 PM

I can't get past your welcome gate...

#8 jamesking

jamesking

    Advanced Member

  • + Legacy Member
  • PipPipPip
  • 114 posts
  • LocationNew York, NY

Posted 27 April 2013 - 06:38 PM

Ian - thanks for sharing your code for us. Really helpful!

#9 Guest_beepee_*

Guest_beepee_*
  • Guests

Posted 12 July 2013 - 07:45 AM

Wow Ian, very impressive you marketing guru!!!

AMAZING

Would you mind me asking how you got the red underline on the text THAT GET RESULTS?

Impressive all round! Inspiration

#10 Chris Henry

Chris Henry

    Newbie

  • + Legacy Member
  • Pip
  • 1 posts

Posted 10 October 2013 - 03:17 PM

Just some useful criticism from a pure design and usability standpoint...

Your landing/product pages are good obviously (as you're using LP), but your MD3 pages have some seriously unconventional design aspects going on. For one, the tagline is super long and under the right hand nav. The original MD design, along with any other similar design with a horizontal nav in the header, should not contain anything. So you should remove the tagline, or the nav itself (ideally the tagline, like the MD3 demo). And since you have so many main nav items, I'd condense several of them under more general main nav parent categories using drop downs. 5 or maximum 6 main nav items should be a general rule when you have a right hand horizontal header nav. Otherwise, create a sub-nav in the actual body of a page linked from the main nav (this is my preference as I despise drop downs). I would also reduce the majority of your main nav items to one word (tutorials, products, about, contact, etc). This will allow you to shorten the length of your nav and allow more white space between the logo and nav.

Second criticism is the button overload in the footer, as well as the large amount of text. Buttons should never be that liberally used in a single page element, or even on a whole page, unless you have a long form sales letter with multiple buy buttons at different stages in the content.

#11 ianbrodie

ianbrodie

    Member

  • + Legacy Member
  • PipPip
  • 16 posts

Posted 03 December 2013 - 05:27 AM

Appreciate your feedback Chris. But do you have any data/evidence to back up your opinion, or is it just based on aesthetics?

So for example, I'm not sure why having a long tagline is a bad and how having none could possibly be good?

Or one word menu items which could lead to confusion (e.g "clients" could be read as a section specifically for clients rather than a description of who I work with). I'm not sure I'd want to sacrifice clarity (or the more personal feel that comes with the word "my" just for a bit of whitespace.

Having said that, I'm very happy to change stuff if it's based on evidence/testing rather than just opinion. So any references woudl be much appreciated.

Ian

#12 ianbrodie

ianbrodie

    Member

  • + Legacy Member
  • PipPip
  • 16 posts

Posted 19 December 2013 - 06:39 AM

By the way - I should probably say, my site no longer runs on MD3.

With the whole Thesis 2.0->2.1 fiasco and the lack of documentation on how to get MD3 to work properly with Thesis 2.1 I found it easier to convert my site to work with the Cinch skin for 2.1 that it was to try to get MD3 to work on 2.1.

Ian




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users