Most small screens you can design for belong to devices that run iOS or Android. Apple and Google have defined standards for their operating systems. You should refer to the Human Interface Guidelines or Material Design, respectively. People who use iOS and Android devices expect interfaces on them to work in standard ways.
One common exception to this is that if you design a full-screen experience, like a game, standards are relaxed.
A smaller screen naturally means you have less space to work with. Do what you can to make good use of that space.
Text should generally be smaller on small screens. This is so that more text can fit on the screen. but you might be tempted to make text smaller than is easily read. Do some research and find out the common text sizes used on iOS and Android for a good guideline. But since this is a quick start guide: don’t go below 16px for body text.
Titles will often need to be reduced in size more than body text will be. For example, while body text might be reduced from 20px to 17px, title text might be reduced from 60px to 40px.
Generally you will also reduce the space between elements on smaller screens. Otherwise, the space between elements will take up a much larger percentage of the screen than they would on a larger screen.
Most small screens you can design for are touch screens. Here are some things to keep in mind.
A mouse allows you to hover over an element to show that you are interested but not committed. A touch screen does not offer you a way to do that. No standard equivalent of hovering has been settled on. So you will need to design interfaces with a lack-of-hovering in mind. This means controls that appear on hover, for example, will not work.
A finger provides less precise “aiming” than a mouse, so interactive elements need to bigger. This is so that people can comfortably tap them with a finger tip, and feel confident that they will be able to do it.
One thing to keep in mind is that an element can offer a bigger touch target than it seems to. For example, a checkbox might be a standard small size, but have a larger touch target. This will allow someone to roughly touch the right area and still trigger the checkbox.
Generally the rule for small screen layouts is “use one column”. This means you take whatever was horizontally stacked in a larger screen layout, and vertically stack it instead.
This sometimes means that layout and content needs to be rethought. What worked in a horizontal stack might not work or make sense in a vertical stack.
This is an exception to the above. Horizontal scrolling is more common on touch screens especially. A common pattern to take advantage of this is a horizontal stack that spills off the edge of the screen. The touch screen means that a person can easily drag/scroll the horizontal stack to see the rest of it.
Based on your large screen habits, you might think to use generous margins either side of your single column layout. But small screen devices often have bezels that act as margins. So you should take advantage of as much screen space as you can and use small margins. Again, platform standards can act as a good guideline here.
Your default approach to element width should be that it is full width. For example, if you design a login screen, your “Login” button should be full width—excluding margins—unless you have a good reason not to make it so. One reason for this is that a wider button is a bigger touch target.