Redesign: Adaptative Design, Mobile Version and List Building
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.
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:
- A widescreen layout with 2 columns, mainly targeted at desktop computers’ users,
- A one column fixed-width layout designed for tablets’ users,
- 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!