Web design
For those that may be interested, this page details the technology stack used to develop and host this website.
But why develop our own website?
- Web development uses some of the same languages we use in our video and presentation work (JavaScript, XML, JSON)
- Much of the content we produce gets published and shared online, so understanding the many issues helps us to help our clients.
- A personal interest in technology and the IT industry, which also includes many of our clients.
e-media.co.uk
The domain was first registered in July 1995 and used mostly for development projects, until COVID-19 provided the opportunity to develop the current site.
Frontend
- Languages: HTML5, CSS3, JavaScript
- CSS framework: Tailwind CSS
- JSJavaScript libraries: Plyr, Swup, Keen-slider
- Animation libraries: Lottie, SMIL, GSAPGreenSock
- Automation frameworks: Node.js
- Build tool: Parcel
Backend
- Hosting: Amazon Web Services (AWS)
- Geolocation: London
- Web server: None (static site)
- Storage: Amazon S3
- Database: None
- CDN: Amazon CloudFront
Frontend
- HTML5, CSS3, JavaScript : Languages
- Tailwind CSS : CSS framework
- Plyr, Swup, Keen-slider : Javascript libraries
- Lottie, SMIL, GreenSock : Animation libraries
- Node.js : Automation frameworks
- Parcel : Build tool
Backend
- Hosting : Amazon Web Services (AWS)
- Geolocation : London
- Web server : None (static site)
- Storage : Amazon S3
- Database : None
- CDN : Amazon CloudFront
Design
After extensive research, Adobe XD was used for website design and CodePen for evaluation of technology options, which determined many design choices.
Customised versions of Adobe XD plugins were used to export Tailwind CSS classes and plain text, which was then marked up and saved to HTML using Pandoc.
Development
The development of this website provided an opportunity to learn and experiment with various web animation technologies. The hero illustrations are SVG graphics animated using Lottie, the splash screens use SMIL (Synchronized Multimedia Integration Language), and the wave uses GSAP (GreenSock Animation Platform).
Limiting support to only modern web browsers, enabled development with modern frameworks like Tailwind CSS and web APIs like Intersection Observer, without the use of polyfills.
Finally, most of the code was written in Visual Studio Code, with plugins including Live Preview, ESLint, Prettier - Code formatter and Tailwind CSS IntelliSense.
●
Thanks for your interest. We’d love to share our knowledge with your web development team, to add video and animation content to your website.