![]() ![]() Make the item red by selecting Red from the color popup in the Inspector palette. Don’t worry about the size or anything, any old item will do. To kick things off, Select the HTML tool in the toolbar and draw an item on the page. It’s actually not really a breakpoint at all, it’s just your page as it would have been before all this responsive stuff came along. The Default breakpoint is selected by default. You can also add one for changing the design of the page when someone prints it. They’re not set in stone, you can edit/delete/add them and using the Edit Media Types dialog. When you open a brand new document in Freeway (Press Command-N, select Custom, and leaving all options at their defaults click Ok), you’ll see a row of tabs across the top of the page: Phone, Phone (Landscape), Tablet, and Default – these are your breakpoints. Don’t worry though – at least you’re not going to have to write any code! To get the most mileage you’re may need to get your hands dirty with a little Freeway-wrangling. Ok, but how do I do all of this in Freeway?Īt its simplest, you can continue to use Freeway in exactly the same way. By covering all our bases and making sure it works for all widths we know it’s going to work on all devices, even if a new one with a screen that’s 830px wide becomes available. We didn’t choose 830px with a particular device in mind, we chose it because that’s when the menu crashes into the logo on its left when the window is resized. To give an example, our home page has a breakpoint at 830px that’s used to change the menu from a list of links to a clickable menu icon. It’s common to use the widths of popular devices like iPhones and iPads, but there are now too many different devices with different widths that we prefer to make our pages flexible and add our own widths when the layout starts looking bad. There’s a limit to what can be changed – we’ll cover that later. It works using handy little things called breakpoints, which are really just indicators to tell the browser that the design might change at certain widths. Without this repurposing it’d just be a desktop site scaled down to fit which is fine sometimes, but might mean people need to zoom in and pan around to read anything. It’s exactly the same site that you’d see on a desktop, but it’s been repurposed for the screen size you’re looking at it on. If you’re on any other device, you’ll notice that the site fits perfectly within the window and looks like it’s been designed specifically for the device. If you’re on a desktop, resize the browser window so it’s narrower and you’ll see that the layout will change at certain points. Take a look at the Softpress site right now. Responsive web design as a principle is really quite simple – it’s making sure a site fits the device it’s viewed on. ![]() Responsive web design in Freeway 13th of April, 2015 What is this responsive web design thing? ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |