Dukeo » About Dukeo » Redesign: Adaptative Design, Mobile Version and List Building

Redesign: Adaptative Design, Mobile Version and List Building

Steven 10 responses About Dukeo
1

The title says it all: I recently released a new layout for Dukeo. Knowing that the internet usage of an average person is constantly evolving, mostly due to new devices (smartphones, tablets,…), I wanted to find an easy way to make the user-experience as friendly as possible for all these internet users.

After doing a little research, I discovered adaptative webdesign. The main idea is very straight-forward: changing the way a website is displayed (through the use of CSS) based on the user’s screen resolution. I found the idea to be very interesting, but I was pretty busy with affiliate campaigns so I added that at the end of my to-do list.

dukeo redesign adaptative webdesign mobile version email list

Then, at the beginning of the month, I attended Affiliate Summit and more precisely, a couple sessions about mobile marketing. In the mobile sessions, I was stunned when I learned about the percentage of search that is performed on hand-held devices: it’s already over 15% of all searches, and the number keeps growing! Moreover, have you already tried to visit a website, which doesn’t have a mobile version, on your smartphone? That’s a really painful experience, and it uses a lot of bandwidth on graphics and stuff that you don’t even need.

During ASW, I also went to a session by Hunter Boyle of Aweber. Most of the presentation was a case-study of Social Triggers and the way its owner, Derek, was able to completely explode his list subscriber’s number in a short 1 year period. Hunter Boyle also gave some good tips about the best practices to increase your signup rate and have a better retention rate: such as the form placement (just under navigation, top of the sidebar, at the end of each article, in the footer of the blog). After digesting this information, I had a lot of stuff I wanted to implement on my website to start growing my email list again.

The combination of these 3 things: my interest for adaptative web-design, caring for mobile and tablet users, focusing on email list-building again, led me to rethink the whole design of Dukeo. And here it is!

If you resize your browser window, you’ll notice that Dukeo’s layout has 3 different states:

  1. A widescreen layout with 2 columns, mainly targeted at desktop computers’ users,
  2. A one column fixed-width layout designed for tablets’ users,
  3. A one column “liquid” layout with lighter graphics, designed for smartphones’ users.

I also added some special treatments to the images and menus on Dukeo to make sure they always fit the layout.

Lastly, I decided that not every “widget” in the sidebar and footer was useful for the tablets and mobile users, so you’ll notice that some modules are not visible with the tighter layouts.

In an industry such as ours, where we are always taking care of our website visitors to convert them into leads and sales, I’m proud to have the first and only blog using adaptative webdesign to improve my visitor’s experience!

If you enjoyed this article,
Get email updates

Join for Free »

10 Comments

  1. Affiliate Manager

    Looks good. I noticed it change on my iPad last night. The homepage reminds me of TechCrunch with how you have the article thumbnails, titles, and then share buttons. Very nice work :)

    1. Absolutely, it’s heavily inspired by Techcrunch. The share buttons loaded with Ajax is pretty neat as it allows the page to load a lot faster. The visitor doesn’t have to wait for the buttons to load :)

  2. Gorman

    This is freaking RAD! I love it, and I didn’t even know it worked on all of those levels, that’s so badass! Good to know that I can use my phone to check up on posts here too now, loving it!

  3. Liz

    *jaw drops* WHA?? That is soooo cool!!! Man, I wish I had thought of that, I’m not even sure I know how to make it do that to my own site! Wowzers, just super impressed right now. Gonna go see what it looks like on my phone now too!! ^_^

    1. Just Google adaptative webdesign, you’ll find plenty of information about that. :)

  4. Affmaster

    This is definitely an accomplishment and something to be very very proud of. I am duly impressed at everything you have accomplished! 2012 is really starting off with a bang for you, and I really cannot wait to see the great things you are going to do this year. Congrats!

  5. Mitch

    Wow, I mean I noticed things around here looked great, but I guess it’s not just a facelift, but it’s actually a whole different animal! That’s sweet stuff, bro. Gonna have to look into that for myself.

  6. Sarah

    That really is a 3 in 1 deal! I’m definitely a fan, I had a fun time playing on my iPhone with it. ;)

  7. Buysellwordpress

    That’s great that you aren’t stopping on your achievements and are trying to offer something new and original in different aspects

    1. I’m always trying to do my best !