English • Responsive • SEO • Preserved

Modern Demo — English Site Fresh Start

All 75 English pages (e-*.html / e-*.htm) have been updated in-place at the site root to be responsive + SEO-ready. This modern/ folder is a fresh showcase of the next-level clean catalog (table → grid) that we can roll out to all products next.

What was fixed (root files)

Viewport + responsive CSS (flex → stacked at 768px) • Hamburger menu • Tables overflow-scroll • Images fluid (1080px → 100%) • SEO: title/desc/canonical/hreflang/og/json-ld per page • Skip link • lazy loading

Try the live responsive pages (root)

About Us

Text from e-company-2.html:56-73 preserved verbatim, now responsive.

→ Open e-company-2.html

Products Catalog

Still table-based but scrollable on mobile (via JS wrapper).

→ Open e-pro-menu-2.html

Quality Policy

ISO9001/RoHS images responsive, centered.

→ Open e-quality-2.html

DS030 Product Detail

Wide chart 1080px now scrolls, not breaks mobile.

→ Open e-pro01-ds30.html

Next-level clean demos (inside modern/)

These strip old nested tables entirely and use semantic grid/cards — the target for all 69 product pages.

✦ About — Clean Version

No tables, semantic sections, same content.

→ modern/about.html

✦ Catalog — Grid Version

Table → CSS Grid, filterable, 8 series demo.

→ modern/products.html

✦ DS030 — Clean Detail

Spec tables + drawings responsive, no Flash.

→ modern/product-detail.html

How to test responsiveness

  • Desktop: sidebar 266px + carousel 716px + 10px bar (classic look preserved)
  • Tablet ≤768px: header stacks, hamburger appears, sidebar hides until toggled, carousel aspect-ratio, content 100%
  • Mobile ≤480px: wrapper margin 0, font 14px, tables scroll horizontally, large images shrink
  • Open DevTools responsive mode and resize — no horizontal page scroll.

SEO added per English page

title per page: e-company-2.html:6, e-pro-menu-2.html:6 ...
description + keywords + canonical + hreflang (en/zh-TW/zh-CN/x-default)
og:title/desc/url/image + twitter + robots
JSON-LD: Organization (dicgu.com.tw) + BreadcrumbList
skip-link + lang="en" + semantic main/header/nav
lazy loading on content imgs