8 CSS projects
Directory for Cooperative Coliving
Website with categorised and filterable listings of coliving spaces for workations.
- Filter flexibility on some classifications as enumerated scales (e.g. outside spaces from terrace to big garden; workspace from bedroom desk to coworking) enabling results to be expanded with degrees of relevence, instead of simply returning unhelpful 'nothing matched'.
- Multi-faceted classification system uses both structured and unstructured tags; which may be grouped by parents, optionally redirecting and hilighting child tags; plus enabling customisation of every view where values are consumed.
- Freeform rates, in which multiple unit classes may be declared with any duration and rate; the system creating summaries of these for common cases (e.g. weekly and monthly rates).
- Unusual mobile UI giving access to an almost fullscreen map with information panel below it as a single swipable view, instead of the more typical multi-modal/click-panel-close interactions. (Usability value to be ascertained.)
- SPA-style client-side mapping and filtering, using a compact base dataset, maintained as JSON, supplemented with per-property JSON data upon user interaction, thus avoiding server-side dependencies and database queries. (Obviously only capable of handling a smaller datasets, though under 75k gzipped for 1500 properties, not likely to be exceeded for many years.)
- Tags for all filter criteria preserved in the URL facilitating sharing. Clicked properties are preserved in the query string thus do invoke a server-side response to permit sharing when first accessed with a property query string.
- Given a huge variety of spaces and users, anonymised and unrated reviews to focus the user's attention upon their own interpretations.
- Fallback client-side rendering, should the server be unable to cache Instagram using a private API.
- The use of tags in a provider-specified order to classify spaces also supports a self-declaration community label/marque using the logo, in which any space may declare itself a "coliving community" by prefixing its core offer or values as tags e.g. «Hub House is a #purposeful #cooperative Coliving Community».
- Data stored in easily edited structured text format (Lua).
- Third-party data sources (e.g. Instagram, Facebook, Google) cached on the server to eliminate additional latency.
- Passable/overridable filters in URL, as well as settable with cookies, this statefulness allows the map and list views to be shared preserving the user input criteria.
- Some data always in-page for instant client-side changes and reduced server processing, and when unspecified shows all spaces in list view with 'disabled' styling thus ensuring all potential results appear on pages for SEO and first-time visitors. If prefs are set or passed the server trims the data set to send a lighter load.
- Unstructured locations and contextual adjustment derived from declared human-friendly strings, e.g. "Barcelona, Spain" only appears as "Barcelona" on the Spain page, but a space may declare it as "near Barcelona" or anything else appropriate for reference instead of displaying simply an unhelpful administrarive name.
- Tags permit optional space-specific custom details, e.g. the "meals" tag can be expanded with free-form text such as "full-board included".
- Friendly URLs e.g: /in/spain /with/pool
- Custom pages can replace or supplement entire categories; CSS can also easily be used to make changes to specific categories.
- Currency conversion with rounding to faciliate user information scanning and consumption.
- Instagram photos only render the two most recent official account photos, also showing both top-ranked and recent location-specific posts (where an Instagram location is known).
2020 — Conception, Web, Content Management
Website for Playworking
Responsive interim website for a destinational coliving space offering outdoor activities.
Product Website for Esofaber
Site to promote and sell a specific product line.
- Bespoke image slider handling multiple content parts (image, title, subtitle, price, inset image) and integrated as the core compoent of the page layout
- Image slider waits for the next slide's image to finish loading before progressing to that slide (a common issue on slower connections with every other slider implementation)
- Shows the name of the next item in the slider
- Responsive design (adapts to screen size and orientation such as for tablets)
- Feature products in the front page slider simply with tagging
- Automatic slider with manual controls
- Web fonts (to match the product aesthetic)
- Localised prices and shipping notices
2011 — Design, Web, E-commerce
Estate agency SaaS for duHome
Provide a customisable website for estate agencies.
- Fuzzy-logic search, gradually widening search criteria scope when not enough matching results are found, i.e. for every non-matching input criteria a corresponding potentially acceptable criteria would be used instead such as 1 bathroom instead of 2, with these criteria being colour-coded (match versus near-match).
- Comprehensive type-ahead search using multiple sources of data (names, telephones, locations, emails, prices), removing need for time consuming paging of adminstrative list views to find relevent records.
- Use of geohash indexes for high-performance geospatial property search.
- Use of deferred slideshow loading to improve performance and usability (almost unheard of at the time, most solutions simply advancing to to half-downloaded images on a timer, or attempting to download all upon page load despite potentially not subsequently showing them).
- Customer-facing functionality including geographic search and display of properties with mapping and slideshow
- Agent functionalities including search, management of properties
- Agency-owner functionality including customisation and configuration of website, and management of agents
- Support for multiple agency locations per site, and agents per-agency
- Activitiy streams with messaging and notifications for each agency, agent and property
- Signup for new agencies (clients) with a default name-derived subdomain
- Automatic geo-location and address completion when adding properties
- Image upload and optimisation for slideshows
- Email notifications when agents are not active on site
- Property owner CRM with agent association
- Editable print view with QR code for window display
- Utilisation of Moonstalk's internationsalistion, geospatial data, type-ahead search, and notification features
2011 — Conception, Web, Content Management
Marketplace for Verse
SaaS platform for small independant retailers, with a focus on curation and provenance, including product blogs and stock-control.
- Customisable magazine style multi-product 'display' layouts, using an impactful large format image tagged with the products, with their data (price, links) automatically populated.
- Uncluttered single product layouts with clear call to actions and availability.
2009 — Design, Web, Content Management
PictureSync Website for Verse
Seperate site with service-provider/affiliate specific branding and downloads via referrer or argument.
- Ability to serve a ready-to-use service-provider specific download, hiding the other supported providers from the user.
Folio Concept for Verse
Product concept, branding and website for professionally-oriented photo portfolio service.
- SaaS with SSL on MivaScript
- Flexible CSS boxes with custom edge and corner frames
- Research on hosting latencies for optimal single-location US deployment across metro areas
2005 — Design, Web, Photo
Website for Verse
Mac software publisher
- Combined version tracking and licence verification protocol (between webserver and desktop application), with an entirely web-based activation procedure (transparent licence key) [see the blog]
- Purchasing integration with PayPal
- Software licence generation and activation
- Software version tracking and usage reporting