Responsive Halalan?

4 views
Skip to first unread message

Mary Macapagal

unread,
Feb 1, 2012, 5:52:21 AM2/1/12
to Halalan Development
Hello (again),

Are you guys interested in making Halalan a responsive web app?

For a bit of background, responsive sites are those that change their
appearance depending on the size of the device or browser window. It's
based purely on html and css (and sometimes js) so the backend will
remain untouched.

To adapt an existing site to phones or tablets, we can remove the
unnecessary styling, resize some elements, or move them around so that
the more important elements are placed on top. If I'm not making
sense, just visit these sites and adjust your browser's width:

http://css-tricks.com/
http://trentwalton.com/
http://webdesignerwall.com/
http://spigotdesign.com/


Notice how some "filler" content are sometimes hidden, how the
navigation is re-positioned, how column widths are adjusted to give a
better viewing experience for smaller widths, and so on.

The downside is the new design might take longer to finish (since I'm
just starting to learn it) but the + is Halalan will be "future-
proofed" and usable on a tablet, phone, laptop, ginormous desktop, and
jumbo jets.

I don't know if there are security issues with using mobile phones and
tablets to host Halalan so you can also discuss those issues (no sense
designing for small devices if Halalan can't be deployed in them).

Mary Macapagal

unread,
Feb 1, 2012, 6:22:32 AM2/1/12
to Halalan Development
I forgot to say that this is just for the voter's view.

I'm not sure how a mobile device will affect the admin's file-related
options like uploading images of candidates, importing and exporting
voters.

On Feb 1, 2:52 am, Mary Macapagal <mary.macapa...@gmail.com> wrote:
> Hello (again),
>
> Are you guys interested in making Halalan a responsive web app?
>
> For a bit of background, responsive sites are those that change their
> appearance depending on the size of the device or browser window. It's
> based purely on html and css (and sometimes js) so the backend will
> remain untouched.
>
> To adapt an existing site to phones or tablets, we can remove the
> unnecessary styling, resize some elements, or move them around so that
> the more important elements are placed on top. If I'm not making
> sense, just visit these sites and adjust your browser's width:
>
> http://css-tricks.com/http://trentwalton.com/http://webdesignerwall.com/http://spigotdesign.com/

Waldemar Bautista

unread,
Feb 1, 2012, 11:25:55 AM2/1/12
to halal...@googlegroups.com
I can't speak for the other elections but in UPD USC, the format of
the vote page is important. The candidates are arranged by party so
there are three columns since there are three parties. This can be
affected since different computers in UP have different screen
resolutions (the columns may not look the same in all computers since
they maybe resized or rearranged in lower resolutions).

I think it is better for us to have a design that can handle
candidates being displayed by positions or parties regardless of the
positions or parties number (I think the most desirable is max of four
columns). If this can be done, we no longer need to support a
separate repo for UP elections.

--
Waldemar Amado Bautista

Mary Macapagal

unread,
Feb 2, 2012, 4:49:58 AM2/2/12
to halal...@googlegroups.com
Aaah ok. So that's why there's a separate branch for UP. I think it's weird that this is required by the USC. If there are two independent candidates for vice-chairperson, they will have to share a column while the other candidates with parties have a column each to themselves. Just a thought. Grouping parties into columns doesn't seem ok - at least for positions with only one slot.

I think the party-based column is only useful for councilors/representatives. For other positions, we can just list them in one column using the candidate's party as a subtitle (see a quick mock-up here https://gomockingbird.com/mockingbird/#p69z2vj/SsB8Gh)

Or if you want a radical, one-column solution, how about a search-based UI like this one? https://gomockingbird.com/mockingbird/#p69z2vj/OCb8Ot

Let me know of your thoughts on the UI (specifically the column issue and if there are more UPD rules that I don't know which can affect the design)


(PS I'm having trouble figuring out the demo for the voter's view. Maybe we should change it to something more commonplace like "President", "Representatives", "Party1", "Party2". Another task for our *potential* new devs)



--
You received this message because you are subscribed to the Google Groups "Halalan Development" group.
To post to this group, send email to halal...@googlegroups.com.
To unsubscribe from this group, send email to halalan-dev...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/halalan-dev?hl=en.


Rystraum Gamonez

unread,
Feb 2, 2012, 6:03:34 AM2/2/12
to halal...@googlegroups.com
On Thu, Feb 2, 2012 at 5:49 PM, Mary Macapagal <mary.ma...@gmail.com> wrote:
Aaah ok. So that's why there's a separate branch for UP. I think it's weird that this is required by the USC. If there are two independent candidates for vice-chairperson, they will have to share a column while the other candidates with parties have a column each to themselves. Just a thought. Grouping parties into columns doesn't seem ok - at least for positions with only one slot.

I think the party-based column is only useful for councilors/representatives. For other positions, we can just list them in one column using the candidate's party as a subtitle (see a quick mock-up here https://gomockingbird.com/mockingbird/#p69z2vj/SsB8Gh)

If I remember correctly, the same mockup that you had was the first one I implemented when they requested for it to be column-based. They didn't like it. The current UI is essentially a legacy UI. It's supposed to match how the paper ballot looked like. Politics. This is the reason for the existence of the UP branch.
 
Or if you want a radical, one-column solution, how about a search-based UI like this one? https://gomockingbird.com/mockingbird/#p69z2vj/OCb8Ot

Search-based wouldn't work as it will only cover one of our 2 user personas: People who know who to vote (this includes bloc voters), and people who don't. Plus, it's not exactly touch friendly.

Mary Macapagal

unread,
Feb 2, 2012, 7:06:45 AM2/2/12
to halal...@googlegroups.com
Hola!

On Thu, Feb 2, 2012 at 3:03 AM, Rystraum Gamonez <ryst...@gmail.com> wrote:

If I remember correctly, the same mockup that you had was the first one I implemented when they requested for it to be column-based. They didn't like it. The current UI is essentially a legacy UI. It's supposed to match how the paper ballot looked like. Politics. This is the reason for the existence of the UP branch.
 
FUUUUUUUUUUUUU. :'( Well we can leave the UP branch as is then. :/ What about the non-USC branch of Halalan? Do you want to change it back to your first mockup?

 
Or if you want a radical, one-column solution, how about a search-based UI like this one? https://gomockingbird.com/mockingbird/#p69z2vj/OCb8Ot

Search-based wouldn't work as it will only cover one of our 2 user personas: People who know who to vote (this includes bloc voters), and people who don't. Plus, it's not exactly touch friendly.

I made some changes to the search-based UI. Added a "list all candidates" button for those who cannot use the search feature. :)

Waldemar Bautista

unread,
Feb 2, 2012, 9:05:26 AM2/2/12
to halal...@googlegroups.com
On Thu, Feb 2, 2012 at 8:06 PM, Mary Macapagal <mary.ma...@gmail.com> wrote:
> On Thu, Feb 2, 2012 at 3:03 AM, Rystraum Gamonez <ryst...@gmail.com> wrote:
>>
>>
>> If I remember correctly, the same mockup that you had was the first one I
>> implemented when they requested for it to be column-based. They didn't like
>> it. The current UI is essentially a legacy UI. It's supposed to match how
>> the paper ballot looked like. Politics. This is the reason for the existence
>> of the UP branch.
>>
>
> FUUUUUUUUUUUUU. :'( Well we can leave the UP branch as is then. :/ What
> about the non-USC branch of Halalan? Do you want to change it back to your
> first mockup?

In this year's election, there are 3 parties and one independent
candidate for chairperson so there will be four columns, I think. It
makes me cringe.

I'm proposing this layout
(http://4.bp.blogspot.com/_g4V0Ss57HFM/S9WiWoNqupI/AAAAAAAABE0/_Cpo7dZN8Oc/s1600/DSC00916_comelec_official_sample_ballot_national.jpg)
for the ballot.

--
Waldemar Amado Bautista

Mary

unread,
Feb 2, 2012, 9:58:11 AM2/2/12
to halal...@googlegroups.com

On Feb 2, 2012, at 10:05 PM, Waldemar Bautista <waldemar...@gmail.com> wrote:

> On Thu, Feb 2, 2012 at 8:06 PM, Mary Macapagal <mary.ma...@gmail.com> wrote:
>> On Thu, Feb 2, 2012 at 3:03 AM, Rystraum Gamonez <ryst...@gmail.com> wrote:
>>>
>>>
>>> If I remember correctly, the same mockup that you had was the first one I
>>> implemented when they requested for it to be column-based. They didn't like
>>> it. The current UI is essentially a legacy UI. It's supposed to match how
>>> the paper ballot looked like. Politics. This is the reason for the existence
>>> of the UP branch.
>>>
>>
>> FUUUUUUUUUUUUU. :'( Well we can leave the UP branch as is then. :/ What
>> about the non-USC branch of Halalan? Do you want to change it back to your
>> first mockup?
>
> In this year's election, there are 3 parties and one independent
> candidate for chairperson so there will be four columns, I think. It
> makes me cringe.
>

:)

Ok. Looks like we're stuck with the fixed, four columns layout for now. But the sample ballot doesn't group the candidates per party. They only add the party name after the candidate. Names are arranged alphabetically.


Anyway, just to recap what's been discussed so far:

We will use a four column layout
Screen resolutions will be based on UPD equipment. So... 800x600 monitors are still possible and will be our minimum working size.
No plans for a mobile/touch-based Halalan site for now (judging from the lack of replies about the issue).

Waldemar Bautista

unread,
Feb 2, 2012, 10:16:11 AM2/2/12
to halal...@googlegroups.com
On Thu, Feb 2, 2012 at 10:58 PM, Mary <mary.ma...@gmail.com> wrote:
> Ok. Looks like we're stuck with the fixed, four columns layout for now. But the sample ballot doesn't group the candidates per party. They only add the party name after the candidate. Names are arranged alphabetically.

Hence, the need for a UP-specific repo. Unless we find a way to merge
a ballot arranged per party and a ballot arranged per position.

> Anyway, just to recap what's been discussed so far:
>
> We will use a four column layout
> Screen resolutions will be based on UPD equipment. So... 800x600 monitors are still possible and will be our minimum working size.

Yes, at least for version 2.0.0. I feel we need to release something
new since there are a few new features that will be helpful
(hopefully).

> No plans for a mobile/touch-based Halalan site for now (judging from the lack of replies about the issue).

It's on the horizon. We will get there.

--
Waldemar Amado Bautista

Reply all
Reply to author
Forward
0 new messages