I've put together a few more technical details around the suggestions I made in my previous e-mail.
1) examples: We'll need to design and implement a responsive layout for our existing UIO demo. We may also have to make the content a bit more complex, although the multiple columns may be enough. For our sites, we'd probably start with the IDI site, as the responsive layouts have already been designed, but we will need to implement them still. Or we could use the Fluid Studios site; which is already responsive. Additionally we'll need to provide the hooks into the responsive layout for our simplified version. For example, provide a path into the 320px or 640px layouts via a class name. I've put together a quick and dirty example. You can "simplify" the content http://jsfiddle.net/ZSDD2/ 2) "base" styles: Similar to the idea of having base styles in FSS, we would just provide a set of pre-baked styles that could be quickly applied. We would have to come up with a general design for this. See the example below. .simplified nav, .simplified .navigation { /* move to top and restyle */ } .simplified article { .simplified .article { /* realign and emphasize */ } ... 3) extensions to existing frameworks: I don't really have the full perspective on this one and it will probably be dependent on which framework(s) we choose to support. In terms of Bootstrap, they make use of less. I would hope that we could write our own less file that makes use of their variables, to easily construct our accompanying styles based on a class instead of the media query. Here is an example of their less file for tablet styles. https://github.com/twitter/bootstrap/blob/master/less/responsive-768px-979px.less Thanks Justin On 2013-06-11, at 3:44 PM, Colin Clark <[email protected]> wrote: > Thanks Justin, this is a really insightful response. Can you elaborate on > what your three "quick start" solutions might look like from a technical > perspective? > > I completely agree with you that we can't do really excellent content > simplification for free--we need the site's designers to participate in the > process in some way. I just hope we can come up with an implementation that > gives them more than just an on/off checkbox and leaving them to do all the > actual work. > > Colin > > --- > Colin Clark > http://fluidproject.org > > On 2013-06-11, at 10:49 AM, Justin Obara <[email protected]> wrote: > >> I won't even attempt to track down all of the responsive sites, but I'd >> imagine there are lots and the list is growing. Here are some examples: >> http://mediaqueri.es >> >> However, even for sites that are responsive, there would still be some work >> to hook into them. Mostly they would have to provide a means for us to make >> use of their styles defined by media queries. For example we wouldn't want >> to be programatically changing the window size just to have a different >> presentation. We'd probably want them to make these responsive designs also >> available via a class name we could drop on the body or html tag. Another >> option would be to have a completely different design for the content >> simplification. This raises the question of whether or not this should also >> have it's own responsive designs. >> >> All-in-all, I don't think that we can completely avoid a site putting in >> their own design thought into the process. Our prior attempts at forcing a >> single column layout showed that we can't predict how the content of a page >> is or should be laid out. I think our best approach to providing a quick >> start at implementation would be through one or more of the following: >> >> • examples (demos, our own sites) >> • "base" style sheet that reorganizes/prioritizes content based on a >> semantic layout (e.g. navigation, articles, etc.) >> • extensions to existing frameworks like Bootstrap >> >> These would all be ways that integrators could get started on simplifying >> their content, and they would adapt to meet their specific needs. >> >> Thanks >> Justin >> >> >> On 2013-06-06, at 1:53 PM, Colin Clark <[email protected]> wrote: >> >>> Do we have any examples of websites we've found in the wild, or even our >>> web sites, that will be amenable to this sort of simplification mechanism >>> more or less out of the box? >>> >>> In other words, do we have evidence of real websites that already present >>> themselves so responsively that UIO could just tweak a few class names and >>> it would all work? >>> >>> Colin >>> >>> --- >>> Colin Clark >>> http://fluidproject.org >>> >>> On 2013-06-06, at 10:21 AM, Justin Obara <[email protected]> wrote: >>> >>>>> >>>>> I guess it's good Colin asked his questions, because my recollection is >>>>> not quite what Michelle described. Comments in-line below. >>>>> >>>>> On 2013-06-05, at 11:43 AM, Michelle D'Souza wrote: >>>>> >>>>>> Option 1 - Responsive Layout >>>>>> >>>>>> In this design, when simplify is on, the small screen experience is >>>>>> delivered to the user. Although we still need to explore how we'd do >>>>>> this technically, it likely means that we would fetch and include the >>>>>> small screen stylesheet in the page. >>>>> >>>>> My understanding was that the only thing this option would do would be to >>>>> narrow the view, triggering whatever responsive designs the website >>>>> already has. I did *not( have the impression that this would involve us >>>>> fetching stylesheets, merely adding a designated class to the body. The >>>>> website's responsive styles, triggered by a media query, would also have >>>>> to be triggered by the presence of the class. >>>>> >>>>> The mock-ups show a slider for this option, providing various widths. We >>>>> decided we'd start with simply two widths, the default and a minimum >>>>> (i.e. an on-off switch), and that we could expand it to a multi-value >>>>> slider in a future iteration. >>>> >>>> My understanding of option 1 is that the onus will be on the integrator to >>>> provide the correct styles. In some cases this may mean piggybacking on >>>> the responsive styles, others it might be slightly alternate styles. These >>>> decisions will be up to the designer/integrator of the site. In terms of >>>> work for us, we'll need to support a mechanism for switching between >>>> styles; which may be a class on the body. Our demo and integrations that >>>> we perform will need to have these design decisions thought out and >>>> implemented, and can be used as examples for others. >>> >> >
_______________________________________________________ fluid-work mailing list - [email protected] To unsubscribe, change settings or access archives, see http://lists.idrc.ocad.ca/mailman/listinfo/fluid-work
