One of the biggest trends in Webdesign of 2012 is Responsive webdesign. Because building a phone application for every website is way too expensive for companies, so they choose to use Responsive Webdesigns. Responsive Webdesigns are crafted to provide an optimal viewing experience and are optimized for computers and mobile phones. What it basically does is that it will change the order of elements when resizing your browser screen (Try it with Designersblog.net).
A great example of responsive webdesign is the following webpage. Just try it for yourself and resize your browser screen when visiting that website, you will see that it automatically grabs to 3 forms, the computer size (Screenshot) a tablet size, and the mobile phone size.
Orestis Webdevelopment
How to create your own Responsive Webdesign
There are many tutorials on the internet where you can learn to create your own Responsive Webdesign. In this post i will learn you the very basics of creating your very own Responsive Webdesign, and i will add some online tutorials to other websites that will help you creating your own! The first thing what you will need to do is research how your website is going to look on mobile devices. You will need to have some things in mind before starting to build.
Research
How do you want your Mobile website to be seen? Here are some great tips before starting, since these are very important.
- Navigation – Most websites have a couple of links in their navigation and a lot of websites have horizontal menu’s. This can be very hard to implement in your mobile style. The best thing you can do i create one big Dropdown menu, or (if you have a small amount of links) to create a small vertical menu.
- Typography and Headings – When you have big titles for your pages it can look great on your computer, but when you want to look at these on a mobile device it probably wouldn’t look that good. Make sure your headings are bigger than your text but don’t make them too big. If your main website uses only big fonts, the best thing to do is to convert all of your normal text into smaller text for the mobile viewers.
- Too much content – When your website contains a lot of information you may want to select some pieces that are not neccecary. When you view long texts on a mobile device, your page will only grow in length.
The basics
The best thing you can do is start start making a concept for your mobile layouts, how will the layout look and where will every element be placed. After this step you can simply design your mobile website in your favorite program. I still prefer Photoshop to design my Webdesigns, but other people will go for other free programs.
After this step it is time to pick a framework such as Foundation from Zurb. This website allows you to download the standard framework, or customize your own framework and build from that. They have a great documentation where is explained how to implement your mobile design into the framework and into your website.
Thanks for reading this very basic tutorial.
