Wiki source code of Responsive Skin
Last modified by Vincent Massol on 2024/02/26 17:52
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | {{include document="XWiki.DesignClassSheet"/}} | ||
| 2 | |||
| 3 | = Goal = | ||
| 4 | |||
| 5 | The goal of this project is to create a fluid and responsive skin for XWIKI in order to accommodate the wide range of web capable device. | ||
| 6 | |||
| 7 | = Approach = | ||
| 8 | |||
| 9 | Though the end result will be entirely fluid-changing as a web browser is resized-it will have semantic breakpoints (currently phone, tablet, desktop) in order to create a true tailored experience in common devices. As per UXBooth and StatCounter, these breakpoints will at the moment be (width in px): 320, 480(mobile), 640, 768(tablet), 1024,1366(desktop)). 480, 768. 1366 will be the focus of the first iteration. | ||
| 10 | |||
| 11 | After the general layout is completed, typography will be checked. Especially with the advent of super-phones with high-density px screen, this will be necessary. (Support from devs with phones to test real world scenarios would be appreciated (I have access to bb, (wvga) android, wp). | ||
| 12 | |||
| 13 | Images are removed except for a 2x2px block for the dotted background (that itself could be removed) to speed up loading time and remove any additional server polling. | ||
| 14 | |||
| 15 | Design will be bottom up, as a result of the limitation of mobile devices. | ||
| 16 | |||
| 17 | = Tentative Timeline = | ||
| 18 | |||
| 19 | --Hol--istic = overall layout of the skin. | ||
| 20 | |||
| 21 | Week 1 [21 May - 25 May]. Design explorations: holistic view (UI wireframe) [90%] | ||
| 22 | Week 2 [28 May - 1 June]. Design explorations: common widgets/features(UI wireframe) [100%][[http://enterprise.xwiki.org/xwiki/bin/view/Main/Features]] **MILESTONE 1: Clear concept of what is to be coded/written** [[http://extensions.xwiki.org/xwiki/bin/view/Main/WebHome#|t=extensions&p=1&l=30&s=doc.creationDate&d=desc&name=app]] | ||
| 23 | Week 3 [4 June - 8 June]. Raw Semantics that work cross platform [100%] | ||
| 24 | Week 4 [11 June - 15 June]. Desktop implementation (holistic) (css & js) [opera, chrome, safari, ie] [100%] | ||
| 25 | Week 5 [18 June - 22 June]. Desktop implementation (holistic) (css & js) [opera, chrome, safari, ie] (this weeks specifically watered down browser (eg. ie7, ie6?). begin perfecting fluidity of the responsive design (holistic) until tablet size/mobile size/device specific changes (eg. dropdown for mobile) [100%] | ||
| 26 | Week 6 [25 June - 29 June]. perfecting fluidity of the responsive design (holistic) until tablet size/mobile size/device specific changes (eg. dropdown for mobile) [90%] MILESTONE 2: Codes are written and ready to be implemented into XWiki. | ||
| 27 | Week 7-9 [2 July - 13 July]. implementing into xwiki [40%] [midterm] **MILESTONE 3: Codes are implemented, and usable** | ||
| 28 | Week 9-10 [16 July - 27 July]. Choose priority of features to be worked on to be made responsive. Begin working on features that should be made responsive [100%] [search suggest, livetables, blog, color themes] | ||
| 29 | Week 11 [30 July - 3 Aug]. Continue working on features **MILESTONE 4: Chosen features are working and responsive** [100%] | ||
| 30 | Week 12 [6 Aug - 10 Aug]. Clean up code/optimize/bug fixes etc. [100%] | ||
| 31 | Week 13 [13 Aug]. **MILESTONE 5: Create distributable version** | ||
| 32 | |||
| 33 | See how everything is actually developing (demo): [[http://jssolichin.com/xwiki]] | ||
| 34 | Download src for implementation on XWiki: [[https://github.com/jssolichin/xo5]] | ||
| 35 | |||
| 36 | = Explorations = | ||
| 37 | |||
| 38 | * Utilizing true drop down in order to take advantage of a mobile OS' dropdown system (eg. {{html}}<a href="iphone [[image:http://qph.cf.quoracdn.net/main-qimg-047773f000eeb9037febd55aff32d10c"> iPhone</a>{{/html}}, further reference at{{html}}<a href="http://open.blogs.nytimes.com/tag/ipad/"> New York Times</a> from their tablet app. a la <a href="http://css-tricks.com/convert-menu-to-dropdown/"> this</a>{{/html}}) | ||
| 39 | * Should there be an attempt to support 100% non-javascript capable browser? esp. since some core functions of xwiki requires javascript (such as live tables) if I remember correctly. | ||
| 40 | *how far back do we specifically support? ie6? | ||
| 41 | |||
| 42 | = Mock up = | ||
| 43 | |||
| 44 | Columns are removed, and everything is vertically stacked. The light grayish background will help to separate these widgets, since it will become unclear with everything stacked (new section or another widget?). Quicklinks font is bigger to facilitate small screens. Alternatively, like in "spaces" links, the links are given a gray background with a block display in order to help finger pressing while still keeping typography flow. | ||
| 45 | [[image:http://jssolichin.com/public/mobile.jpg]] | ||
| 46 | |||
| 47 | = Mock up 2 = | ||
| 48 | |||
| 49 | With the advice of the community, here is another version of the skin--this time more unique and less colibri:-- | ||
| 50 | |||
| 51 | [[image:http://jssolichin.com/public/2/desktop.jpg]] | ||
| 52 | |||
| 53 | [[image:http://jssolichin.com/public/2/mobile.jpg]] | ||
| 54 | |||
| 55 | = Mock up 3 = | ||
| 56 | |||
| 57 | |||
| 58 | [[image:http://jssolichin.com/public/3/desktop.jpg]] | ||
| 59 | [[image:http://jssolichin.com/public/3/desktop2.jpg]] | ||
| 60 | [[image:http://jssolichin.com/public/3/desktop3.jpg]] | ||
| 61 | [[image:http://jssolichin.com/public/3/desktop4.jpg]] | ||
| 62 | |||
| 63 | [[image:http://jssolichin.com/public/3/mobille.jpg]] | ||
| 64 | [[image:http://jssolichin.com/public/3/mobille2.jpg]] | ||
| 65 | [[image:http://jssolichin.com/public/3/mobille2.jpg]] | ||
| 66 | |||
| 67 | This design divides navigation into 3, corresponding with borders. As the user hovers nears the edge, it would reveal the whole link/more info. The overflowed text serves to give them the idea there is more. By putting the navigation in the borders, it becomes more static in a way--that is on each new page, the "navigation links" placement will always be the same area. Also, by detaching the links from the content, its size has more flexibility allowing it to be bigger without interrupting the flow of text-- allowing for bigger size clickable area. | ||
| 68 | |||
| 69 | In the mobile version, instead of hovering, the user would click. So it's a bit similar to the Mobile Patterns[1] link Caty sent a while back since it is like a sidebar to be revealed kind of thing. | ||
| 70 | |||
| 71 | Furthermore, this skin will really put the content front and center. And again, this mockup is incomplete, i just wanted to give you a heads up on this current exploration and was wondering your thoughts. | ||
| 72 | |||
| 73 | = Mock up 4 = | ||
| 74 | |||
| 75 | |||
| 76 | [[image:http://jssolichin.com/public/4/1.%20Home.png]] | ||
| 77 | [[image:http://jssolichin.com/public/4/2.%20Home-comm.png]] | ||
| 78 | [[image:http://jssolichin.com/public/4/3.%20Home-navhover.png]] | ||
| 79 | |||
| 80 | [[image:http://jssolichin.com/public/4/4.%20mobile.png]] | ||
| 81 | [[image:http://jssolichin.com/public/4/5.%20mobile-menu.png]] | ||
| 82 | |||
| 83 | The idea is that the sidebar would be replicated, | ||
| 84 | but hidden in the mobile (except for the hint that it's there.) | ||
| 85 | |||
| 86 | Everything non-content is combined. I think that if you are looking at the | ||
| 87 | comments/attachment/other sections, you are not thinking about navigating | ||
| 88 | away from the page so the nav section is not that needed. So this | ||
| 89 | consolidates/saves space. Let me know if this is the wrong mentality. | ||
| 90 | |||
| 91 | = Mock up 5 = | ||
| 92 | |||
| 93 | |||
| 94 | http://jssolichin.com/public/4/4.%20Home-alt.png | ||
| 95 | http://jssolichin.com/public/4/3.%20Home-navhover.png | ||
| 96 | http://sdrv.ms/LO70JI | ||
| 97 | |||
| 98 | = Mock up 5B = | ||
| 99 | |||
| 100 | |||
| 101 | http://sdrv.ms/LLmQ5i | ||
| 102 | |||
| 103 | The goal is to consolidate everything to a section. (breadcrumbs/where you | ||
| 104 | are & navigation/supplementary info & content) | ||
| 105 | eg. the page breadcrumb has been added into the global bread crumb (is this | ||
| 106 | possible?); all page navigation/meta are in the sidebar (such that, again, | ||
| 107 | the main area is just content, and the sidebar are all additional infos) | ||
| 108 | |||
| 109 | The way i'm envisioning the responsive design for the content is like this: | ||
| 110 | When the screen is big enough, it will become 2 column. as we hit smaller | ||
| 111 | screen (eg. tablet) it will become one column. Then finally, the page would | ||
| 112 | collapse such that only the header is visible for mobile (thus also | ||
| 113 | becoming a table of contents) until being tapped, which will open the div. | ||
| 114 | |||
| 115 | As mentioned before, the same "sidebar" will appear when you click the | ||
| 116 | navigation hint on mobile (so it will be in a way consistent). Though with | ||
| 117 | this development i should probably add more than navigation (eg. NAVIGATION | ||
| 118 | / INFO / ETC. or something). | ||
| 119 | |||
| 120 | = Approach to color themes = | ||
| 121 | |||
| 122 | In order to have the most diverse amount of color themes, the skin will have 2 options. One in which it uses xwiki's built in color themes (allowing the use of already sundry color themes available), and a second one which allows the user to choose a custom color theme made specifically for the skin (more unique and specific looking). |
