Tags:
create new tag
, view all tags

Feature Proposals » Responsive TopMenuSkin

Summary

Current State: Developer: Reason: Date: Concerns By: Bug Tracking: Proposed For:
UnderConstruction PeterThoeny AcceptedBy7DayFeedbackPeriod 2015-04-28   TWikibug:Item7649 KampalaRelease

Edit Form

TopicSummary:
CurrentState:
CommittedDeveloper:
ReasonForDecision:
DateOfCommitment:   Format: YYYY-MM-DD
ConcernRaisedBy:
BugTracking:
OutstandingIssues:
RelatedTopics:
InterestedParties:
ProposedFor:
TWikiContributors:
 

Motivation

The TopMenuSkin (TWiki's default skin) is designed for desktop use, it looks nice and has good functionality. This skin however performs badly on a small screen, such as smartphones and tablets.

It is important that the default skin is mobile friendly since more and more traffic shifts to mobile devices. Case in point: Google just started to penalize websites that are not mobile friendly with a lower page rank.

Description and Documentation

Enhance the TopMenuSkin with ResponsiveWebDesign, e.g. to change its layout based on screen size:

  • Different (vertical?) layout for pulldown menus.
  • Different layout for jump box and search box.
  • Auto-resize large images in page content to max size of device?
  • What else?

Another approach is to create a new mobile-friendly skin as suggested in DefaultMobileSkin. The hybrid approach here is easier for users, but is likely more complex to maintain.

Examples

Impact

WhatDoesItAffect: Skins, UI

Implementation

-- Contributors: Peter Thoeny - 2015-04-29

Discussion

I put myself as a committed developer, however I doubt I can start working on this anytime soon. If someone would like to work on this feel free to change the committed developer.

-- Peter Thoeny - 2015-04-29

This is now an accepted feature request based on the 7 days feedback period.

-- Peter Thoeny - 2015-05-07

I intend to split this up into several projects. First one:

-- Peter Thoeny - 2015-05-07

The responsive multi-column page layout feature is now implemented. I patched TWiki.org's TWiki.

Example: (resize the window width, or look at this page with a smartphone)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra ante ac augue sagittis semper. Vestibulum sed urna quam. Phasellus eleifend dolor id dui dictum lobortis. Etiam enim erat, fermentum eget libero non, pretium vestibulum nisi. Nam eget nisi diam. Cras egestas, nibh a malesuada hendrerit, tellus turpis gravida dolor, at fermentum ipsum libero id eros. Mauris a nunc turpis. Fusce turpis dui, blandit nec maximus at, sagittis et arcu. Duis eros sapien, accumsan sed varius eget, elementum eu sapien. Nulla congue, nulla efficitur gravida porta, leo ex feugiat purus, sit amet sagittis leo arcu at magna. Pellentesque eleifend, libero quis consectetur tincidunt, orci ipsum scelerisque turpis, vulputate feugiat risus orci non odio. Integer id enim turpis. Cras et nisl quis massa ornare maximus id sit amet justo. Mauris at mi eget nisi imperdiet ullamcorper.

diagram.png

Nam tortor arcu, tincidunt ac elit et, fringilla vestibulum ante. Vestibulum odio arcu, accumsan ac consequat vel, mollis at tellus. Nam sagittis tellus egestas, scelerisque odio eu, pharetra justo. Nam tincidunt, leo at rutrum consequat, augue felis feugiat diam, ac ullamcorper nunc mauris a purus. In hac habitasse platea dictumst. Aenean mollis, nisi eu eleifend elementum, ante dolor placerat dolor, pretium gravida diam lectus ac dolor. Curabitur tempor accumsan tortor ac sodales.

Curabitur interdum vehicula fermentum. Donec in nunc ligula. Fusce id viverra tortor. Praesent vitae arcu faucibus, iaculis augue ut, lobortis lectus. Integer commodo ullamcorper ante tristique congue. Praesent lectus lectus, dapibus in orci ut, egestas finibus enim. Donec euismod dolor porttitor imperdiet feugiat. Sed euismod quis erat id pharetra. Aenean venenatis eros mauris, a porta neque imperdiet at. Vivamus ultrices sem nec velit viverra lobortis. Praesent tristique lobortis ante.

Pellentesque placerat convallis massa, volutpat volutpat elit ultricies eu. Cras lacinia, massa ac aliquet ultricies, felis massa scelerisque erat, sed sodales velit ipsum eu turpis. Praesent viverra lacinia eros et aliquam. Nullam congue diam at rutrum viverra. Donec porta venenatis orci, vel aliquet tortor commodo vel. Praesent vitae mattis orci. Cras sed nunc dapibus sapien commodo posuere. Nulla feugiat commodo lacus ut commodo. Morbi tempor sollicitudin lacus eleifend bibendum. Phasellus vitae tincidunt libero. Fusce tempus rutrum egestas. Donec sed malesuada odio. Duis cursus, dui ut suscipit vehicula, tortor nisl sagittis elit, in accumsan risus dui a velit. Vestibulum sed ante libero. Duis ac lobortis lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

-- Peter Thoeny - 2015-05-07

Edit | Attach | Watch | Print version | History: r4 < r3 < r2 < r1 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r4 - 2015-06-18 - PeterThoeny
 
  • Learn about TWiki  
  • Download TWiki
This site is powered by the TWiki collaboration platform Powered by Perl Hosted by OICcam.com Ideas, requests, problems regarding TWiki? Send feedback. Ask community in the support forum.
Copyright © 1999-2017 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.