![]() In the worst situations, your site’s CSS can balloon as you try to adjust to a host of different viewpoints and devices. While that fact presents a number of different challenges to consider (how to best optimize content, creating effective mobile SEO strategies, choosing the right content management system, etc.), it also creates an underlying tension with your site’s CSS. I opt for ‘column’, as a column can be on it’s own or stacked beside others.Nearly every month we’re reminded that a greater percentage of digital media is consumed on mobile devices. We’ll be using media queries to adjust the width of our fluid-first layout, so using class names such as ‘one-third’ aren’t going to suffice anymore. If you’re a semantic geek like me, and you should be, it might be worth revisiting your class names. Start a fresh, square one, percentages all the way. Though depending on the design, is it even feasible to do so, or would a redesign/restructure be in order?ĭepending on your code volume too, it would be really time consuming and inefficient to work with your original code. I strongly advise a CSS rebuild if you’re looking to implement fluid percentages and responsive media queries on existing sites. Note: If you are using ‘min-device-width’ instead of ‘min-width’, or ‘max-device-width’ instead of ‘max-width’ you’ll need to use ‘if lte IE 10′ instead of IE 8, as IE9/10 do not support min/max-device-width. Finishing touchesįor browsers that don’t support media queries, it’s well worth implementing css3-mediaqueries.js, a JavaScript polyfill by Wouter van der Graaf, to make IE5/6/7/8 become responsive. Percentages aren’t limited to pixels, so let your designs expand. You can see how powerful a tiny media query tweak could be to a percentage, and I feel the less we use media queries and the more we can rely on percentages – the easier our development lives will be. Initially, this is the first step into creating your fluid-first website, the rest is up to you. It requires very little media query manipulation and kicks ass on all devices. ![]() ![]() Change those column widths to 100% so they stack nicely, build as you wish. Start with your percentages, build your core site structure, and then make the slight tweaks with media queries to finalise. Remember: having fluid code isn’t a fluid-first approach, it’s a lot to do with the thinking and process in which you develop. Forget restricting your code to your fixed viewport sizes, it’s simply not enough anymore – use them as a guide on what’s efficient and readable and mostly – best for your layout. I really see fluid-first pushing the way forward in the way we think about designing and coding websites, to make them scalable. wrapper Fluid-first Fluid-first Conclusion Using percentages, we can begin to create clever code, that ultimately becomes so easy to manage and so quick to update. In the realm of progressive and responsive development, fluid-first is the answer to future proofing your website. Getting the right design is imperative to how you’ll code using the fluid-first approach, don’t just design to the screen you’re working on. Nothing actually changes between these devices, 50% and 50% is consistent. Comparing screen sizes, the mobile width is a lot smaller (obviously not to scale), but our elements would still have to obey our percentage widths. This would mean they would both fit exactly half the screen. ’50%’ identifies our two aligned elements, both at 50% width. ’100%’ identifies the screensize, no matter what it is. Of course, this will look horrible at 320px, but that’s where we add the finishing touches with media queries. Imagine you’ve got 5 items in your navigation, they should all share 20% of the navigation width. Using a fluid-first approach, we’ll aim to create as much of our website as we can, using percentages and not fixed pixels, so our design needs to be adaptive, you need to be able to envision this while you’re creating your layout. You’ve got to think ahead for your website design, picture how everything should scale perfectly. And trust me, this speeds up your core development time dramatically – not to mention the performance benefits of reduced code and increased manageability. Take a serious look at some of the most popular resolutions, and those becoming increasingly popular – they’re completely different – and it’s important your site is perfectly scaled at the hands of every resolution and device. Media queries aren’t the saviour of the web, flexible content is.įorget about 320px and other standard pixel benchmarks, these should just be a guide. So what is a fluid-first approach? It’s forgetting about media queries until you really need them, they are a finishing touch to our website core.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |