Responsive Web Design
The most popular topic that is widely discussed since becoming mainstream a few years back is called Responsive Design. What is Responsive Design? It is the ability of your website to adjust to any device it’s being viewed on. Why is this important you might ask? Simple, if someone can’t view the content on your website properly, they will leave your site (baby please don’t go).
Responsive Design is not a new concept and most if not all websites built now days are Responsive and should work across all viewing platforms. That being said here are a few tips to consider when designing or building a Responsive website.
Adjustable Screen Resolution
There are two common layouts to think about when building a Responsive website (Portrait and Landscape). Think of your mobile device as the portrait layout and your desktop or tablet as the landscape layout. Portrait layouts have a smaller width and longer height while Landscape layouts have a longer width but shorter height.
If you are having trouble visualizing these layouts here is a good article I found on Smashing Magazine about Designing For Device Orientation: From Portrait To Landscape.
Content Flexibility
What I mean by Content Flexibility is the ability of your website content to adapt to different layouts or screen size resolutions without losing much quality. To achieve this task you can use fluid grids and Responsive images when building your new website. I suggest testing your content on a browser to make sure it adept’s correctly to different layouts or screen size resolutions.
Custom Layout Structure
For different layout structures like mobile devices, tablets and desktops we will want to use a custom structure that fits the needs of that specific layout. This can be achieved by using a CSS media query. Meaning most of the styles will remain the same while other style sheets will inherit these previous parent styles allowing the content to adjust to that particular screen size. Therefore coining the term, drumroll please… Responsive Design!
Conclusion
There are many different techniques and tools out there to help you design or build Responsive websites. Find a strategy that works best for you and use these examples above as guidelines when creating a Responsive Design.