Some tips for preparing for Mobile

Make sure that your content is set to Fill and can fit in a 375 width. Desktop typically uses max-width.



Avoid Fixed sizes, embrace min/max values.



Screen paddings for Mobile are vastly different from Desktop and Tablet. They are as follow: 96 for Desktop, 24 for Tablet and 20 for Mobile. Content paddings and gaps also scale similarly.



For Headings, use the Mobile counterparts. E.G. Heading 1 to Mobile Heading 1.



For best CSS implementation, set everything to Auto Layout. There are 2 elements that use Absolute: backgrounds and overlays.



Typically, Auto Layout direction is set to Vertical for Mobile and Horizontal for Desktop.



Use Auto Layout Wrap when you can. This saves the trouble of switching direction.



Some assets like mockups and illustrations need to be scaled (K) at 0.75x or 0.5x for Mobile.