title: How to build a swipable UI for medium size (7") tablet web-app
body: <p>I'm trying to build a web-app that will be used on a specific size tablet (3.5"x6").  I've worked with cell phone UI in the past, and primarily with desktops, but I have no experience with touch and tablets specifically. </p>
  
  <p>I'm attaching a basic wireframe of the app.  It will be used during practice rounds in golf events by marshals (people stationary at every tee), to indicate which players are present at which hole so the spectators can easily find them.</p>
  
  <p>This is the 3rd time we are actually building this app, but first time for a tablet.</p>
  
  <p>I would like to have a fixed position div with half the alphabet on each size of the screen for easily narrowing down the players (I'm guessing implementing that would be pretty easy with AngularJS or jQuery).  The main part of the interface would be taken by two columns, the column on the left would have a toggle between selecting players coming up from a prior hole, or all players in the event. The column on the right would display players added to this hole.  I'd like the UX to work similar to the Gmail app on Android.  Swipe the player name to the right to add him to the Here column, and display an Undo button in that place.  Swipe left on the player in the Here column to remove from the list if necessary.</p>
  
  <p>What would be the best framework to use and how would it help me achieve this? <a href="https://material.angularjs.org/" rel="nofollow noreferrer">https://material.angularjs.org/</a> looks very promising, but I have no experience with it.  Maybe Bootstrap, AnglularJS UI or similar, that would help me easily create this?  My biggest challenge is creating the touch responsive div, while keeping the rest of the divs in their fixed positions.  </p>
  
  <p>Any suggestions on how to get this UI implemented?</p>
  
  <p><img src="https://i.stack.imgur.com/ZrQbh.jpg" alt="enter image description here"></p>