Your Nearest Store Is
Choose A Store
-
Your Nearest Store Is Choose A Store
-
-
Not a MySony Member yet?
Create an account for free
to receive email updates on news, offers,
the latest products and more.
Member Benefits
30 day love it or your money back on eligible products
Free shipping with MySony - no minimum spend required
Celebrate your Birthday with a $20 voucher
Plus: 10% Sign up Offer
Enjoy a 10% Off Single Use Voucher on eligible purchases when you join MySony*
*Terms and conditions apply. Only for new accounts created on or after 28 March 2024 that choose to opt in to news and offers from Sony. Voucher is valid for limited time. Offer is subject to change. Not valid in conjunction with any other offer. See here for full terms and conditions.
Sony desktop Design Guide
Amblique & Demandware elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel. The Twitter Bootstrap CSS framework along with Less CSS has been integrated to provide a strong foundation for efficiently developing UI skins for customised projects.
Resources
Layout
HEADER
CONTENT
Grid System
| Device view port | Layout width | Column width | Gutter width |
|---|---|---|---|
| Desktops Small Desktops Mobile Devices | 988px and up 768px to 979px 767px and below | 22px 12px 100% | 20px 20px N/A |
span24span1span23span2span22span3span21span4span20span5span19span6span18span7span17span8span16span9span15span10span14span11span13span12span12Responsive Design - Media Queries and Viewport Support
The following table summarises CSS support for the following devices, with their viewport and grid system definitions.
Due to the definitions of web development standard practices, there is no foolproof method to determine the device that the browser is using, and as such responsive design is developed around viewport size and NOT device type.
| Device viewport | Layout width | Column width | Gutter width |
|---|---|---|---|
| Desktops | 980px and up | 22px | 12px |
| Small Desktops | 768px and above | 20px | 20px |
| Mobile Devices | 767px and below | Fluid columns, no fixed widths | |
| Mobile Devices | 480px and below | Fluid columns, no fixed widths | |
Responsive Utility Classes
For faster mobile-friendly development, use these utility classes for showing and hiding content by device (determined by viewport size). Below is a table of the available classes and their effect on a given media query layout (labeled by device).
| Class | Phones 767px and below | Tablets 979px to 768px | Desktops Default |
|---|---|---|---|
.visible-phone |
Visible | Hidden | Hidden |
.visible-tablet |
Hidden | Visible | Hidden |
.visible-desktop |
Hidden | Hidden | Visible |
.hidden-phone |
Hidden | Visible | Visible |
.hidden-tablet |
Visible | Hidden | Visible |
.hidden-desktop |
Visible | Visible | Hidden |
When to use Responsive Utility Classes
Use on a limited basis to complement each device's presentation. Responsive utilities should not be used with tables, and as such are not supported.
Responsive Utility Class Test Cases
Resize your browser or load on different devices to test the above classes.
| Visible On... | Phone | Tablet | Desktop |
|---|---|---|---|
| Hidden On... | Phone | Tablet | Desktop |
Colour Palette
Colour Palette not available without javascriptTypography - Headings, Paragraphs, Links
Website Font Families
The following table is an overview all font families utilised by this project. The mixin classes defined are used for generating the next section, Font Variation List.
This section is created to build the Website Responsive Font Styles section and for reference purposes. These mixin classes should not be utilised in page-specific style sheets.
| Font | Mixin Class |
|---|---|
| SST Light | .fontsstlight() |
| SST Roman | .fontsstroman() |
| SST Medium | .fontsstmedium() |
| SST Bold | .fontsstbold() |
Font Variation List
The following table is an overview all font variations (font-famiy and size) utilised by this project. The mixin classes defined are used for generating the next section, Website Responsive Font Styles.
This section is created to build the Website Responsive Font Styles section and for reference purposes. These mixin classes should not be utilised in page-specific style sheets.
| Font Style | Mixin Class |
|---|---|
| Font Style 1 | .fontsstroman-s54() |
| Font Style 2 | .fontsstmedium-s22() |
| Font Style 3 | .fontsstlight-s21() |
| Font Style 4 | .fontsstroman-s21() |
| Font Style 5 | .fontsstbold-s21() |
| Font Style 6 | .fontsstlight-s18() |
| Font Style 7 | .fontsstroman-s18() |
| Font Style 8 | .fontsstbold-s18() |
| Font Style 9 | .fontsstlight-s16() |
| Font Style 10 | .fontsstroman-s16() |
| Font Style 11 | .fontsstmedium-s16() |
| Font Style 12 | .fontsstbold-s16() |
| Font Style 13 | .fontsstlight-s14() |
| Font Style 14 | .fontsstroman-s14() |
| Font Style 15 | .fontsstmedium-s14() |
| Font Style 16 | .fontsstbold-s14() |
| Font Style 17 | .fontsstroman-s13-l16() |
| Font Style 18 | .fontsstroman-s13-l20() |
| Font Style 19 | .fontsstmedium-s13() |
| Font Style 20 | .fontsstroman-s12-l14() |
| Font Style 21 | .fontsstroman-s12-l18() |
| Font Style 22 | .fontsstmedium-s12() |
| Font Style 23 | .fontsstbold-s12() |
| Font Style 24 | .fontsstroman-s11() |
| Font Style 25 | .fontsstmedium-s11() |
| Font Style 26 | .fontsstbold-s11() |
Website Responsive Font Styles
The following table is an overview of all responsive font styles utilised by this project. The responsive mixins are to be utilised in page style sheets, applied to the appropriate id or class CSS Selector.
Font styles should not be applied to HTML structure elements, such as
<div>s and <table>s, in page style sheets. Instead, content should be wrapped in an element, e.g. <span>, with a context class to be utilised as the CSS selector.| Responsive Mixin | Desktop -> Mobile Mixins | Responsive Example |
|---|---|---|
.font1() |
.fontsstroman-s54() -> .fontsstroman-s21() |
Example Text |
.font2() |
.fontsstmedium-s22() -> .fontsstmedium-s14() |
Example Text |
.font3() |
.fontsstlight-s21() |
Example Text |
.font4() |
.fontsstroman-s21() |
Example Text |
.font5() |
.fontsstbold-s21() -> .fontsstbold-s18() |
Example Text |
.font6() |
.fontsstlight-s18() |
Example Text |
.font7() |
.fontsstroman-s18() |
Example Text |
.font8() |
.fontsstbold-s18() |
Example Text |
.font9() |
.fontsstlight-s16() |
Example Text |
.font10() |
.fontsstroman-s16() -> .fontsstroman-s14() |
Example Text |
.font11() |
.fontsstmedium-s16() |
Example Text |
.font12() |
.fontsstbold-s16() |
Example Text |
.font13() |
.fontsstlight-s14() |
Example Text |
.font14() |
.fontsstroman-s14() |
Example Text |
.font15() |
.fontsstroman-s14() -> .fontsstroman-s12-l14() |
Example Text |
.font16() |
.fontsstmedium-s14() |
Example Text |
.font17() |
.fontsstmedium-s14() -> .fontsstmedium-s13() |
Example Text |
.font18() |
.fontsstbold-s14() |
Example Text |
.font19() |
.fontsstroman-s13-l16() |
Example Text |
.font20() |
.fontsstroman-s13-l20() |
Example Text |
.font21() |
.fontsstmedium-s13() |
Example Text |
.font22() |
.fontsstroman-s12-l14() |
Example Text |
.font23() |
.fontsstroman-s12-l14() -> .fontsstroman-s13-l16() |
Example Text |
.font24() |
.fontsstroman-s12-l18() |
Example Text |
.font25() |
.fontsstroman-s12-l18() -> .fontsstroman-s13-l16() |
Example Text |
.font26() |
.fontsstroman-s12-l18().fontsstroman-s13-l20() |
Example Text |
.font27() |
.fontsstmedium-s12() |
Example Text |
.font28() |
.fontsstmedium-s12() -> .fontsstmedium-s13() |
Example Text |
.font29() |
.fontsstbold-s12() -> .fontsstbold-s14() |
Example Text |
.font30() |
.fontsstroman-s11() |
Example Text |
.font31() |
.fontsstroman-s11() -> .fontsstroman-s12-l18() |
Example Text |
.font32() |
.fontsstroman-s11() -> .fontsstroman-s13-l16() |
Example Text |
.font33() |
.fontsstmedium-s11() |
Example Text |
.font34() |
.fontsstmedium-s11() -> .fontsstmedium-s12() |
Example Text |
.font35() |
.fontsstbold-s11() |
Example Text |
Headings
Heading 1
Heading 1 - Style 1
Heading 1 - Style 2
Heading 2
Heading 2 - Style 1
Heading 2 - Style 2
Heading 3
Heading 3 - Style 1
Heading 3 - Style 2
Heading 4
Heading 5
Heading 5 - Style 1
Heading 6
Paragraphs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a odio semper, aliquam ante non, vestibulum risus. Nulla massa dui, consectetur quis pharetra sed, fringilla nec odio. Vivamus sit amet tellus bibendum, bibendum orci ac, pulvinar quam. Sed sit amet ullamcorper neque. Mauris mollis suscipit metus. Aliquam tincidunt lacinia suscipit. Integer ullamcorper rhoncus lacus sed tincidunt. Sed posuere mi eu arcu aliquet vulputate. Integer mattis urna risus, nec porta turpis scelerisque faucibus.
Aliquam felis massa, gravida eu erat eget, posuere malesuada tellus. Nunc ultricies elit non aliquam luctus. Nam tincidunt euismod mollis. Nulla imperdiet pellentesque mi, et posuere ipsum lacinia ac. Vestibulum at pretium lorem. Ut at nunc vitae leo scelerisque adipiscing nec fringilla tortor. Fusce eu ipsum enim. Curabitur placerat consequat purus, sit amet elementum dolor dictum quis. Aenean iaculis ac nunc vitae placerat. Pellentesque placerat hendrerit quam, aliquet adipiscing nisl. Nulla convallis dictum lacus quis lobortis. Cras sit amet sem velit.
Lists
Unordered Lists
- list item 1
- list item 2
- list item 3
- list item 4
- sub-list item 1
- sub-list item 2
- sub-list item 3
- list item 5
Ordered Lists
- list item 1
- list item 2
- list item 3
- list item 4
- sub-list item 1
- sub-list item 2
- sub-list item 3
- list item 5
Description Lists
- Term/Name 1
- Description for term 1
- Term/Name 2
- Description for term 2
- Term/Name 3
- Description for term 3
- Term/Name 4
- Description for term 4
Pricing
| Price Type | Price | Mixin |
|---|---|---|
| Regular Price / Standard Price / Standard Price Range | rrp $189.95 |
.standardPrice()
|
| Sale Price / Now Price | rrp $99.95 |
.salePrice()
|
| Promotion Price / Was Price | $189.95 |
.wasPrice()
|
| Promotion Message |
rrp $189.95
your price $99.95
20% OFF on accessories
|
.wasPrice() .salePrice()
|
| Tiered Price |
rrp $189.95
rrp $99.95
Buy more pay less!
Tier 2 rrp $48.95 (XX% off)
Tier n rrp $46.00 (XX% off)
|
.wasPrice() .salePrice() .standardPrice()
|
Links & Button Links
| Link Style | Sample |
|---|---|
| default link | Sample Text Link (default) |
.link-style-2 |
Sample Text Link |
.link-style-3 |
Sample Text Link
Background colour is NOT part of the design.
|
.link-style-4 |
Sample Text Link
Background colour is NOT part of the design.
|
.link-style-4 |
Sample Text Link |
Link/Icon Structure
| Link Style | Sample |
|---|---|
| Link style with a left icon structure (default) | Sample text link |
| Link style with a right icon structure | Sample text link |
Forms
Check Boxes
Check boxes are skinned with the uniform.js library. This applies additional DOM markup to apply the custom skin and binds the events to replicate the native behaviour using JavaScript.
Radio Buttons
Radio buttons are skinned with the uniform.js library. This applies additional DOM markup to apply the custom skin and binds the events to replicate the native behaviour using JavaScript.
Text Boxes
We utilise types of input fields within the site. The standard text and password fields, along with HTML5 input types - email, phone (tel)
Text Areas
Select Dropdowns
Appended inputs
Stacked Form layout
Edit Account
Horizontal form layout
Edit Account
Tables
.table-style-01
| Item 1 | Item 2 | Item 3 | Item 4 | Item 5 | Item 6 |
|---|---|---|---|---|---|
|
Placeholder Container: 1
|
Placeholder Container: 2
|
Placeholder Container: 3
|
Placeholder Container: 4
|
Placeholder Container: 5
|
Placeholder Container: 6
|
|
Placeholder Container: 1
|
Placeholder Container: 2
|
Placeholder Container: 3
|
Placeholder Container: 4
|
Placeholder Container: 5
|
Placeholder Container: 6
|
.table-style-01 .s2
| Item 1 | Item 2 | Item 3 | Item 4 | Item 5 | Item 6 |
|---|---|---|---|---|---|
|
Placeholder Container: 1
|
Placeholder Container: 2
|
Placeholder Container: 3
|
Placeholder Container: 4
|
Placeholder Container: 5
|
Placeholder Container: 6
|
|
Placeholder Container: 1
|
Placeholder Container: 2
|
Placeholder Container: 3
|
Placeholder Container: 4
|
Placeholder Container: 5
|
Placeholder Container: 6
|
.table-style-01 .s3
|
Placeholder Container: 1
|
Placeholder Container: 2
|
|
Placeholder Container: 1
|
Placeholder Container: 2
|
|
Placeholder Container: 1
|
Placeholder Container: 2
|
Panels
Panel
Panel s2
Panel s3
Panel s4
Panel s5
Swipers
Responsive Banner Swiper
Banner Swiper
Product Swipers
Product Swiper
Tooltips
Apply .tooltip-link to reset tooltips on <a> to display: inline;.
| Class | Display | Example |
|---|---|---|
.tooltip |
The measure of digital image detailImage detail is measured in megapixels, a key factor in digital image quality. |
|
.tooltip |
Content tooltip with
data-placement="top"
|
|
.tooltip |
Content tooltip with
data-placement="left"
|
|
.tooltip |
Content tooltip with
data-placement="right"
|
Dialogs/Modals/Lightboxes/Quickviews
The dialog overlays have been implemented using the jQueryUI dialog component library and extended in SiteGenesis' app.dialog.js module.
Toggle a dialog component via JavaScript by clicking the link below. This is a live example of the site's password reset dialog.
Images and Sprites
Image Sizes
| Large Image |
|
|---|---|
| Large Image (Mobile) |
|
| Medium Image |
|
| Medium Image (Mobile) |
|
| Small Image |
|
| Thumbnail Image |
|
| Swatch Image (24px x 24px) |
|
| Product set and product bundle Images 1000px by (client defined) |
|
| Compare 4 products |
|
| PLP Swatch over image (12px x 12px) |
|
CSS class mapping
Character mapping in HTML
Images
Hover over an image to change the background colour to reveal transparency and images that are positioned on contrasting background colours.
| Name | Sprite | Variable | Image |
|---|---|---|---|
| FavIcon | favicon.ico |
N/A |  |
| Google Maps Marker Black Icon (small) | google-marker-black-small.png |
N/A |  |
| Google Maps Marker Black Icon | google-marker-black.png |
N/A |  |
| Google Maps Marker Black Icon (large) | google-marker-black-large.png |
N/A |  |
| Google Maps Marker Grey Icon (small) | google-marker-grey-small.png |
N/A |  |
| Google Maps Marker Grey Icon | google-marker-grey.png |
N/A |  |
| Google Maps Marker Grey Icon (large) | google-marker-grey-large.png |
N/A |  |
| Google Maps Marker Green Icon (small) | google-marker-green-small.png |
N/A |  |
| Google Maps Marker Green Icon | google-marker-green.png |
N/A |  |
| Google Maps Marker Green Icon (large) | google-marker-green-large.png |
N/A |  |
| Google Maps Marker White Icon (small) | google-marker-white-small.png |
N/A |  |
| Google Maps Marker White Icon | google-marker-white.png |
N/A |  |
| Google Maps Marker White Icon (large) | google-marker-white-large.png |
N/A |  |
| Loading Mask Icon | loading-small.gif |
@loaderSmall |
 |
| Global Spritesheet | sprites.png |
@sprites |
 |
Common Components
Loading Mask
Placeholder Container: Mask Example
Placeholder Container: Mask Example