Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

How do I create a new responsive product page?

Featured Replies

How do I create a new responsive product page?

I've uploaded two sketches:
http://danacord.com/tegning-1.jpg
http://danacord.com/tegning-2.jpg

Drawing-1.jpg:

The box with the cover and button can have a fixed width. Both are uploaded in 200 * 200 pixels - or at least specified with "width =" 200 "in the HTML code.

The title, artist and description section may vary in scope, but all text just needs to be wrapped up and adapt to the space available at any time.

Then we get to the tracklist. Here it will be okay for the work / track titles to be wrapped up if there is not enough space. Some releases have quite long titles, e.g. https://www.danacord.dk/frmsets/records/793-94-r.html, but as a starting point there is plenty of room.

The reviews section is just links to PDFs or JPGs and is illustrated with the media logo. Again: The logos are uploaded at a fixed size of 200px, or specified in the HTML with "width =" 200 ".

The last box ("See also:") should wrap when there is not enough space and happen when more than two products are displayed.

Drawing-2.jpg:

The vast majority of releases contain a single CD and some two, but then there are also the pure exceptions such as
https://www.danacord.dk/frmsets/records/801-830-r.html

I don't have a smartphone, but I imagine it would be cumbersome (and maybe unattractive?) to flip and flip and flip, but splitting the box into single CDs on each product page is therefore not appropriate (seems I). Here I am definitely (as a whole) susceptible and flexible to alternative solutions.

9 minutes ago, Kurt Hansen said:

How do I create a new responsive product page?

It depends on the platform you are using to build the site.

But the general answer to your question is: using CSS.

What you can't do is use your existing site structure. You will need to get rid of those iframes.

  • Author

Yes, the platform should be CSS.

My problem is that since I started developing websites over 20 years ago I have not kept up with the times. I managed to experience CSS's entry into the field and used it a bit, but then I stopped.

Since then, much has happened, and not least in the handheld media, which requires creative application of the latest techniques.

My problem is that after

You don't need the latest techniques, the rules of responsive design have been around for many years.

This is a good starter course: https://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design

That’s really just the beginning. You also need to consider UX, accessibility, information flows, calls to action, trust marks and a zillion other things.

Your marketing strategy will also influence your site design and structure as will the needs of your target visitor.

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.