<?xml version="1.0" encoding="utf-8" ?><rss version="2.0" xml:base="http://www.hypermodernism.com/taxonomy/term/25/all" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Responsive Web</title>
    <link>http://www.hypermodernism.com/taxonomy/term/25/all</link>
    <description></description>
    <language>en</language>
          <item>
    <title>Traderlynk -Tincan</title>
    <link>http://www.hypermodernism.com/projects/traderlynk-tincan</link>
    <description>&lt;div class=&quot;field field-type-filefield field-field-project-image-1&quot;&gt;
    &lt;div class=&quot;field-items&quot;&gt;
            &lt;div class=&quot;field-item odd&quot;&gt;
                    &lt;img  class=&quot;imagefield imagefield-field_project_image_1&quot; width=&quot;450&quot; height=&quot;325&quot; title=&quot;Tincan&quot; alt=&quot;Tincan&quot; src=&quot;http://www.hypermodernism.com/sites/default/files/project/tincan_annotated_small.jpg?1500024243&quot; /&gt;        &lt;/div&gt;
        &lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;field field-type-nodereference field-field-client&quot;&gt;
      &lt;div class=&quot;field-label&quot;&gt;Client:&amp;nbsp;&lt;/div&gt;
    &lt;div class=&quot;field-items&quot;&gt;
            &lt;div class=&quot;field-item odd&quot;&gt;
                    &lt;a href=&quot;/clients/option-computers-dealhub&quot;&gt;Option Computers - Dealhub&lt;/a&gt;        &lt;/div&gt;
        &lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;Intercom like communications for the financial community. I was employed to design and build the user interface within the browser. The application was implemented in vanilla javascript and made use of the  Web audio API to allow client side control of volume panning and recordings playback. The Web speech to text api is used to translate the text before sending to the server. The web midi API was used to connect to external hardware controls.&lt;/p&gt;
&lt;div class=&quot;field field-type-link field-field-project-url&quot;&gt;
    &lt;div class=&quot;field-items&quot;&gt;
            &lt;div class=&quot;field-item odd&quot;&gt;
                    &lt;a href=&quot;http://www.hypermodernism.com/sites/default/files/tincan_annotated2l.jpg&quot; target=&quot;_blank&quot;&gt;URL&lt;/a&gt;        &lt;/div&gt;
        &lt;/div&gt;
&lt;/div&gt;
</description>
     <category domain="http://www.hypermodernism.com/category/projects/web-apps">Web Apps</category>
 <category domain="http://www.hypermodernism.com/category/design-skills/graphic-design">Graphic Design</category>
 <category domain="http://www.hypermodernism.com/category/design-skills/responsive-web">Responsive Web</category>
 <category domain="http://www.hypermodernism.com/category/design-skills/usability">Usability</category>
 <category domain="http://www.hypermodernism.com/category/design-skills/accessibility">Accessibility</category>
 <category domain="http://www.hypermodernism.com/category/other-skills/audio">Audio</category>
 <enclosure url="http://www.hypermodernism.com/sites/default/files/tincan_annotated2l.jpg" length="302335" type="image/jpeg" />
 <pubDate>Fri, 14 Jul 2017 09:29:38 +0000</pubDate>
 <dc:creator>admin</dc:creator>
 <guid isPermaLink="false">136 at http://www.hypermodernism.com</guid>
  </item>
  <item>
    <title>Traderlynk Soft Turret</title>
    <link>http://www.hypermodernism.com/projects/traderlynk-soft-turret</link>
    <description>&lt;div class=&quot;field field-type-filefield field-field-project-image-1&quot;&gt;
    &lt;div class=&quot;field-items&quot;&gt;
            &lt;div class=&quot;field-item odd&quot;&gt;
                    &lt;img  class=&quot;imagefield imagefield-field_project_image_1&quot; width=&quot;450&quot; height=&quot;325&quot; title=&quot;Traderlynk Soft Turret&quot; alt=&quot;Traderlynk Soft Turret&quot; src=&quot;http://www.hypermodernism.com/sites/default/files/project/belfry.jpg?1488382412&quot; /&gt;        &lt;/div&gt;
        &lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;field field-type-nodereference field-field-client&quot;&gt;
      &lt;div class=&quot;field-label&quot;&gt;Client:&amp;nbsp;&lt;/div&gt;
    &lt;div class=&quot;field-items&quot;&gt;
            &lt;div class=&quot;field-item odd&quot;&gt;
                    &lt;a href=&quot;/clients/option-computers-dealhub&quot;&gt;Option Computers - Dealhub&lt;/a&gt;        &lt;/div&gt;
        &lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;Implementation of a financial traders phone system as a single page web app.&lt;/p&gt;
&lt;p&gt;I was employed to design and implement the UI which was achieved through low latency native Web Components/Javascript, Server sent events and a REST API connected to the Traderlynk Server.&lt;br /&gt;
D3 is used to visually represent phone connections and the Web audio API is used to playback and historical recordings with controls to search and alter playback speed.&lt;/p&gt;
&lt;div class=&quot;field field-type-link field-field-project-url&quot;&gt;
    &lt;div class=&quot;field-items&quot;&gt;
            &lt;div class=&quot;field-item odd&quot;&gt;
                    &lt;a href=&quot;http://www.hypermodernism.com/sites/default/files/belfry_big.jpg&quot; target=&quot;_blank&quot;&gt;URL&lt;/a&gt;        &lt;/div&gt;
        &lt;/div&gt;
&lt;/div&gt;
</description>
     <category domain="http://www.hypermodernism.com/category/projects/web-apps">Web Apps</category>
 <category domain="http://www.hypermodernism.com/category/design-skills/graphic-design">Graphic Design</category>
 <category domain="http://www.hypermodernism.com/category/design-skills/responsive-web">Responsive Web</category>
 <category domain="http://www.hypermodernism.com/category/design-skills/usability">Usability</category>
 <enclosure url="http://www.hypermodernism.com/sites/default/files/belfry_big.jpg" length="195216" type="image/jpeg" />
 <pubDate>Wed, 01 Mar 2017 15:33:32 +0000</pubDate>
 <dc:creator>admin</dc:creator>
 <guid isPermaLink="false">135 at http://www.hypermodernism.com</guid>
  </item>
  <item>
    <title>Wirelynk Unified Communications UI</title>
    <link>http://www.hypermodernism.com/projects/wirelynk-unified-communications-ui</link>
    <description>&lt;div class=&quot;field field-type-filefield field-field-project-image-1&quot;&gt;
    &lt;div class=&quot;field-items&quot;&gt;
            &lt;div class=&quot;field-item odd&quot;&gt;
                    &lt;img  class=&quot;imagefield imagefield-field_project_image_1&quot; width=&quot;450&quot; height=&quot;325&quot; title=&quot;Wirelynk&quot; alt=&quot;Wirelynk&quot; src=&quot;http://www.hypermodernism.com/sites/default/files/project/small_wirelynk_comp.jpg?1435926664&quot; /&gt;        &lt;/div&gt;
        &lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;field field-type-nodereference field-field-client&quot;&gt;
      &lt;div class=&quot;field-label&quot;&gt;Client:&amp;nbsp;&lt;/div&gt;
    &lt;div class=&quot;field-items&quot;&gt;
            &lt;div class=&quot;field-item odd&quot;&gt;
                    &lt;a href=&quot;/clients/option-computers-dealhub&quot;&gt;Option Computers - Dealhub&lt;/a&gt;        &lt;/div&gt;
        &lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;Wirelynk is a follow up to the Traderlynk product. It provides a simple interface for financial organisations to connect to their private wires via the Microsoft lync/Skype for business infrastructure. Multiple handsets, speakers and intercom functionality of both SIP and WebRTC can be used concurrently providing a turret like experience.&lt;br /&gt;
The application is put together using vanilla Javascript, html5 and css3 and is hosted either in the lync/skype for business context window, browser, mobile or in a chrome extension for the desktop.&lt;/p&gt;
&lt;div class=&quot;field field-type-link field-field-project-url&quot;&gt;
    &lt;div class=&quot;field-items&quot;&gt;
            &lt;div class=&quot;field-item odd&quot;&gt;
                    &lt;a href=&quot;http://www.hypermodernism.com/sites/default/files/largecomp_skype_and_ext.jpg&quot; target=&quot;_blank&quot;&gt;URL&lt;/a&gt;        &lt;/div&gt;
        &lt;/div&gt;
&lt;/div&gt;
</description>
     <category domain="http://www.hypermodernism.com/category/projects/web-apps">Web Apps</category>
 <category domain="http://www.hypermodernism.com/category/design-skills/responsive-web">Responsive Web</category>
 <category domain="http://www.hypermodernism.com/category/design-skills/usability">Usability</category>
 <category domain="http://www.hypermodernism.com/category/other-skills/consultancy">Consultancy</category>
 <pubDate>Fri, 03 Jul 2015 12:40:28 +0000</pubDate>
 <dc:creator>admin</dc:creator>
 <guid isPermaLink="false">134 at http://www.hypermodernism.com</guid>
  </item>
  <item>
    <title>Traderlynk Unified Communications UI</title>
    <link>http://www.hypermodernism.com/projects/traderlynk-unified-communications-ui</link>
    <description>&lt;div class=&quot;field field-type-filefield field-field-project-image-1&quot;&gt;
    &lt;div class=&quot;field-items&quot;&gt;
            &lt;div class=&quot;field-item odd&quot;&gt;
                    &lt;img  class=&quot;imagefield imagefield-field_project_image_1&quot; width=&quot;450&quot; height=&quot;325&quot; title=&quot;Traderlynk Unified Communications UI&quot; alt=&quot;Traderlynk Unified Communications UI&quot; src=&quot;http://www.hypermodernism.com/sites/default/files/project/Traderlynk_imac.jpg?1421233060&quot; /&gt;        &lt;/div&gt;
        &lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;field field-type-nodereference field-field-client&quot;&gt;
      &lt;div class=&quot;field-label&quot;&gt;Client:&amp;nbsp;&lt;/div&gt;
    &lt;div class=&quot;field-items&quot;&gt;
            &lt;div class=&quot;field-item odd&quot;&gt;
                    &lt;a href=&quot;/clients/option-computers-dealhub&quot;&gt;Option Computers - Dealhub&lt;/a&gt;        &lt;/div&gt;
        &lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;Unified messaging for the financial community in a browser based single page app. &lt;/p&gt;
&lt;p&gt;I was employed to design and implement the UI which was achieved through low latency native Web Components/Javascript, the Data model persisted across browser windows using a Chrome extension background page or shared web worker. Data is transported over web sockets and WebRTC using the Traderlynk javascript API which via a Traderlynk server integrates with the Microsoft Lync infrastructure.&lt;/p&gt;
&lt;div class=&quot;field field-type-link field-field-project-url&quot;&gt;
    &lt;div class=&quot;field-items&quot;&gt;
            &lt;div class=&quot;field-item odd&quot;&gt;
                    &lt;a href=&quot;http://www.hypermodernism.com/sites/default/files/traderlynk_big.jpg&quot; target=&quot;_blank&quot;&gt;URL&lt;/a&gt;        &lt;/div&gt;
        &lt;/div&gt;
&lt;/div&gt;
</description>
     <category domain="http://www.hypermodernism.com/category/projects/web-apps">Web Apps</category>
 <category domain="http://www.hypermodernism.com/category/design-skills/graphic-design">Graphic Design</category>
 <category domain="http://www.hypermodernism.com/category/design-skills/responsive-web">Responsive Web</category>
 <category domain="http://www.hypermodernism.com/category/design-skills/usability">Usability</category>
 <category domain="http://www.hypermodernism.com/category/other-skills/audio">Audio</category>
 <category domain="http://www.hypermodernism.com/category/other-skills/video">Video</category>
 <pubDate>Wed, 14 Jan 2015 09:55:05 +0000</pubDate>
 <dc:creator>admin</dc:creator>
 <guid isPermaLink="false">132 at http://www.hypermodernism.com</guid>
  </item>
  </channel>
</rss>
