AUTOMATED GENERATION OF MOBILE OPTIMIZED WEBSITE

• US 20130174012A1
• Filed: 01/03/2012
• Published: 07/04/2013
• Est. Priority Date: 01/03/2012
• Status: Active Grant

• Current Assignee: Cimpress Schweiz GmbH (Cimpress Plc)
• Original Assignee: Vistaprint Technologies Limited (Cimpress Plc)
• Inventors: Kwan, Jeff L., Hale, Tristan C., LaPointe, Christopher M., Quinn, Matthew T., Pallai, Jeremy M.
• Granted Patent: US 9,311,427 B2
• Time in Patent Office: Days
• US Class Current: 715/234
• CPC Class Codes: G06F 16/9577 Optimising the visualization of content, e.g. distillation of HTML documents
• CPC Class Codes: G06F 16/958 Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
• CPC Class Codes: G06F 30/33 Design verification, e.g. functional simulation or model checking
• CPC Class Codes: G06F 40/103 Formatting, i.e. changing of presentation of documents automatic justification G06F40/189; automatic line break hyphenation G06F40/191
• CPC Class Codes: G06F 8/36 Software reuse
• CPC Class Codes: H04W 88/02 Terminal devices

Abstract

Methods and apparatuses for automatically generating a mobile-optimized website from an existing website are disclosed.

Claims

1. A system for automatically generating a mobile website optimized for mobile devices based on an existing www. website, comprising:

one or more processors configured to automatically select from a plurality of website assets at least one m. website asset that is optimized for mobile devices, and to automatically replace a corresponding www. website asset in a www. web page with the respective m. website asset to generate a mobile-optimized web page corresponding to the www. web page.

2. A method for automatically generating a web page optimized for mobile devices based on an existing conventional web page description, comprising:

receiving a web page description of a conventional web page designed for rendering on a display of a non-mobile device, the received web page description describing an arrangement and application of a plurality of individual conventional web page components;

selecting at least one of the individual conventional web page components in the received web page description;

from a set of mobile-optimized web page assets, automatically selecting corresponding mobile-optimized web page components for each of the selected at least one individual conventional web page components; and

replacing each of the selected at least one individual conventional web page components with their selected corresponding mobile-optimized web page component.

3. The method of claim 2, further comprising:

generating a modified version of the received web page description to include the one or more replacements; and

saving the modified version of the received web page description as a mobile-optimized web page description.

4. The method of claim 3, further comprising:

detecting a request for the conventional web page from a mobile device; and

serving the mobile-optimized web page description in response to the request.

5. The method of claim 4, further comprising:

rendering the served mobile-optimized web page description on a display of the requesting mobile device.

6. The method of claim 2, wherein at least one of the selected mobile-optimized web page components matches a look-and-feel of its corresponding selected conventional web page component.

7. The method of claim 6, wherein at least one of the selected mobile-optimized web page components and its corresponding selected conventional web page component each comprise a matching image.

8. The method of claim 6, wherein at least one of the selected mobile-optimized web page components and its corresponding selected conventional web page component each comprise a matching color scheme.

9. The method of claim 6, wherein at least one of the selected mobile-optimized web page components and its corresponding selected conventional web page component each comprise a matching font scheme.

10. The method of claim 2, wherein the step of automatically selecting a mobile-optimized web page component further comprises:

identifying a family of assets associated with the selected at least one individual conventional web page components, the identified family of assets comprising a plurality of component descriptions corresponding to different parts of a plurality of different products and which are combinable to form a plurality of different yet visually-coordinated products, the identified family of assets comprising one or more mobile-optimized web page component assets;

identifying a mobile-optimized component description from the identified family of assets;

identifying a corresponding conventional web page component description in the received web page description; and

replacing the identified corresponding conventional web page component description with the identified mobile-optimized component description.

11. The method of claim 10, wherein:

the identified family of assets comprises one or more mobile-optimized web page header descriptions,

the identified mobile-optimized web page component description comprises one of the mobile-optimized web page header descriptions, and

the identified corresponding conventional web page component description in the received web page description comprises a conventional web page header description.

12. The method of claim 10, wherein the received web page description comprises a conventional web page header description, the method further comprising:

if the identified family of assets comprises one or more mobile-optimized web page header descriptions, selecting one of the mobile-optimized web page header descriptions and replacing the conventional web page header description in the received web page description with the selected mobile-optimized component description.

13. The method of claim 10, wherein the received web page description comprises a conventional web page header description, the method further comprising:

if the conventional web page header description in the received web page description is identical to a conventional web page header description in the identified family of assets, and if the identified family of assets comprises one or more mobile-optimized web page header descriptions, selecting one of the mobile-optimized web page header descriptions and replacing the conventional web page header description in the received web page description with the selected mobile-optimized component description.

14. The method of claim 10, wherein the received web page description comprises a conventional web page header description, the method further comprising:

if the identified family of assets comprises one or more mobile-optimized web page header descriptions, selecting one of the mobile-optimized web page header descriptions and replacing the conventional web page header description in the received web page description with the selected mobile-optimized component description; and

if the identified family of assets does not comprise one or more mobile-optimized web page header descriptions, but does comprise one or more alternative header component descriptions associated with a product different than a mobile-optimized web page yet are better suited for use in a mobile-optimized web page than the conventional web page header component description, selecting one of the alternative header component descriptions and replacing the conventional web page header description in the received web page description with the selected alternative header component description.

15. The method of claim 10, wherein the received web page description comprises a conventional web page header description, the method further comprising:

if the conventional web page header description in the received web page description is identical to a conventional web page header description in the identified family of assets, and if the identified family of assets comprises one or more mobile-optimized web page header descriptions, selecting one of the mobile-optimized web page header descriptions and replacing the conventional web page header description in the received web page description with the selected mobile-optimized component description; and

if the conventional web page header description in the received web page description is identical to a conventional web page header description in the identified family of assets, and if the identified family of assets does not comprise one or more mobile-optimized web page header descriptions, but does comprise one or more alternative header component descriptions associated with a product different than a mobile-optimized web page yet are better suited for use in a mobile-optimized web page than the conventional web page header component description, selecting one of the alternative header component descriptions and replacing the conventional web page header description in the received web page description with the selected alternative header component description.

16. The method of claim 10, wherein the received web page description comprises a conventional web page header description, the method further comprising:

if the identified family of assets comprises one or more mobile-optimized web page header descriptions, selecting one of the mobile-optimized web page header descriptions and replacing the conventional web page header description in the received web page description with the selected mobile-optimized component description;

if the identified family of assets does not comprise one or more mobile-optimized web page header descriptions, but does comprise one or more alternative header component descriptions associated with a product different than a mobile-optimized web page yet are better suited for use in a mobile-optimized web page than the conventional web page header component description, selecting one of the alternative header component descriptions and replacing the conventional web page header description in the received web page description with the selected alternative header component description; and

if the identified family of assets does not comprise one or more mobile-optimized web page header descriptions, and further does not comprise one or more alternative header component descriptions associated with a product different than a mobile-optimized web page that are better suited for use in a mobile-optimized web page than the conventional web page header component description, and if the identified family of assets does comprise an accent image that is included in a plurality of the component descriptions belonging to the identified family of assets and further comprises a generic mobile-optimized header component description having an image container configured to receive an image, selecting the generic mobile-optimized header component description with the accent image incorporated into the image container of the generic mobile-optimized header component description.

17. The method of claim 10, wherein the received web page description comprises a conventional web page header description, the method further comprising:

if the conventional web page header description in the received web page description is identical to a conventional web page header description in the identified family of assets, and if the identified family of assets comprises one or more mobile-optimized web page header descriptions, selecting one of the mobile-optimized web page header descriptions and replacing the conventional web page header description in the received web page description with the selected mobile-optimized component description;

if the conventional web page header description in the received web page description is identical to a conventional web page header description in the identified family of assets, and if the identified family of assets does not comprise one or more mobile-optimized web page header descriptions, but does comprise one or more alternative header component descriptions associated with a product different than a mobile-optimized web page yet are better suited for use in a mobile-optimized web page than the conventional web page header component description, selecting one of the alternative header component descriptions and replacing the conventional web page header description in the received web page description with the selected alternative header component description; and

if the conventional web page header description in the received web page description is identical to a conventional web page header description in the identified family of assets, and if the identified family of assets does not comprise one or more mobile-optimized web page header descriptions, and further does not comprise one or more alternative header component descriptions associated with a product different than a mobile-optimized web page that are better suited for use in a mobile-optimized web page than the conventional web page header component description, and if the identified family of assets does comprise an accent image that is included in a plurality of the component descriptions belonging to the identified family of assets and further comprises a generic mobile-optimized header component description having an image container configured to receive an image, selecting the generic mobile-optimized header component description with the accent image incorporated into the image container of the generic mobile-optimized header component description.

18. The method of claim 10, wherein the received web page description comprises a conventional web page header description, the method further comprising:

if the identified family of assets comprises one or more mobile-optimized web page header descriptions, selecting one of the mobile-optimized web page header descriptions and replacing the conventional web page header description in the received web page description with the selected mobile-optimized component description; and

if the identified family of assets does not comprise one or more mobile-optimized web page header descriptions, and further does not comprise one or more alternative header component descriptions associated with a product different than a mobile-optimized web page that are better suited for use in a mobile-optimized web page than the conventional web page header component description, and if the identified family of assets does comprise an accent image that is included in a plurality of the component descriptions belonging to the identified family of assets and further comprises a generic mobile-optimized header component description having an image container configured to receive an image, selecting the generic mobile-optimized header component description with the accent image incorporated into the image container of the generic mobile-optimized header component description.

19. The method of claim 10, wherein the received web page description comprises a conventional web page header description, the method further comprising:

if the conventional web page header description in the received web page description is identical to a conventional web page header description in the identified family of assets, and if the identified family of assets comprises one or more mobile-optimized web page header descriptions, selecting one of the mobile-optimized web page header descriptions and replacing the conventional web page header description in the received web page description with the selected mobile-optimized component description; and

if the conventional web page header description in the received web page description is identical to a conventional web page header description in the identified family of assets, and if the identified family of assets does not comprise one or more mobile-optimized web page header descriptions, and further does not comprise one or more alternative header component descriptions associated with a product different than a mobile-optimized web page that are better suited for use in a mobile-optimized web page than the conventional web page header component description, and if the identified family of assets does comprise an accent image that is included in a plurality of the component descriptions belonging to the identified family of assets and further comprises a generic mobile-optimized header component description having an image container configured to receive an image, selecting the generic mobile-optimized header component description with the accent image incorporated into the image container of the generic mobile-optimized header component description.

20. The method of claim 2, further comprising:

automatically generating one or more gradient colors based on colors described in the received conventional web page; and

applying the generated one or more gradient colors to one or more web page components when displayed on a mobile device.

21. The method of claim 2, further comprising:

automatically generating one or more shadow colors based on colors described in the received conventional web page; and

applying the generated one or more shadow colors to one or more web page components when displayed on a mobile device.

22. The method of claim 3, further comprising:

automatically inserting audio autodetection and configuration code into the mobile-optimized web page description which, when interpreted by a web browser of a device that requests the mobile-optimized web page corresponding to the mobile-optimized web page description, detects at least one of a browser type and a device type and which automatically selects and configures an audio player specific to the requesting device.

23. The method of claim 22, further comprising:

first detecting whether the received conventional web page comprises any audio tags prior to inserting audio autodetection and configuration code into the mobile-optimized web page description, and

bypassing the step of automatically inserting audio autodetection and configuration code into the mobile-optimized web page description if the received conventional web page does not include at least one audio tag.

24. A mobile-optimized web page configured for display on a mobile device, comprising:

a plurality of web page components, at least one of which is a mobile-optimized web page component;

wherein the mobile-optimized web page was generated automatically based on an existing conventional web page.

25. The mobile-optimized web page of claim 24, further comprising:

audio autodetection and configuration code which, when interpreted by a web browser of the mobile device, detects at least one of a browser type and a device type and automatically selects and configures an audio player specific to the mobile device.

26. A method for serving a mobile-optimized web page to a mobile device, comprising:

receiving a request for a conventional web page;

detecting that the request came from a mobile device;

automatically serving to the mobile device a mobile-optimized web page generated automatically based on the requested conventional web page, the mobile-optimized web page comprising a plurality of web page components, at least one of which is a mobile-optimized web page component.

27. The method of claim 26, wherein the mobile-optimized web page comprises at least one audio tag and audio autodetection and configuration code which, when interpreted by a web browser of the mobile device, detects at least one of a browser type and a device type and which automatically selects and configures an audio player specific to the mobile device.

28. A method for requesting a web page from a mobile device, comprising:

requesting a conventional web page from a server;

receiving from the server a mobile-optimized web page generated automatically based on the requested conventional web page, the mobile-optimized web page comprising a plurality of web page components, at least one of which is a mobile-optimized web page component.

29. The method of claim 28, wherein the mobile-optimized web page comprises at least one audio tag and audio autodetection and configuration code which, when interpreted by a web browser of the mobile device, detects at least one of a browser type and a device type and which automatically selects and configures an audio player specific to the mobile device, the method further comprising:

processing, by the web browser of the mobile device, the audio autodetection and configuration code to automatically select and configure an audio player specific to the mobile device.

30. A system, comprising:

a server which automatically detects when a requesting device is a mobile device and which automatically redirects a requested web page to a corresponding mobile-optimized web page.

31. A method for automatically generating a mobile-optimized (m.) web page based on an existing conventional (www.) web page, the www. web page comprising a combination of individual www. web page assets arranged and/or applied according to a www. page description, comprising:

identifying a family of assets associated with the individual www. web page assets;

identifying at least one mobile-optimized asset in an asset database that is associated with the identified family of assets and which corresponds to at least one respective www. web page asset;

generating a m. web page by using at least one of the identified mobile-optimized assets in place of a corresponding www. web page asset where such identified mobile-optimized asset exists and using the respective www. assets where no corresponding respective mobile-optimized assets exist.