[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

[EP-tech] UX/UI Refresh - good practice advice sought

Check http://roar.uel.ac.uk/ - that's bootstrap over eprints.

Tip: check you actually get traffic (eg via GA) from mobile devices before
bothering :-) I doubt many people browse research repositories with a phone
but heh, GA should give you a definitive answer.


On Fri, Jul 14, 2017 at 5:14 PM, Denis Pitzalis <denis.pitzalis at gmail.com>

> Hi guys,
> Have a look at http://en.unesco.org/mediabank it is bootstrap based and
> heavily reformatted using JavaScript. The code in using is available in
> github, under /unesco
> I hope this helps,
> Denis
> On July 14, 2017 11:33:02 AM GMT+02:00, Christopher Gutteridge <
> cjg at ecs.soton.ac.uk> wrote:
>> The public facing stuff can be made responsive. I've done a fair bit of
>> work to apply our corporate style to eprints.soton.ac.uk
>> However, where it's tricky is that the deposit workflow has HTML
>> generated by code, not templates, and lots of it uses tables. It is
>> possible to have an alternate template applied for logged in users, which
>> goes some way to address this, but isn't a full solution.
>> Where EPrints got it right was all the CSS classes are prefixed with ep_
>> which means it's possible to merge in a corporate stylesheet and they won't
>> clash in names of classes. However, our university style sheet adds
>> unexpected style to a few basic HTML elements, such as tables, and I had to
>> make some additional css to override this inside EPrints pages as it made a
>> mess.
>> The place I've put in most of my effort was the item record pages, such
>> as https://eprints.soton.ac.uk/267112/ , which are now properly
>> responsive.
>> Where I had the biggest challenge is that the XML nature of EPrints
>> templates mean that the whole main page content needs to be wrapped in a
>> single element, and some pages are automatically generated HTML, others are
>> quite flexible. This means you can't have several full width "content"
>> sections on one page, and wrapper the whole page in a single content
>> section for automatic pages. (sorry, hard to explain). Pages likes the
>> search results are quite constrained, so I'd start there, learn the
>> constraints, and then work within those constraints for more general pages
>> like the homepage and item-summary pages. I wouldn't try to make it fully
>> responsive for the "user area" (logged in) parts of the site, as that's a
>> much bigger and harder job.
>> We've also put a lot of thought into the sections and ordering of the
>> metadata on the summary pages, trying to put the most specialised
>> information lower down.
>> As part of this set of improvements, we also stopped using full citations
>> for search results, and have gone for a cleaner display for people to skim
>> read. https://eprints.soton.ac.uk/cgi/search/archive/simple?
>> screen=Search&dataset=archive&q=eprints&_action_search=Search but we
>> still put the full citation on the summary page.
>> At Southampton we've got one of the most established EPrints repositories
>> (as you'd expect) and we've invested hugely in back-end features, but at
>> the expense of the public user interface which was always "important, but
>> not as important as X".
>> One other interesting decision we've made is to flatten out the structure
>> of the organisation. We have faculties which are administrative groupings,
>> but not relevant to an external reader, so in our revised approach,
>> "Chemistry" is now part of an alphabetically ordered list of departments,
>> rather than you having to find it under whatever faculty grouping it's in.
>> This is a work in progress, but I think we're heading in the right
>> direction. https://eprints.soton.ac.uk/view/divisions/ (nb. very few
>> records as we have to run a full update to repopulate our new 'divisions'
>> field and we're waiting for a time when we can cause that load on the
>> system without causing a bother).
>> There's some things in EPrints that could do with a "responsive" tweak,
>> such as the 2 column list of options in forms, and the 4 column list of
>> options some /views/ have. This is quite hard to do in the code without
>> risking messing up existing repositories when they upgrade. One solution
>> would be to use javascript (probably jQuery) to tweak the HTML after the
>> page has loaded to be a more responsive "shape".
>> When we built the javascript elements of EPrints we backed "prototype.js"
>> rather than jQuery, but for bootstrap you almost certainly want to use
>> jQuery too, so you'll need to ensure you have:
>>   <script type="text/javascript">$.noConflict();</script>
>> Because both libraries like to take over the "$" variable. The noConflict
>> mode for jquery means it lets prototype.js have the $ and it just uses
>> "jQuery" for everything so where you'd normally do $("p.special") you'd do
>> jQuery("p.special") instead. No all jQuery extensions and libraries that
>> use it respect that however, so watch out. Worst case, you can just search
>> and replace over them.
>> Sorry, that turned into more of a blogpost!
>> On 14/07/2017 08:28, Vials Moore, Adam wrote:
>> Hey all!
>> As a summer project we?re updating the CSS/HTML front end on our eprints
>> front end (I know, I love pain).
>> Last time round (2+ years ago) I just hacked the relevant CSS into
>> template/default.xml and static/index.html ? but now we have 2 repositories
>> (both 3.3.15) on different servers and I?d really like to:
>> Update to at least bootstrap ? so that it looks OK on mobile devoices /
>> not horrible at different resolutions etc &c
>> Make everything a little more clean and modular
>> Not have to do it lots of times (preferably!)
>> I do have some corporate CSS to include so can?t completely freeform . .
>> . .
>> All advice appreciated
>> *** Options: http://mailman.ecs.soton.ac.uk/mailman/listinfo/eprints-tech
>> *** Archive: http://www.eprints.org/tech.php/
>> *** EPrints community wiki: http://wiki.eprints.org/
>> *** EPrints developers Forum: http://forum.eprints.org/
>> --
>> Christopher Gutteridge -- http://users.ecs.soton.ac.uk/cjg
>> University of Southampton Open Data Service: http://data.southampton.ac.uk/
>> You should read our Web & Data Innovation blog: http://blogs.ecs.soton.ac.uk/webteam/
> --
> Sent from my Android device with K-9 Mail. Please excuse my brevity.
> *** Options: http://mailman.ecs.soton.ac.uk/mailman/listinfo/eprints-tech
> *** Archive: http://www.eprints.org/tech.php/
> *** EPrints community wiki: http://wiki.eprints.org/
> *** EPrints developers Forum: http://forum.eprints.org/
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://mailman.ecs.soton.ac.uk/pipermail/eprints-tech/attachments/20170715/712efbdf/attachment-0001.html