Notes responsive design principle

The mediaqueri.es website offers lots of inspiration for some top-notch responsive web designs.

Element 1 (base element) 100%

Element 2 / 3 / 4 80% of the base element

Element 5 / 6 55% of the base element

Next problem is the shift positions between portrait and landscape layout / how the elements work as a whole.

Give up control of the overall design and focus on the elements and the relationship between them.

That way no matter the size/ format of the canvas you still have rule in place that the design adhere to

https://m.youtube.com/watch?v=Epv2AYSrEhc

When passing mock ups off to developers


The idea of a style guide might work, the ability to clearly explain the importance of each element in a hierarchy, how they react to one another and how they alter dependant on canvas orientation.

There would need to be a clear, percentage based, labelling system worked out where you had a base element that set the ratios of all the other elements. 

"The Challenges a Responsive Web Brings

Working with responsive design isn’t without its challenges. First of all, there are such a multitude of devices and screen sizes that we have to cater for. From extra-large to large screens, from small to mid (and everything in between) there’s a lot to think about. And, as I’m sure you already know being a developer, working with responsive design from the technical side of things can also turn nightmare-ish and be extremely difficult to handle."

"Like with any project, the main things you need to think about with responsive web design are the content of the website, how this content fits into the design and how the content flows from page to page. You need to look at how the different design elements you have work together and ensure that everything feels cohesive and consistent.

The difference with responsive web design is that you also need to think about how all of this works from one size to another, whether that is width or height based. You need to think carefully about how all of this translates to a smaller or larger screen and how all of your design elements, your content flow and everything else works. You need to keep the experience consistent, no matter the size of the website.Maybe you could modularise the design and try and create a base element that is pertinent to the other elements"