Posts by jordan-lewis

43 posts
  • Envato Team
  • United States
  • 3 Years of Membership
  • Exclusive Author
+1 more
jordan-lewis
Envato team
says

is it at all possible to automatically pull parts of the style guide into the app, so you only have to make UI changes to the style guide?

Dtbaker absolutely! And thats exactly what we do :-) We have been pioneering a new development approach called “Styleguide Driven Development” in which we build the UI first in the Styleguide before building the backend.

I wrote an early blog post on the topic Styleguide Driven Development but we have since then refined our process and I even gave a talk at a conference last week on it. Slides can be found here if your interested.

If people are still confused what this is all about, MeGustaMusic described perfectly what our ‘Structure Styleguide’ is …

Envato´s interactive manual on how the site works, on every level

The exciting part is that we are the first website I know of to release their’s to the public :)

So the ‘Structure Styleguide’ is the tool we use to build Envato Market’s UI, and ‘Styleguide Driven Development’ is the approach our team uses to develop the website.

Again if this doesn’t make sense or could be described in a better way, please let me know.

43 posts
  • Envato Team
  • United States
  • 3 Years of Membership
  • Exclusive Author
+1 more
jordan-lewis
Envato team
says

Hi all,

We are thrilled to announce we have released the Envato Market ‘Structure Styleguide’ to the public.

https://market.styleguide.envato.com

The Envato Market Structure Styleguide is the very same tool that our developers, designers, user experience experts and product team use day-to-day to build Envato Market. It is a living, breathing work in progress and its various elements are likely to change at any time without warning.

Although at this stage only a small percentage of the application lives in the styleguide, we are continually adding more as we develop new and exciting features or have the chance to improve existing ones.

What is a Structure Styleguide?

A Structure Styleguide is a special breed of living styleguide, designed to document an application’s UI logic and all of the possible permutations of the UI.

The goal is to have a complete and shared understanding of how an application behaves in any situation, even in the most uncommon edge cases, without having to laboriously recreate each scenario by hand.

Why do this?

Although the content itself may not be super useful to anyone else, we hope that by making it public we can share our knowledge and experience of a development technique that we have been refining for the past two years and found tremendously beneficial in building complex user interfaces: Styleguide Driven Development.

By making it public, we hope that other people can learn first-hand the benefits of a Structure Styleguide and how to effectively document an application’s UI so that nothing is out-of-sight, out-of-mind and ultimately neglected.

I hope you enjoy seeing some of the behind-the-scenes work we are doing here at Envato :)

43 posts
  • Envato Team
  • United States
  • 3 Years of Membership
  • Exclusive Author
+1 more
jordan-lewis
Envato team
says

Hi all,

Further to our blog post in March we are now happy to announce that all item pages are now responsive.

As a first cut we have only adapted the item page design to be responsive. This gives us a solid foundation to experiment and make measured improvements upon.

Desktop users will see no difference, but we are mindful of what we show on smaller devices whilst still giving our authors control of their item descriptions.

Opting out

All items will be opted-in by default, but you can choose to opt-out for every single item in case you need more time to update some descriptions.

To opt-out:

  1. Go to the ‘Edit’ tab on item page,
  2. Select ‘No’ for ‘Enable Responsive Layout’.

Note: You can re-enable the responsive layout at any time when your item page is ready.

Any issues?

If you spot any issues please report them back here, and we will look into them as soon as possible.

We are open to feedback, however we do ask that you please contribute in a way that’s respectful, constructive and in line with our guidelines.

43 posts
  • Envato Team
  • United States
  • 3 Years of Membership
  • Exclusive Author
+1 more
jordan-lewis
Envato team
says

Further to our blog post in March we are happy to announce that authors now have the ability to test their items pages with a responsive layout in preparation for the upcoming public release.

We are planning to enable responsive item pages for the public early next week (depending on any unforeseen issues), which gives you a week to test and prepare your item page descriptions.

How to test your responsive item page?

You can now test your item pages by appending ?responsive=true to your item page URL.

Please see the original post for information on what authors need to know about making item pages responsive friendly.

Opting out

All items will be opted-in by default, but you can choose to opt-out for every single item, in case you need more time to update some descriptions.

To opt-out:

  1. Go to ‘edit’ tab on item page,
  2. Select ‘no’ for ‘Enable Responsive Layout’.

Note: You can re-enable the responsive layout at any time when your item page is ready.

Any issues?

If you spot any issues please report them back here, and we will look into them as soon as possible.

We are open to feedback, however we do ask that you please contribute in a way that’s respectful, constructive and in line with our guidelines.

43 posts
  • Envato Team
  • United States
  • 3 Years of Membership
  • Exclusive Author
+1 more
jordan-lewis
Envato team
says

We recently rolled out a responsive homepage and announced plans that ‘search results’ and ‘item detail’ pages were to follow in the coming months.

We are now happy to announce that the work has begun on converting the ‘item details’ page.

Challenges we face

One of the biggest challenges we face in making Envato Market responsive is how we handle user-generated content. Authors have the freedom to build their item page descriptions using basic HTML elements and custom images hosted on their own servers.

Many of these images contain embedded text which will likely become unreadable as the image is scaled down on smaller devices. Also many item pages have been built to perfectly fit our legacy 616px description container and there is a good chance that this will have unwanted effects if the width was to change.

Another performance challenge we face is that many user-generated images are unoptimised, which leads to bigger downloads and slower item pages: it’s not uncommon for item pages to exceed 5mb. If you’re unsure about the best way to optimise images for your item and portfolio pages, we recommend you check out our Image Performance Tips For Authors.

When will the responsive item page be live?

We estimate to have this page live in the next month or so, but we will make sure we give notice to authors before we launch.

What do I need to do?

We have little control over the millions of item descriptions that currently exist. The readability of each item description relies on authors setting it up so that it will be maintained on mobile and tablets once we’ve made the page responsive.

Potential issues to be aware of if you have customised item descriptions

Item preview images with embedded text:
What do they look like when resized to 320px?

Images with embedded text
Text can become unreadable when resized on smaller devices e.g. screenshots of ratings/reviews (avoid if possible).

Images stacked side-by-side
These will wrap onto different lines as the viewport gets narrower.

Images and text side-by-side
These will wrap onto different lines as the viewport gets narrower.

Using tables e.g <table>
By their nature tables are not responsive and won’t allow for content to wrap.

Optimise image sizes
The smaller the page weight the better experience it will be for buyers.

What if I don’t have time to update?

Hopefully a month will be long enough for you to make any necessary changes. Since we see around 10% of our usage coming through mobile and tablet devices, we believe it is in the best interest of authors to update their page to help increase their sales through these channels. However, if you don’t have time or are finding it challenging we will also provide the ability to opt-out of having a responsive item page.

How will Opt-Out work?

On launch all item pages will be switched to responsive view by default, and you’ll find the option to opt-out in the ‘edit’ tab for each item. Opting out means buyers will get a non-responsive (desktop only) version of your item page. You can opt back in at any time once you’re ready.

Note: The ability to opt-out will not be available until this feature has been released.

Please let us know if you have any questions. Thanks!

43 posts
  • Envato Team
  • United States
  • 3 Years of Membership
  • Exclusive Author
+1 more
jordan-lewis
Envato team
says

Hi everyone,

Today we are rolling out a new responsive homepage which we have just announced on the Market Blog.

As a first cut we have only adapted the existing homepage design to be responsive, but having done so given ourselves a solid foundation to experiment and make measured improvements upon.

Whilst there is no visual difference for desktop users we are mindful of what we show on smaller devices whilst still giving our authors maximum promotion.

I also highly recommend reading the article “Making the Envato Marketplaces Responsive” if you are interested in the technical challenges we face.

We are open to feedback, however we do ask that you please contribute in a way that’s respectful, constructive and in line with our guidelines.

Thanks for your cooperation!
Jordan

43 posts
  • Envato Team
  • United States
  • 3 Years of Membership
  • Exclusive Author
+1 more
jordan-lewis
Envato team
says

george-olaru this has now been corrected. Thanks for your help!

43 posts
  • Envato Team
  • United States
  • 3 Years of Membership
  • Exclusive Author
+1 more
jordan-lewis
Envato team
says

Hi george-olaru,

Thanks for bringing this bug to our attention. Would you please be able to send me the url of the item that is having this issue?

43 posts
  • Envato Team
  • United States
  • 3 Years of Membership
  • Exclusive Author
+1 more
jordan-lewis
Envato team
says

I click on the “Purchase” button, the screen goes gray with the word “Loading..” in the center, and there it sits for eternity.

Hi TomB1959,

The issue your describing sounds like something is going wrong with the Ajax request for the modal in your browser.

I’m running the same OS and browser versions as your self and have no troubles.

If you’re still experiencing this problem would you be able to check if there are any errors in the Dev Tools console or even the ‘Network’ -> ‘XHR’ tab and report them back here please?

Also could you also please check:
  • If the ‘Add to collection’ button / modal is broken too?
  • If any specific browser plugin could be interfering and causing this issue
As in the meantime, you can always disable Javascript in your browser and you should be able to complete the purchase.

Hopefully we can get to the bottom of this issue for you :-)

Jordan

43 posts
  • Envato Team
  • United States
  • 3 Years of Membership
  • Exclusive Author
+1 more
jordan-lewis
Envato team
says

Hi jblions and DazeinCreative

Thanks for reporting this issue. Could you please confirm that the issue is still happening for you in IE and/or Firefox?

Cheers, Jordan

by
by
by
by
by
by