Responsive web design

classic Classic list List threaded Threaded
15 messages Options
Reply | Threaded
Open this post in threaded view
|

Responsive web design

John Elliot-2
Are there any initiatives in the MediaWiki community for a MediaWiki
theme that supports 'responsive design' [1] -- where content is properly
laid out in an accessible form on all manner of devices including
desktops and smart phones?

[1] http://www.alistapart.com/articles/responsive-web-design/


_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Responsive web design

David Gerard-2
On 27 July 2012 11:01, John Elliot <[hidden email]> wrote:

> Are there any initiatives in the MediaWiki community for a MediaWiki
> theme that supports 'responsive design' [1] -- where content is properly
> laid out in an accessible form on all manner of devices including
> desktops and smart phones?
> [1] http://www.alistapart.com/articles/responsive-web-design/


http://blog.tommorris.org/post/21073443312/introducing-awfulness-js

HTML 3.2 is looking better every day ...


- d.

_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Responsive web design

rotsee
In reply to this post by John Elliot-2

> Are there any initiatives in the MediaWiki community for a MediaWiki
> theme that supports 'responsive design' [1] -- where content is properly
> laid out in an accessible form on all manner of devices including
> desktops and smart phones?
>

I am currently working a bit on the skin for http://säsongsmat.nu to make it more responsive (I've gone through the head and footer, but still have work to do on the article rendering, e.g. hooking into the MW image rendering). Let me know if you want me to share the code!
Best regardsLeo Wallentin    
_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
---
Leo Wallentin
Skype: leo_wallentin
Twitter: @leo_wallentin
Säsongsmat.nu
Reply | Threaded
Open this post in threaded view
|

Re: Responsive web design

Peter Coombe
In reply to this post by John Elliot-2
This is one of the aims of the planned 'Athena' skin:
https://www.mediawiki.org/wiki/Athena

Pete / the wub


On 27 July 2012 11:01, John Elliot <[hidden email]> wrote:

> Are there any initiatives in the MediaWiki community for a MediaWiki
> theme that supports 'responsive design' [1] -- where content is properly
> laid out in an accessible form on all manner of devices including
> desktops and smart phones?
>
> [1] http://www.alistapart.com/articles/responsive-web-design/
>
>
> _______________________________________________
> Wikitech-l mailing list
> [hidden email]
> https://lists.wikimedia.org/mailman/listinfo/wikitech-l

_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Responsive web design

Tei-2
On 27 July 2012 12:53, Peter Coombe <[hidden email]> wrote:
> This is one of the aims of the planned 'Athena' skin:
> https://www.mediawiki.org/wiki/Athena
>
> Pete / the wub

Very interesting. Looks very good already.


On 27 July 2012 12:01, John Elliot <[hidden email]> wrote:
> Are there any initiatives in the MediaWiki community for a MediaWiki
> theme that supports 'responsive design' [1] -- where content is properly
> laid out in an accessible form on all manner of devices including
> desktops and smart phones?
>
> [1] http://www.alistapart.com/articles/responsive-web-design/
>

Ouch. This website is aligned to the left, and designed for a fixed
width of 1024px.

*reads content*

Yet again, we remember that HTML is liquid. Is supposed to be, wen is
made fixed, is because compromises.


On 27 July 2012 12:08, David Gerard <[hidden email]> wrote:

> On 27 July 2012 11:01, John Elliot <[hidden email]> wrote:
>
>> Are there any initiatives in the MediaWiki community for a MediaWiki
>> theme that supports 'responsive design' [1] -- where content is properly
>> laid out in an accessible form on all manner of devices including
>> desktops and smart phones?
>> [1] http://www.alistapart.com/articles/responsive-web-design/
>
>
> http://blog.tommorris.org/post/21073443312/introducing-awfulness-js
>
> HTML 3.2 is looking better every day ...

Infinite scrolling is not always evil.

If you need to show a PDF document as a list of 200 high resolution
JPG files. You can make the page height the resulting height if all
the jpg where downloaded. But only download the JPG the user is
looking at.
If you try the naive approach,and create a html that links with <img>
all the 700KB jpg files,  the page will chocke for most users, because
will ask for too much bandwidth too quick. And maybe the users only
need to look at the first page, to confirm is interesting (maybe are
books, and is the wrong book, or in the wrong language ).

http://es.scribd.com/doc/6457786/Godel-Escher-Bach-by-Douglas-R-Hofstadter-

By making a document become a computer program, we probably lose the
ability to garantee it will end rendering before the end of the
existence of the universe. But is often a good tradeoff.


--
--
ℱin del ℳensaje.

_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Responsive web design

Jon Robson
The Wikipedia mobile site is being made mobile first using responsive
design techniques. The plan is for it to eventually mature into a
responsive Athena skin that can also be used on desktop.
On Jul 27, 2012 4:24 AM, "Tei" <[hidden email]> wrote:

> On 27 July 2012 12:53, Peter Coombe <[hidden email]> wrote:
> > This is one of the aims of the planned 'Athena' skin:
> > https://www.mediawiki.org/wiki/Athena
> >
> > Pete / the wub
>
> Very interesting. Looks very good already.
>
>
> On 27 July 2012 12:01, John Elliot <[hidden email]> wrote:
> > Are there any initiatives in the MediaWiki community for a MediaWiki
> > theme that supports 'responsive design' [1] -- where content is properly
> > laid out in an accessible form on all manner of devices including
> > desktops and smart phones?
> >
> > [1] http://www.alistapart.com/articles/responsive-web-design/
> >
>
> Ouch. This website is aligned to the left, and designed for a fixed
> width of 1024px.
>
> *reads content*
>
> Yet again, we remember that HTML is liquid. Is supposed to be, wen is
> made fixed, is because compromises.
>
>
> On 27 July 2012 12:08, David Gerard <[hidden email]> wrote:
> > On 27 July 2012 11:01, John Elliot <[hidden email]> wrote:
> >
> >> Are there any initiatives in the MediaWiki community for a MediaWiki
> >> theme that supports 'responsive design' [1] -- where content is properly
> >> laid out in an accessible form on all manner of devices including
> >> desktops and smart phones?
> >> [1] http://www.alistapart.com/articles/responsive-web-design/
> >
> >
> > http://blog.tommorris.org/post/21073443312/introducing-awfulness-js
> >
> > HTML 3.2 is looking better every day ...
>
> Infinite scrolling is not always evil.
>
> If you need to show a PDF document as a list of 200 high resolution
> JPG files. You can make the page height the resulting height if all
> the jpg where downloaded. But only download the JPG the user is
> looking at.
> If you try the naive approach,and create a html that links with <img>
> all the 700KB jpg files,  the page will chocke for most users, because
> will ask for too much bandwidth too quick. And maybe the users only
> need to look at the first page, to confirm is interesting (maybe are
> books, and is the wrong book, or in the wrong language ).
>
> http://es.scribd.com/doc/6457786/Godel-Escher-Bach-by-Douglas-R-Hofstadter-
>
> By making a document become a computer program, we probably lose the
> ability to garantee it will end rendering before the end of the
> existence of the universe. But is often a good tradeoff.
>
>
> --
> --
> ℱin del ℳensaje.
>
> _______________________________________________
> Wikitech-l mailing list
> [hidden email]
> https://lists.wikimedia.org/mailman/listinfo/wikitech-l
_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Responsive web design

John Elliot-2
On 2012-07-27 23:52, Jon Robson wrote:
> The Wikipedia mobile site is being made mobile first using responsive
> design techniques. The plan is for it to eventually mature into a
> responsive Athena skin that can also be used on desktop.

Any idea about when the responsive Athena skin might be ready? 1 month,
3 months, a year?






_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Responsive web design

Sumana Harihareswara-2
On 07/27/2012 11:34 AM, John Elliot wrote:
> On 2012-07-27 23:52, Jon Robson wrote:
>> The Wikipedia mobile site is being made mobile first using responsive
>> design techniques. The plan is for it to eventually mature into a
>> responsive Athena skin that can also be used on desktop.
>
> Any idea about when the responsive Athena skin might be ready? 1 month,
> 3 months, a year?

Please note that this conversation might also be cross-posted to or
continued on our design mailing list:
https://lists.wikimedia.org/mailman/listinfo/design

--
Sumana Harihareswara
Engineering Community Manager
Wikimedia Foundation

_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Responsive web design

David Gerard-2
On 27 July 2012 16:35, Sumana Harihareswara <[hidden email]> wrote:

> Please note that this conversation might also be cross-posted to or
> continued on our design mailing list:
> https://lists.wikimedia.org/mailman/listinfo/design


Without joining a whole other list, can I just ask what attention is
being paid to people less connected than San Francisco geeks with
iPads? Editing Wikipedia is presently annoyingly slow on a 1Mbps
connection and pretty much unfeasible on dialup, for example.


- d.

_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Responsive web design

Jon Robson
In reply to this post by John Elliot-2
This would be best answered by Brandon.From a personal point of view if the
mobile site still looks like a mobile site in a desktop browser at the
start of next year I will be somewhat disappointed with myself.

I personally believe that mobile is the likely method for accelerating
athenas development as there are less blockers to do that.

A lot of the existing bottle neck from my perspective is due to a lack of
volunteer developers in the many mobile projects which slows important
things like this down. Aside from the new design we are also planning some
cool stuff for Wiki loves monuments with image uploading via mobile phones
to commons. Poke me off list if you are keen to give time/expertise to help
accelerate important initiatives like this. :)
On Jul 27, 2012 8:34 AM, "John Elliot" <[hidden email]> wrote:

> On 2012-07-27 23:52, Jon Robson wrote:
> > The Wikipedia mobile site is being made mobile first using responsive
> > design techniques. The plan is for it to eventually mature into a
> > responsive Athena skin that can also be used on desktop.
>
> Any idea about when the responsive Athena skin might be ready? 1 month,
> 3 months, a year?
>
>
>
>
>
>
> _______________________________________________
> Wikitech-l mailing list
> [hidden email]
> https://lists.wikimedia.org/mailman/listinfo/wikitech-l
>
_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Responsive web design

Tomasz Finc-2
On Fri, Jul 27, 2012 at 8:47 AM, Jon Robson <[hidden email]> wrote:
> This would be best answered by Brandon.From a personal point of view if the
> mobile site still looks like a mobile site in a desktop browser at the
> start of next year I will be somewhat disappointed with myself.

+1

> I personally believe that mobile is the likely method for accelerating
> athenas development as there are less blockers to do that.

We should be looking at Athena (and other projects like it) as
guidance for how were going to approach contribution projects on
mobile. Our focus for the next year is to not just grow the readership
base but to also grow the contributor base. We've never had as many
eyes on Wikipedia as before who can't contribute. Mobile users can't
be second class citizens within the Wikimedia projects. We have to
build all new pipelines on mobile devices to make this happen. These
contributor methods may look drastically different then their desktop
counterparts.

Responsive design is an interesting technique for layout but it breaks
down for functionality. A mobile phone, a tablet, and a desktop/laptop
are used very differently. Mimicking the exact same functionality
means your failing to understand what's best for each device.

> A lot of the existing bottle neck from my perspective is due to a lack of
> volunteer developers in the many mobile projects which slows important
> things like this down. Aside from the new design we are also planning some
> cool stuff for Wiki loves monuments with image uploading via mobile phones
> to commons. Poke me off list if you are keen to give time/expertise to help
> accelerate important initiatives like this.

I'm going to re-iterate what Jon said here. We have numerous projects
going on now and we've been actively mailing, blogging, and tweeting
to get new testers/developers/etc. Were always eager to get more
people involved. If you need to catch up with what were working on
just check the mobile projects pages.

http://www.mediawiki.org/wiki/Mobile

--tomasz

_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Responsive web design

Brandon Harris-4
In reply to this post by Jon Robson

On Jul 27, 2012, at 8:47 AM, Jon Robson <[hidden email]> wrote:

> This would be best answered by Brandon.From a personal point of view if the
> mobile site still looks like a mobile site in a desktop browser at the
> start of next year I will be somewhat disappointed with myself.

        I, too, shall +1 this.  

> I personally believe that mobile is the likely method for accelerating
> athenas development as there are less blockers to do that.

        And again, another +1.  Mobile allows us to do radical rethinks - both by choice and by necessity.  In fact, it was thinking about how we were going to solve some information architecture problems in the mobile space that led to much of the reasoning behind the necessity for Athena in the first place.

> A lot of the existing bottle neck from my perspective is due to a lack of
> volunteer developers in the many mobile projects which slows important
> things like this down. Aside from the new design we are also planning some
> cool stuff for Wiki loves monuments with image uploading via mobile phones
> to commons. Poke me off list if you are keen to give time/expertise to help
> accelerate important initiatives like this. :)

        Athena's timeline is murky.  We are still very much in the design iteration phase as far as layout and interaction goes.  However, the Agora project - a Foundation-specific style guide - is pretty far along and should be completed soon.


---
Brandon Harris, Senior Designer, Wikimedia Foundation

Support Free Knowledge: http://wikimediafoundation.org/wiki/Donate


_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Responsive web design

Terry Chay
In reply to this post by John Elliot-2
Are you a Brandon plant trying to get us to resource Athena again? :-)

On Jul 27, 2012, at 3:01 AM, John Elliot <[hidden email]> wrote:

> Are there any initiatives in the MediaWiki community for a MediaWiki
> theme that supports 'responsive design' [1] -- where content is properly
> laid out in an accessible form on all manner of devices including
> desktops and smart phones?
>
> [1] http://www.alistapart.com/articles/responsive-web-design/
>
>
> _______________________________________________
> Wikitech-l mailing list
> [hidden email]
> https://lists.wikimedia.org/mailman/listinfo/wikitech-l


_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Responsive web design

John Elliot-2
I don't know who Brandon is. I'm planning on bundling MediaWiki with a
product of mine and I'd like it to work well with smart phones and other
mobile devices. I'm not sure that I would have the time or expertise to
get the Athena theme done by myself and just wanted to know if it was on
the agenda. Look forward to seeing it when it ships.

On 2012-07-28 08:36, Terry Chay wrote:

> Are you a Brandon plant trying to get us to resource Athena again? :-)
>
> On Jul 27, 2012, at 3:01 AM, John Elliot <[hidden email]> wrote:
>
>> Are there any initiatives in the MediaWiki community for a MediaWiki
>> theme that supports 'responsive design' [1] -- where content is properly
>> laid out in an accessible form on all manner of devices including
>> desktops and smart phones?
>>
>> [1] http://www.alistapart.com/articles/responsive-web-design/
>>
>>
>> _______________________________________________
>> Wikitech-l mailing list
>> [hidden email]
>> https://lists.wikimedia.org/mailman/listinfo/wikitech-l
>
>
> _______________________________________________
> Wikitech-l mailing list
> [hidden email]
> https://lists.wikimedia.org/mailman/listinfo/wikitech-l
>

_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Responsive web design

Trevor Parscal-2
I think a better answer to your question is: "nothing that's been
officially resourced at this time".

We currently have a 2-device strategy, which means we redirect some devices
to a mobile site, and the rest remain at the normal "desktop" site. The
closest thing to responsive design we have in production is the way the
Vector skin adjusts it's layout – if not subtly – if the browser is above
or below a given threshold.

Responsive design is a hot topic, and there are a lot of really exiting
projects in this area right now, but there are also some overlooked issues.
Many mobile devices are amazingly powerful, but sending the same JavaScript
and CSS payloads to all devices still results in a much heavier payload on
smaller less capable devices that in some cases may even cause them to
crash. This can be fixed using a variety of techniques, but it illustrates
how responsive design – when done right – is more than a new skin that
delivers HTML and some CSS, only for all the same extensions, user scripts
and gadgets that were designed with the desktop in mind to pile on and clog
up the "tubes" while wreaking havoc on "simplified" pages presented to
mobile users.

A good example of this problem's unclear solution is how the mobile site
does not load the same extensions, user scripts and styles and gadgets as
the desktop site; and what's more is the issue with the use of inline
styles throughout the site and how difficult it is to deal with on mobile
devices with an alternate – simplified – layout.

All this said, MediaWiki is an open source project and you shouldn't ever
feel the need to wait until something "ships". I would recommend you start
out with an existing skin, tear it down to it's simplest elements, and then
start adding CSS and modifying the HTML output until you have what you are
looking for. If you need some help, this list is a good place to be, but
also make sure and get onto irc.freenode.net #mediawiki where you might be
able to get quick answers to simpler questions.

- Trevor

On Sat, Jul 28, 2012 at 2:11 AM, John Elliot <[hidden email]> wrote:

> I don't know who Brandon is. I'm planning on bundling MediaWiki with a
> product of mine and I'd like it to work well with smart phones and other
> mobile devices. I'm not sure that I would have the time or expertise to
> get the Athena theme done by myself and just wanted to know if it was on
> the agenda. Look forward to seeing it when it ships.
>
> On 2012-07-28 08:36, Terry Chay wrote:
> > Are you a Brandon plant trying to get us to resource Athena again? :-)
> >
> > On Jul 27, 2012, at 3:01 AM, John Elliot <[hidden email]> wrote:
> >
> >> Are there any initiatives in the MediaWiki community for a MediaWiki
> >> theme that supports 'responsive design' [1] -- where content is properly
> >> laid out in an accessible form on all manner of devices including
> >> desktops and smart phones?
> >>
> >> [1] http://www.alistapart.com/articles/responsive-web-design/
> >>
> >>
> >> _______________________________________________
> >> Wikitech-l mailing list
> >> [hidden email]
> >> https://lists.wikimedia.org/mailman/listinfo/wikitech-l
> >
> >
> > _______________________________________________
> > Wikitech-l mailing list
> > [hidden email]
> > https://lists.wikimedia.org/mailman/listinfo/wikitech-l
> >
>
> _______________________________________________
> Wikitech-l mailing list
> [hidden email]
> https://lists.wikimedia.org/mailman/listinfo/wikitech-l
>
_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l