How to Presentation a Wireframe for...

User 131545 Photo


Registered User
687 posts

Hi all,

How many colomns and row do have need for my wireframe structural design?

I post in an example how the resume display it on my computer but that is not correct display on my smartphone or tablet computer.

Can somebody help me and post here the responsive wireframe as RLMP file?

Thanks
Kind regards

Attachments:
Toekomstgerichte door ICT gebeten IT'er
Stephane Fonteyne
Ba. Elektronica - ICT
Application Software PowerBasic Developer
e-mail : stephane.fonteyne@telenet.be
gmail : stephane760126@gmail.com
linkin : in : <http://www.linkedin.com/pub/stephane-fonteyn/53/402/204>
twitter : @Stefke36
User 122279 Photo


Senior Advisor
14,450 posts

I'm not at my own computer now, so I can't make any wireframe for you. But to your questions about columns and rows:

The usual number of columns in a grid is 12, and I think you should stick to that. Seeing the drawing you made, you could in theory reduce the number to 4, but I would advise against it, because then you are locked into a very rigid kind of grid.

So, it looks like you need 4 rows. The 3rd one down should be split into 3 - 6 - 3 cells' columns, and in the middle one you could drop a subgrid with 3 rows.
The 2 top rows (of the main grid) both has a navigation. You can either split the right part of those rows into single cells to hold a nav button, or you can insert a navigation from a different programme. Also the logo and the image to the right will be in columns covering the number of cells needed for those two items.

When narrowing the screen width, at some point you will see that everything starts looking very small and squashed. Click the plus sign (top left) to insert a break point a little before it becomes unreadable. Then do some editing to the 3rd row (maybe the other rows need it as well, depending on your contents). If the image background in the two 3 cell columns only serve as decoration, you could take them away and make the 6 cell column cover 12 cells. If, however, the image backgrouns have to be visible, You can also make them 12 cells wide and float them so that the left one goes above the middle section and the right one below.

Have a go at it, it's not rocket science, after all. :)
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 131545 Photo


Registered User
687 posts

Inger,

Can you explean it with a screenshot how I can create the grid layout with "cols" and "rows"?

Thanks
Stephane
Toekomstgerichte door ICT gebeten IT'er
Stephane Fonteyne
Ba. Elektronica - ICT
Application Software PowerBasic Developer
e-mail : stephane.fonteyne@telenet.be
gmail : stephane760126@gmail.com
linkin : in : <http://www.linkedin.com/pub/stephane-fonteyn/53/402/204>
twitter : @Stefke36
User 122279 Photo


Senior Advisor
14,450 posts

Hi, have you seen this Quick Start guide?
http://www.coffeecup.com/help/articles/responsive-layout-maker-quick-start-guide/
I think you'll find all the screen shots you need there. Get back here if you get stuck, and we'll try to help you further.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com



Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.