[Pro] Responsive Websites and Design?

I’m getting ready to design my first responsive website using Caleb’s excellent Backdraft template. Upon reviewing many responsive websites, one thing I’ve noticed is that most custom-built responsive designs either work better for portable devices or better with desktops, but rarely both.

So, what are the tricks to designing a great responsive website that looks great on any platform?


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I think you can see the best of both worlds going on http://easthalldesign.com by the talented Mr. Easthall.

Fact is yo will need to make 2 designs, not just one where the second one will be derived from. You will need to ‘plan’ how your mobile site will look like.


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Fact is yo will need to make 2 designs, not just one where the second one will be derived from. You will need to ‘plan’ how your mobile site will look like.

Yep - I agree here, and you know what?

The real challenge here is to start “mobile first”. It is way more complicated to figure out how and what should be part of the smallest available space. But an excellent exercise to keep yourself (and the clients) clean, simple and well organized.

Cheers

Thomas


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 14 Apr 2014, 2:58 pm, Thomas Kimmich wrote:

Yep - I agree here, and you know what?

The real challenge here is to start “mobile first”. It is way more complicated to figure out how and what should be part of the smallest available space. But an excellent exercise to keep yourself (and the clients) clean, simple and well organized.

Cheers

Thomas

I never thought of that. Mobile first? Hmmm. That’ll be a challenge for me. Thanks Thomas.


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I know this goes against what other’s are saying but we’ve given up trying to design mobile first. I don’t know who came up with that specific idea, but we’ve found that rationalising whats important, removing and moving items to suite the smaller physical size is a heck of a lot easier than coming up with content that wasn’t in the original design to accommodate a larger amount of real-estate. Its just easier to take away than to add.
The only time we’ve done mobile first is when the target audience has been predominately mobile and even then in needs to be above 75% of the audience.

Anyway these are just my thoughts and they are no more, or less valid than which ever self proclaimed internet guru came up with mobile first as the way to go… :o)

Max


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

As far as mobile-first design goes, I jump from one side of the fence to the other depending on the demographics. If over 50% of the visitors will be on mobile, mobile-first it is (and vise-versa if the majority are desktop users).

I’ve personally found that the best results come when you act as though you were building a desktop specific website with a mobile version (that includes the same content) as a good responsive design will change things more than just shifting columns. Resizing click/tap targets (links), rethinking the navigation, changing typography, modifying spacing, and art directions are all things that take a functional responsive website to a really awesome responsive experience. However, you have to be careful, if you change it too much it will confuse visitors who visit the website from different devices.

YMMV.


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I agree with Max and Caleb. Design for desktop (in responsive format) and make appropriate adjustments for mobile, while maintaining visual consistency to avoid confusion. You don’t want the sites to look like they belong to 2 different companies.

Also, research has shown that while the percentage of people browsing commerce sites via mobile devices is rapidly increasing, they go back to their desktop to actually make the purchases. I do this as well.


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

My thoughts are to focus on the content first. How it looks is not
important early in the design phase - if you can determine the thesis of
your page and the content required for both desktop and mobile users, then
I think you can better determine how the content is presented to each user.

Visuals and presentation are not content - I am convinced that once you can
see that, once you can really see content and presentation for what they
are, then you design for content first and device second.


Ernie Simpson, aka The Big Erns


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Well said Ernie - totally agree with that.

Before your next project consider the following.
Many website projects start out with the question “What should our new website look like?” a better option is to ask:
• What are our objectives?
• Who is target audience/s?
• What content are they looking for?
• What are our functional requirements?
• What are our technical requirements?
• How should we organize the site and content to deliver our objectives?
• What should the design look like?
• How will we measure success?
Thoughtful answers to these questions will deliver a better website with better results and a more efficient and less expensive process.

Marcel


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 15 Apr 2014, 9:31 pm, Helveticus wrote:

Well said Ernie - totally agree with that.

Before your next project consider the following.
Many website projects start out with the question “What should our new website look like?” a better option is to ask:
• What are our objectives?
• Who is target audience/s?
• What content are they looking for?
• What are our functional requirements?
• What are our technical requirements?
• How should we organize the site and content to deliver our objectives?
• What should the design look like?
• How will we measure success?
Thoughtful answers to these questions will deliver a better website with better results and a more efficient and less expensive process.

Marcel

Yes, this is all part of my discovery process, and I never start a new website before the copy and content has been developed and approved. :slight_smile: Thanks guys.


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Don’t take me wrong here:

The mobile first approach is dedicated to those that “Hmmm - Making a plan - really?” is a totally new experience (so app. 87% of Freeway users). Most of them are asking later, why their design doesn’t play really well on mobile-devices (which was Kelly’s initial question here).

All I wanted to say is, that this very, very small place requires a lil bit of attention (best first) to avoid a big mess later.

I herby agree all the experts on this list, that starting “desktop” first in a very restricted and well structured way should do the game. Doing this I never had to “hide” content on smaller devices - everything is there no matter of the used device.

I once followed Chris Coyiers’ screencast episode where he definitely started mobile first - not as the law at all - just as a good opportunity to simply do it and judge it later.

The project he did was:

and there had been several reasons for “mobile first” such as the royal-slider.

And if you think of those nice parallax (tell me a story pages) - believe me - mobile first is not the worst approach cause the situation on mobile is dramatically different.

Cheers

Thomas


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options