[Pro] Responsive Websites

Hey @all,

thanks so much for your comments and apologize for the late response but isolated thunderstorm, the night and a couple of german beers suddenly interrupted my work.

Glad you like design and appearance but yes indeed:

A responsive page that does not work on devices is … hmmm.

Honestly I never played with the iPhone settings before so there had been indeed some inconsiderate settings.

Device width did it and furthermore I set all the percentages in the below dialog to 100% which is now that I know this is disabling zoom of course nonsense-setting, too.

So I set the min-scale to a 40% and the max-scale to 160% without any idea if this is correct and what happens with these settings (I do not have an iPad)

But there are a ton of other things to do such as the iPhone not using its intended stylesheet. Furthermore I am more than sure that the @media query for this devices is still not really complete (landscape/portrait).

Furthermore I’d been informed about quirky IE8 behavior (which doesn’t make me wonder btw).

But for this it is “project-stat” and if I could ask you to do me a favor please have from time to time a look in it and tell me what you see (or not :-))

Cheers

Thomas


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

Hej Thomas,

Which url is it?

/ Omar
(from my iPad)

::: Communication to improve civilisation :::

On 31 maj 2012, at 09:57, “Thomas Kimmich” email@hidden wrote:

for this it is “project-stat” and if I could ask you to do me a favor please have from time to time a look in it and tell me what you see


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

Still the same?

http://www.kimmich-dm.de/templates/liquid/index.html

Cheers

Thomas


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

Looking good on my iPad!

Walter


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

Hi Thomas –

Pinch-zooming and tap-zoom is now enabled, hooray!

However, rotating the mobile device orientation after page-load still does
not adjust the size… mobile and ios-device viewers should compare with
http://freewaypro.thebigerns.com/ as an example. I think this behavior is
desirable and important for mobile and tablet users, the reasons for which
become obvious the more time you spend using these devices.

How to achieve it? I haven’t a clue… you’ve outpaced me on this subject
before I’ve even gotten round to it. By the time I figure out responsive
design, you’ll probably be designing sites for telepathic browsers… :slight_smile:

My own example is not really mine, it’s a Wordpress template which I
haven’t fully dissected myself so I don’t even pretend that I know better,
but you’re welcome to pick it apart to see if it holds any clue on how to
adjust not only to the device’s browser but to the user’s interaction with
that device.

Btw, I think this is really nice work. You must charge enough for this
template to get some mobile devices to test with, hint hint :wink:


Ernie Simpson

On Fri, Jun 1, 2012 at 7:41 AM, waltd email@hidden wrote:

Looking good on my iPad!


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

Thanks Walter - sounds good. I have unfortunately not one so I have to test and control it on http://ipadpeek.com/ where I have the WYSIWYPTG* situation.

Furthermore it seems that I am now at the end of my wisdom but I think it had been an interesting side-step which brought me closer to Ern’s basic idea:

“… not resist learning about the underlying code that makes websites work. This experience will enhance what you do, and what you can do with Freeway.”

So true my friend.

Cheers

Thomas

Oh the *?

Walter created it a couple of moons ago:

What you see is what you pray to get.


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

ohhh sorry Ernie, this had been a double post so I haven’t recognized your latest entry.

Yeahh - purchase for a lot to make a single buy-in and own ActionsForge next in one-step could be a good plan.

However I’m currently not sure if the fun in the document would be really that high cause it is in fact slightly different in view than the browser-view. Furthermore it’s very messy, waiting for to tide.

Ahmm - the pad emulator shows me (or not) the resizing but the phone indeed not. I think I should try the landscape/portrait queries for both (Pad/Phone) however I thought I already did without success. But without my iPhone (which lays beneath my bed supposed to be the most expensive alarm-clock in the world) it is currently senseless to try.

Cheers

Thomas


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

Well, whatever you decide to do with it, it is good work… I am impressed :slight_smile:


Ernie Simpson

On Fri, Jun 1, 2012 at 8:55 AM, Thomas Kimmich email@hidden wrote:

ohhh sorry Ernie, this had been a double post so I haven’t recognized your
latest entry.

Yeahh - purchase for a lot to make a single buy-in and own ActionsForge
next in one-step could be a good plan.

However I’m currently not sure if the fun in the document would be really
that high cause it is in fact slightly different in view than the
browser-view. Furthermore it’s very messy, waiting for to tide.

Ahmm - the pad emulator shows me (or not) the resizing but the phone
indeed not. I think I should try the landscape/portrait queries for both
(Pad/Phone) however I thought I already did without success. But without my
iPhone (which lays beneath my bed supposed to be the most expensive
alarm-clock in the world) it is currently senseless to try.


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

Thomas,
I am starting a project and we’d like to use a responsive approach. There are some appealing wordpress templates now, but we love Freeway and wondered if your musing and template are available for others to use?

http://www.kimmich-dm.de/templates/liquid/index.html

Or are there other responsive Freeway templates anyone can recommend? Building everything from scratch every time can be time consuming!

Thanks so much. Jan


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

Anyone,

In a few words, what is the difference between a responsive and non- website?

Frank H.

On Sep 3, 2012, at 9:29 AM, jan smoot email@hidden wrote:

Thomas,
I am starting a project and we’d like to use a responsive approach. There are some appealing wordpress templates now, but we love Freeway and wondered if your musing and template are available for others to use?

http://www.kimmich-dm.de/templates/liquid/index.html

Or are there other responsive Freeway templates anyone can recommend? Building everything from scratch every time can be time consuming!

Thanks so much. Jan


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


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

Some Web sites only look good on a desktop, with elements arranges so that a mobile user would have to tap to zoom and pan around the screen in order to read anything (New York Times).

Some sites are coded to look correct on a mobile browser, and look cartoonishly awful on a desktop.

Some sites will be coded to recognize that you’re using a mobile browser, and redirect you to the mobile site, often leading to this problem: xkcd: Server Attention Span

A responsive site uses just one set of HTML, cleverly coded so that when it recognizes that you’re using a small screen, a different stylesheet will be loaded. If you have a large screen, you get the whole multi-column experience, otherwise you get an appropriate subset of the page as full-width. (A desktop might see 3 or 4 columns, an iPad might see 2, and an iPhone would see 1 column. All of the content is still there, just appropriately sized (and the page just gets taller to fit).

Walter

On Sep 3, 2012, at 2:05 PM, Harshbarger Frank wrote:

Anyone,

In a few words, what is the difference between a responsive and non- website?

Frank H.

On Sep 3, 2012, at 9:29 AM, jan smoot email@hidden wrote:

Thomas,
I am starting a project and we’d like to use a responsive approach. There are some appealing wordpress templates now, but we love Freeway and wondered if your musing and template are available for others to use?

http://www.kimmich-dm.de/templates/liquid/index.html

Or are there other responsive Freeway templates anyone can recommend? Building everything from scratch every time can be time consuming!

Thanks so much. Jan


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


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


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

Harshbarger Frank wrote:

In a few words, what is the difference between a responsive and non- website?
[Laughs] A few words?

A responsive website is one whose layout/content will adapt to the
device, browser, viewport it’s being viewed on. That may mean certain
non-essential content may be removed for smaller screens or certain
functionality (menus, for example) may work slightly differently in
order to compensate for smaller screen sizes compared to their desktop
equivalents. It’s one site that’s optimized for multiple
platforms/devices and it’s all done on-the-fly; it’s transparent to the
user.

Todd


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

Thank you both, this is a very cool concept and I will be watching this thread and the like much more closely. Thomas, your emphasis on planning takes on a whole new meaning now.

Thanks for getting me caught up.

Frank H.

On Sep 3, 2012, at 11:17 AM, Todd email@hidden wrote:

Harshbarger Frank wrote:

In a few words, what is the difference between a responsive and non- website?
[Laughs] A few words?

A responsive website is one whose layout/content will adapt to the device, browser, viewport it’s being viewed on. That may mean certain non-essential content may be removed for smaller screens or certain functionality (menus, for example) may work slightly differently in order to compensate for smaller screen sizes compared to their desktop equivalents. It’s one site that’s optimized for multiple platforms/devices and it’s all done on-the-fly; it’s transparent to the user.

Todd
http://xiiro.com


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


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

It does up the ante for the designer/developer when it comes to
planning. Depending on the complexity and size of the project and how
far the client wants to go with the responsive aspect (it can be taken
to a very granular level), it can require a not insignificant amount of
work. Plus most clients have no clue as to what it takes to make this
stuff work well across a wide range of devices/platforms andwhy it can
increase build/testing time (and cost). Explaining it can sometimes feel
like an exercise in futility.

Todd

Harshbarger Frank wrote:

Thank you both, this is a very cool concept and I will be watching this thread and the like much more closely. Thomas, your emphasis on planning takes on a whole new meaning now.

Thanks for getting me caught up.


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

Is this a newish concept? I mean it seems one minute we were talking about various templates and techniques for mobile phones and to accommodate other OS platforms, and in a blink the concept is manipulating stylesheets (sorry if oversimplification) or something of the like - I imagine this has to do with CSS advancements.

Frank H.

On Sep 3, 2012, at 8:20 PM, Todd email@hidden wrote:

It does up the ante for the designer/developer when it comes to planning. Depending on the complexity and size of the project and how far the client wants to go with the responsive aspect (it can be taken to a very granular level), it can require a not insignificant amount of work. Plus most clients have no clue as to what it takes to make this stuff work well across a wide range of devices/platforms andwhy it can increase build/testing time (and cost). Explaining it can sometimes feel like an exercise in futility.

Todd
http://xiiro.com

Harshbarger Frank wrote:

Thank you both, this is a very cool concept and I will be watching this thread and the like much more closely. Thomas, your emphasis on planning takes on a whole new meaning now.

Thanks for getting me caught up.


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


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

Responsive design is in its infancy and evolving quickly, though the
@media query technique (which factor prominently into RD) is not a new
concept and has been used for a long time to provide print-friendly
designs/layouts. RD is (to me) an evolutionary step rather than
revolutionary step (or two) from previous methods. It’s always been
about CSS manipulation and detection, it’s just that the need to cater
to an ever-widening collection of devices has increased dramatically the
past few years and the need to have an even richer mobile experience is
growing fast. What was once “good enough” for a mobile device is not
anymore. Clients want a fine-tuned and seamless experience which means
we have to put the time in to understand how to best to achieve that
end. There’s no one “best” way to accomplish that so we have to plan
more effectively and ask more questions and learn as we go. Any designer
who charges for their services and thinks such things don’t matter are
undermining their value to their clients. Responsive design is more than
just a buzzword (though it is that, too), it’s quickly becoming (or has
become) a necessity for modern web design.

Todd

Harshbarger Frank wrote:

Is this a newish concept? I mean it seems one minute we were talking about various templates and techniques for mobile phones and to accommodate other OS platforms, and in a blink the concept is manipulating stylesheets (sorry if oversimplification) or something of the like - I imagine this has to do with CSS advancements.

Frank H.

On Sep 3, 2012, at 8:20 PM, Toddemail@hidden wrote:

It does up the ante for the designer/developer when it comes to planning. Depending on the complexity and size of the project and how far the client wants to go with the responsive aspect (it can be taken to a very granular level), it can require a not insignificant amount of work. Plus most clients have no clue as to what it takes to make this stuff work well across a wide range of devices/platforms andwhy it can increase build/testing time (and cost). Explaining it can sometimes feel like an exercise in futility.


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

Wow. So much to mull over.

Thanks!

Frank H.

On Sep 3, 2012, at 11:07 PM, Todd email@hidden wrote:

Responsive design is in its infancy and evolving quickly, though the @media query technique (which factor prominently into RD) is not a new concept and has been used for a long time to provide print-friendly designs/layouts. RD is (to me) an evolutionary step rather than revolutionary step (or two) from previous methods. It’s always been about CSS manipulation and detection, it’s just that the need to cater to an ever-widening collection of devices has increased dramatically the past few years and the need to have an even richer mobile experience is growing fast. What was once “good enough” for a mobile device is not anymore. Clients want a fine-tuned and seamless experience which means we have to put the time in to understand how to best to achieve that end. There’s no one “best” way to accomplish that so we have to plan more effectively and ask more questions and learn as we go. Any designer who charges for their services and thinks such things don’t matter are undermining their value to their clients. Responsive design is more than just a buzzword (though it is that, too), it’s quickly becoming (or has become) a necessity for modern web design.

Todd
http://xiiro.com

Harshbarger Frank wrote:

Is this a newish concept? I mean it seems one minute we were talking about various templates and techniques for mobile phones and to accommodate other OS platforms, and in a blink the concept is manipulating stylesheets (sorry if oversimplification) or something of the like - I imagine this has to do with CSS advancements.

Frank H.

On Sep 3, 2012, at 8:20 PM, Toddemail@hidden wrote:

It does up the ante for the designer/developer when it comes to planning. Depending on the complexity and size of the project and how far the client wants to go with the responsive aspect (it can be taken to a very granular level), it can require a not insignificant amount of work. Plus most clients have no clue as to what it takes to make this stuff work well across a wide range of devices/platforms andwhy it can increase build/testing time (and cost). Explaining it can sometimes feel like an exercise in futility.


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


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

And consider that using @media queries it’s possible to target a device
for portrait or landscape orientation so you could show a different
layout for each based on a simple turning of the device. And while that
may not be necessary all the time you get an idea of how far it can be
taken (and a lot further). Depending on your mindset it’s an exciting
time to be a web designer, and also a frustrating one, at times.

Todd

Harshbarger Frank wrote:

Wow. So much to mull over.


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

Any tips on how you make a responsive website - would be very useful to know?

Elizabeth

On 04/09/2012, at 3:57 PM, Todd wrote:

And consider that using @media queries it’s possible to target a device for portrait or landscape orientation so you could show a different layout for each based on a simple turning of the device. And while that may not be necessary all the time you get an idea of how far it can be taken (and a lot further). Depending on your mindset it’s an exciting time to be a web designer, and also a frustrating one, at times.

Todd

Harshbarger Frank wrote:

Wow. So much to mull over.


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


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

As Todd pointed out, the main tool of RD is clever manipulation of CSS
and HTML… an education that is sometimes counter to what Freeway users
want.

Yet, not impossible as FWP creates html and css code… once you work
out what code outcome you want, then it’s a matter of working out how
to make Freeway create that outcome. Or waiting for an action to do it
for you :smiley: (sorry, jk)


Ernie Simpson

On Tue, Sep 4, 2012 at 7:33 AM, Elizabeth email@hidden wrote:

Any tips on how you make a responsive website - would be very useful to know?


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