FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


Responsive Web Design Tips





bangalorewebgur
Keep your layout simple
Optimize for most frequent resolution
Define the break points
Make a flexible layout
Make pictures to behave
Include Maximize and Minimize
Use media queries
codegeek
Do you have any particular framework or library that you use for responsive design? I've been using Bootstrap, but there's only so much that it offers in the way of design and there's always a feeling there's something more specialized out there.
cybersa
codegeek wrote:
Do you have any particular framework or library that you use for responsive design? I've been using Bootstrap, but there's only so much that it offers in the way of design and there's always a feeling there's something more specialized out there.


+1.
Because i'm also using the same over a year.
Simonjw
You have a good base layout here.

I don't think keeping your layout simple really plays a big role in large screens, but adapting your content rather for smaller screens is the must.

Resolutions are changing constantly with all the different size gadgets coming out, so what I have found works best is to leave a feedback page available to get the device and screen size which the person having an issue is using.

I personally don't use any frameworks any more as the are full of clutter and slow you down when you have to cut stuff out of it. I build a website from the ground up and starting from the smallest resolution. I keep the content in mind from the beginning and then structure it to each device screen size.

Using fluid widths instead of pixel based widths is a must as it makes your design flow much smoother. Using large scale images works better for responsive design as you have great resolution.

I find by building the whole website from scratch, I can make the websites exactly to mine and my customers tastes while being fully in control and knowing my own structure intimately.

Hope this helps,

Cheers
bpgs
codegeek wrote:
Do you have any particular framework or library that you use for responsive design? I've been using Bootstrap, but there's only so much that it offers in the way of design and there's always a feeling there's something more specialized out there.


Yes bootstrap is now only powerful but also heavy. Therefore I use frequently the Amazium Framework.
deanhills
bpgs wrote:
codegeek wrote:
Do you have any particular framework or library that you use for responsive design? I've been using Bootstrap, but there's only so much that it offers in the way of design and there's always a feeling there's something more specialized out there.


Yes bootstrap is now only powerful but also heavy. Therefore I use frequently the Amazium Framework.
Thanks for the tip bpgs. Looks much easier to digest than Bootstrap. I checked the example Websites at http://www.amazium.co.uk/ and the codes in the CSS and HTML and never seen anything as neatly written as that in a long time. It's CLEAN. Worth looking at for sure. Even I can get a handle on how the grid system works as well. Bootstrap is just too heavy and convoluted for me and although I'm still hoping to, just don't seem to have the time available to master Bootstrap right now.

AND amazium is free. Cool
Simonjw
Big bump Razz.

So I still pretty much build all my websites from scratch, but recently I found something I like a lot to use for my grid system, that is when I am not using flexbox in HTML5/CSS3 apps. It is called Manhattan by Adam Charles Smith, it has it's own data-attribute called mhtn which keeps your html quite clean as there are no classes and identifiers for the actual grid.

You might be wondering how you would use it through a data attribute, but it is quite simple. Here is an example:

Quote:

<div mhtn="container flex"></div>


This would give you a container that would be the length of the whole page and have a small amount of padding on the left and right. There is also row, col and element sizes that you can place within the the div with the container. The main reason why I like this is because I have the freedom of placing this data-attribute and then having Notepad++ through an extension make the attribute invisible so that I can work with my classes and identifiers freely and not have to worry about my grid system at all.

This has worked really well for me and has allowed me to shorten my design development quite substantially. It also allows me to focus more on my UI elements and how I really want the website to shine. You can find the documentation and download for the grid system at http://www.adchsm.com/manhattan/. If you end up giving it a try, let me know what you think.

Simon
Simonjw
Another bump.

Recently started using Flexbox for all my designs. I have literally only used a handful of media queries in the last month since the switch Smile.

However, I have started using flexboxgrid framework for the larger scale layouts I am redoing. It literally is more then halving the previous HTML and CSS of my projects.

Cheers,
Simon
Related topics
PROFESSIONAL WEB DESIGN TUTORIAL
Web Design Directory
Web design
Do you use dreamweaver for web design.
Graphic + Web Design
Graphic + Web Design
Adiutrix Web Design -- FREE WEB DESIGN --
Jobs in Europe for English Speaking foreigns?
Google Takes On Web-Design Market
What Web Design Software is everyone using?
Autumnhouse Web-Design
Web design, general quality tips!
Filmaking and Graphics/Design Tips Forums
web design tips !!!!
Reply to topic    Frihost Forum Index -> Scripting -> Website Software

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.