COVIDImpact / CovidImpact

COVID-19 is impacting countless small businesses across Canada, we all face uncertainty. Several colleagues and I asked what we could do to help? After a weekend of non-stop coding we’ve put together #CovidImpact, a FREE Small Business Care Package which features: A curated list of programs to help them through the crisis. Real-time news relevant to Canadian ventures Simulation tool to see how their business may be affected across various scenarios depending on how long COVID-19 drags out for. Together, Canadian businesses will get through this by supporting each other! CovidImpact is built in Vue with Javascript, HTML and CSS files. The project utilizes various Bootstrap-Vue components and newsapi.org to get the latest business news. The app is hosted on S3 and uses serverless functions for a mailchimp newsletter.
http://covidimpact.ca/
Apache License 2.0
3 stars 0 forks source link

Omptimize UX/UI in News page for mobile devices #1

Open Aliserag opened 4 years ago

Aliserag commented 4 years ago

Overview: Why do we need this? What is the end goal? Currently when mobile users access the news page they are displayed dozens of images that may be harmful to users with weaker data-plans, in order to help users avoid data-overage we need to change the way news images are displayed on mobile devices. https://news.ycombinator.com/ for inspiration

What needs to be done: Steps

  1. Checkout how other news websites display their content in a non-intensive way such as https://news.ycombinator.com/
  2. Add a mobile check with mixins that renders items without images if the user is on a mobile device and make the appropriate changes in NewsList.vue.

Criteria of success: Mobile devices must display optimized news items without the images.

Documentation: Here are examples on setting this up: https://stackoverflow.com/questions/48515023/display-different-vuejs-components-for-mobile-browsers.

For fun you can compare the load with images and without to estimate the rate of improvement :)

Stakeholder: @Aliserag