Hello. I would like to make a responsive page that has a couple of square-ish buttons on it that sorta look like the icons you’d see on a mobile phone. The idea being, that the burton would have some kind of graphic or image to make it easier for people to make a selection. (This design is used at kiosks a lot to help people out.)
So my first question is this…
My temp website already has a “wrapper” container that I can make a Flexbox. If I wanted, say 4 squares inside of it that float around and respond to the screen size, would I just give each “button” - a siple DIV - a fixed width and height?
Hi. I am a luddite too, although I was forced into the mobile world against my will.
Forget “mobile” and just think of times you have maybe had to use an ATM or a kiosk somewhere.
I thought it would be nice to have a “menu” - that instead of being hyperlinks that people might not see or pay attention to - to instead have 3-4 square boxes that people could click on to go to different sections of my temporary website.
A “button” would ideally look like and behave like this…
Possible have a background image (e.g. screenshot of one of my graphs/charts)
When it is clicked it would take you to another page
It can only use HTML/CSS
If there is a way to make it look 3-D (i.e. raised up a bit) that would help
If there is a way to make it look “clickable” (i.e. when you click on the button it appears to move as in depressed/released)
I think that can all be done using a DIV and some newer CSS, but I wasn’t sure where to begin.
And back to my first question…
So should I use a DIV, and add a “width” and “height” to it to make a square, and then put it inside my Flexbox “.wrapper” class and then those “button” DIVs will float around and adpat to different screen sizes?
And this one is probably the closest to what I was envisioning, but the more simple ones above will do too…
**Note: The idea is that buttons like this would form a grid and be easier for people to read and click than hyperlinks. This is what you might see at a touch-screen kiosk at a shopping mall or store or even at your ATM.
In the mean time, do you think what I am trying to do makes sense from a user standpoint
The plan was to have a page that is a navigation page, and maybe have an H2 at top hat says, “Click a button to go to a section…”
Will users get what to do?
I thought that having a button with a picture of a graph would be intuitive for a section full of graphs/charts. And that a button with a photo of a person might be good for a photo gallery, and so on.
I have a top menu and if someone clicks on a menu option (e.g. “Money”), then I load a “Money” landing page. Originally I was going to have all content here, but then I decided it would be better to separate things into sub-categories. So now I want the “Money” landing page to have 3 square buttons that say something like: “Financials”, “Interviews” and “Blog”
Having a top menu and an empty page with 3 sub-categories would look silly.
Having 3 square buttons like the sample above would look better.