HOme
Products
Core Products
Physical Cards For Collaboration & Management
Extracting The Best Part Of Every Article
VIP Membership Of Alphabag
Announcing Soon
Practical Manual To Develop Skill Set
Our Public Declaration Towards Work & Life
Integrated Solution For Strategy & Management
The Mega Course For Product Strategy, Design & Dev
Tailored Workshop & Consultancy Service
Support
Alphabag Deck Onboarding Manual
Onboarding flow after receiving the deck
Submit News Highlights
Provide content for Alphabag News
Shipping, Return and Refund Policy
The policy you may want to know
Frequently Asked Questions
Questions that you may want to ask
Company
About
Company's vision, core team & products
Blog
Our thoughts and news
Contact Us
Get in touch for any opportunities
Founder
About Kevin Hon Chi Hang
Press Kit
Download our brand assets here
Careers
Join us along with our adventure
Partnership
Sponsorship
Provide content for Alphabag News
Wholesale Inquiry
Sell our products via your network
SHOP
0
Your Cart
$ 0.00 USD
:
Remove
No items yet.
Be sure to check out the early bird offer of Alphabag Deck
Early Bird Offer
Product is not available in this quantity.
WD 055
Responsive Design
Prioritize the content and layout structure according to different device widths.
Explore Resources
Knowledge Brief
No items found.
Related Knowledge
Wireframes
Navigation
Usability Test
Breakpoint
Search Engine Optimization (SEO)
Web Accessibility
Layouts that are too complex to scroll, hard to scan, and overloaded with UI elements rarely provide value and dramatically reduce landing page conversions.
How to Design an Effective Landing Page
toptal.com
Landing Page
Call-to-action Button (CTA)
Responsive Design
highlighted by
Kevin Hon Chi Hang
Founder of Alphabag
While cards are interactive elements that point a user to the more detailed information, a little bit of microinteraction on the card will boost the experience. You can use microinteractions when the user hovers the mouse on the card, clicks a link or a button.
Best practices for designing cards
medium.com
Design Principles
Responsive Design
Unit Testing
highlighted by
Kevin Hon Chi Hang
Founder of Alphabag
If the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values. It is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel. It is recommended that the reference pixel be the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length.
Using the viewport meta tag to control layout on mobile browsers
developer.mozilla.org
Viewport
Meta Description
Responsive Design
highlighted by
Bo-Yi Wu
If you're designing flexibly, use the viewport meta tag in your <head>.
Quick Tip: Don’t Forget the Viewport Meta Tag
webdesign.tutsplus.com
Metadata
Viewport
Responsive Design
highlighted by
Benson Shen
Copywriter
Related Knowledge
UX 002
Wireframes
A visual guide that represents the skeletal framework of a website or application.
WD 009
Navigation
Make sure vistors can navigate your desire user journey.
RA 018
Usability Test
Run tests on an existing product based on existing pain points.
WD 056
Breakpoint
Focus on the major breaks, add the nice to have breaks if possible.
DM 004
Search Engine Optimization (SEO)
Make sure your site is visible to search engines and metadata is included on all pages.
WD 066
Web Accessibility
To ensure compliance and make website ready for elderly or less privileged.