Adding stylesheet action

No, just one site. I’m building this site to be fully responsive. The plan is probably for every site to be this way from now on as client interest on this is only starting to take hold. (blame it on recent proliferation of Apple devices!)

For this site I’m working on rather than design for “mobile up” the site is built flexible to its “desktop” size in Freeway constrained by max-width. Measurements/sizes in % and ems. By building at desktop size Freeway can render the graphics “as is” and the browser can re-size images down should help boost them a little when seen on a iPad or iPhone if I don’t go for retina images.

I will be using CSS3 columns in the final version before anyone points out.

Here’s the work in progress: Responsive Demo website built using Freeway (**Note work in progress!!)

Re-size your browser window to see it flex if you don’t have a mobile device.

I highly recommend anyone to read Responsive Web Design, A Book Apart if they want the light bulb moment for responsive web design.

David Owen

On 26 Apr 2013, at 04:26, RavenManiac email@hidden wrote:

David,

I find this interesting. So, when you design a new website for a client is your preference to design a regular sized site plus a mobile responsive site?


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

Glyn,

Yep, very quick. It’s the way I do it. But it not the answer to my original question of what actions people use. It’s good to know (and share) what others use when/if using an action.

Actions can be a great time saver or the only way to shoehorn something in to Freeway. Take Walt’s Crowbar action for the latter ~ invaluable when working with a CMS and Freeway.

A massive time saver action would be the image replacement action (no longer works in 6 I believe). Sure you can hand code image replacement but the action was a no brainer - three clicks. Or the built in google analytics action applied to a folder to go site wide.

The downside of relying on actions is to never learn what is going on with the code. If your end game is to learn more.

David Owen { Freeway Friendly Web hosting and Domains }

http://www.ineedwebhosting.co.uk | http://www.PrintlineAdvertising.co.uk

On 26 Apr 2013, at 00:36, Glynster email@hidden wrote:

In that case David, cmd+c this…

Then cmd+v

Quick enough for you? :slight_smile:


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

Hi David.

That is a great book, and written well. Not many books of it’s type that i’ve laughed at whilst reading.

I’ve started Mobile First from the abookapart collection now, so i might use that method next time. I think it’s more appropriate if the site will be used by more mobile visitors, as it can reduce the amount of files (or file sizes) downloaded to the device, leaving the larger graphic files etc to be added by the media queries as the site grows, rather than the other way around. To be honest, that hadn’t even occurred to me until I read it.

I was thinking i’d still need to ‘see’ (in my mind or sketched out) the desktop site first though, to have a plan as to how i was going to grow the mobile version into is bigger brother.

Perhaps we should have a section or ‘recommended reads’ somewhere?

Sites looking good. Nice colour combinations.

Al.


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

Hi Alan,

I think that the problem with Freeway is it is now. If you want to take advantage of Freeway strength (taking case of graphics and quickly mocking up the site framework) The only quick way is to build a flexible desktop site and work down to mobile. The upside is you really concentrate on the content and readability rather than the design cruft you tend to add in a pixel perfect desktop site.

David Owen

On 26 Apr 2013, at 09:47, “Alan Herbert” email@hidden wrote:

I was thinking i’d still need to ‘see’ (in my mind or sketched out) the desktop site first though, to have a plan as to how i was going to grow the mobile version into is bigger brother.


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

On 26 Apr 2013, 7:51 am, David Owen wrote:

No, just one site. I’m building this site to be fully responsive. The plan is probably for every site to be this way from now on as client interest on this is only starting to take hold. (blame it on recent proliferation of Apple devices!)

For this site I’m working on rather than design for “mobile up” the site is built flexible to its “desktop” size in Freeway constrained by max-width. Measurements/sizes in % and ems. By building at desktop size Freeway can render the graphics “as is” and the browser can re-size images down should help boost them a little when seen on a iPad or iPhone if I don’t go for retina images.

I will be using CSS3 columns in the final version before anyone points out.

Here’s the work in progress: Responsive Demo website built using Freeway (**Note work in progress!!)

Re-size your browser window to see it flex if you don’t have a mobile device.

I highly recommend anyone to read Responsive Web Design, A Book Apart if they want the light bulb moment for responsive web design.

David Owen
http://www.printlineadvertising.co.uk

Very nice. The only bad thing about responsive sites is they they all start to look the same—at least to me. I’m looking forward to seeing the finished site.


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

That’s the trouble about looking at this from the design side. Designers senses get numbed by seeing new shiny whiz back stuff. Where as the real end users of a site don’t rate that stuff. All they want is to glean the information quickly and concisely and if they don’t find it quick, their off elsewhere.

There is some merit in ~ if you can access the content easily and don’t notice the design, design is probably doing it’s job. And the word “design” is not pronounced “entertainment” :wink:

kind regards

David Owen

On 26 Apr 2013, at 14:04, RavenManiac email@hidden wrote:

Very nice. The only bad thing about responsive sites is they they all start to look the same—at least to me. I’m looking forward to seeing the finished site.


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

Here’s the work in progress:

I know it is WIP - just can’t help pointing out the obvious.

Contactors

D


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

We’ll spotted Dave! What do they say, always leave a deliberate typo to see if anyone is actually paying attention when proofing? :wink:

But seriously it’s just a proof of concept test responsive mockup framework for a new site. Thought others would be curious to see what is possible using Freeway and the current “fad” (cough) of responsive websites seeing there’s been quite a bit of recent interest on Freewaytalk.

Responsive Demo website built using Freeway

It’s using the media queries here (Freeway template download if you’re interested)…

David Owen

On 26 Apr 2013, at 22:46, DeltaDave email@hidden wrote:

Here’s the work in progress:

I know it is WIP - just can’t help pointing out the obvious.

Contactors

D


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

Contactors

I would probably missed this myself if I had not fitted a new one on a job yesterday.

Contactor that was - not a new Contractor!

D


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

Ok. this is an odd one…

The top 3 images are set at width:33.3333333333333%; height:auto inside a div set at width:100%; max-width:900px;

When the browser is reduced in width there’s a small sliver on the right where the browse I assume can’t quite calculate the width.

One option would to just make a single image. But before I do any ideas or workaround for a fix as is with three images?

Building Work

David Owen

On 27 Apr 2013, at 14:38, DeltaDave email@hidden wrote:

Contactors

I would probably missed this myself if I had not fitted a new one on a job yesterday.

Contactor that was - not a new Contractor!

D


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

…Think this is just Apple Webkit that is doing this on iPhone, iPad, Desktop. Firefox and Chrome look OK.

David Owen

On 29 Apr 2013, at 18:39, David Owen email@hidden wrote:

Ok. this is an odd one…

The top 3 images are set at width:33.3333333333333%; height:auto inside a div set at width:100%; max-width:900px;

When the browser is reduced in width there’s a small sliver on the right where the browse I assume can’t quite calculate the width.

One option would to just make a single image. But before I do any ideas or workaround for a fix as is with three images?

Building Work

David Owen
http://www.printlineadvertising.co.uk

On 27 Apr 2013, at 14:38, DeltaDave email@hidden wrote:

Contactors

I would probably missed this myself if I had not fitted a new one on a job yesterday.

Contactor that was - not a new Contractor!

D


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

David, the thin white line is also there at full size using Safari 6.04 on Mac OS 10.7.5

Trev

On 29 Apr 2013, at 18:41, David Owen wrote:

…Think this is just Apple Webkit that is doing this on iPhone, iPad, Desktop. Firefox and Chrome look OK.

David Owen
http://www.printlineadvertising.co.uk

On 29 Apr 2013, at 18:39, David Owen email@hidden wrote:

Ok. this is an odd one…

The top 3 images are set at width:33.3333333333333%; height:auto inside a div set at width:100%; max-width:900px;

When the browser is reduced in width there’s a small sliver on the right where the browse I assume can’t quite calculate the width.

One option would to just make a single image. But before I do any ideas or workaround for a fix as is with three images?

Building Work

David Owen
http://www.printlineadvertising.co.uk


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

Thanks for looking. I suspect the browser just can’t resolve the 33.33…% width. And making them a round percentage each 33% 34% 33% makes unequal heights using height:auto.

It’s looking like a single combined image (or 2, 4, 5 images anything perfectly divisible by 100)

David Owen

On 29 Apr 2013, at 18:44, Trevor Reaveley email@hidden wrote:

David, the thin white line is also there at full size using Safari 6.04 on Mac OS 10.7.5


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

On 29 Apr 2013, at 19:31, David Owen email@hidden wrote:

Thanks for looking. I suspect the browser just can’t resolve the 33.33…% width. And making them a round percentage each 33% 34% 33% makes unequal heights using height:auto.

That’s it. Fractional percentages are not available in the shipping versions of Safari. They’re in the nightly builds though so should hopefully be available soon.

Joe


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

I’ll leave as is then. Let the problem heal itself. Suppose iOS 7 will also have the fix later this year.

David Owen

On 29 Apr 2013, at 20:19, Joe Billings email@hidden wrote:

On 29 Apr 2013, at 19:31, David Owen email@hidden wrote:

Thanks for looking. I suspect the browser just can’t resolve the 33.33…% width. And making them a round percentage each 33% 34% 33% makes unequal heights using height:auto.

That’s it. Fractional percentages are not available in the shipping versions of Safari. They’re in the nightly builds though so should hopefully be available soon.

Joe


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